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

[site_reviews_summary assigned_to=”post_id”]

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!
[site_reviews assigned_to=”post_id”]

Submit Your Review

[site_reviews_form assign_to=”post_id”]