Basic Responsive jQuery Image Slider Plugin

Basic Responsive jQuery Image Slider Plugin
File Size: 18 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A really simple and responsive jQuery slider plugin for creating a fading image carousel/slideshow that supports auto rotation at a certain interval.

How to use it:

1. Include the required slider.css into your webpage's head section.

<link rel="stylesheet" href="css/slider.css">

2. Include the jQuery slider plugin and other necessary resources at the bottom of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/slider.js"></script>
<script src="js/responsive.js"></script>

3. The Html structure to create an image slider with controls.

<div id="slider">
  <div class="slides">
    <img class="image1" src="images/1.png">
    <img class="image2" src="images/2.png">
    <img class="image3" src="images/3.png">
  </div>
  <div class="prev"></div>
  <div class="next"></div>
  <div class="position"></div>
</div>

4. Call the plugin to enable the image slider.

jQuery("#slider").slider();

5. Available options with defaults.

jQuery("#slider").slider({
  delay: 1000,
  interval: 10000,
  random: false,
  resize: false
});

Change logs:

2017-04-03

2017-03-20

  • JS update

2017-02-25

  • added slide link

2017-02-24

  • update resize

2017-02-23

  • CSS update

2016-12-25

  • change opacity

2016-12-24

  • sliderResizeChange

2016-05-09

  • update auto function

2016-04-20

  • added random function

2016-02-26

  • JS update.

2015-03-19

  • Update responsive.js

2015-03-17

  • fix for ie8

2014-11-20

  • Update responsive.js

2014-11-17

  • update slider.css

2014-10-14

  • update

2014-10-08

  • fixed for IE7.

2014-09-01

  • Supports multi slider.

2014-08-22

  • A better solution with CSS for positioning from the next and prev button

2014-08-21

  • remove width and height in the slider.css
  • add text box

2014-08-18

  • Update slider.js

2014-08-13

  • Update slider.css

2014-08-12

  • Update slider.js

2014-07-21

  • max-width for responsive must be set earlier

This awesome jQuery plugin is developed by tronsha. For more Advanced Usages, please check the demo page or visit the official website.