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:
MIT
191 views

Code Rating

0
0.0 rating
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

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.

Changelog

3/11/2019

  • CSS updated.

17/10/2019

  • Initial release.
No config options!

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

Submit Your Review