Animated Image Slider using jQuery & CSS3

The “silder” is a thin and basic jQuery plugin that allows you to create animated image slider. You just need to place your images in slider’s HTML structure. After that, this plugin render a beautiful fullscreen animated image slider with next previous buttons. Moreover, it can be also customized with additional CSS according to your needs.

Plugin Overview and Preview

Plugin: silder
Author: ChiangYuChi
Category: Carousel
Published: November 15, 2019
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 5 MB
Dependencies: jQuery 3.0 or Latest version
Last Modified:

Code Rating

0.0 rating
0 out of 5 stars (based on 0 reviews)
Very good0%

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=""></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">
<!-- 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.



  • CSS updated.


  • Initial release.
No config options!

There are no reviews yet. Be the first one to write one.

Submit Your Review