Animated Image Slider using jQuery & CSS3

How to Create Animated Image Slider Using Jquery

1. In the initial step, load the jQuery (latest version) into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. In next step, include plugin assets (from downloaded directory) in your website/app.

<!-- animated silder CSS -->
<link rel="stylesheet" href="css/all.css">
<!-- animayed silder JS -->
<script src="js/all.js"></script>

3. Create HTML structure like below:

<div id="main">
        <div id="silder">
            <img src="./img/bg1.jpg" class="silder-img">
            <img src="./img/bg2.jpg" class="silder-img">
            <img src="./img/bg3.jpg" class="silder-img">
        </div>
    </div>
<!-- Slider Buttons -->
<div id="prvbtn">←</div>
<div id="nxtbtn">→</div>

The plugin will be auto initialized (activated) after including all assets. If you like this plugin don’t forget to rate this.