Basic Responsive jQuery Image Slider Plugin

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-28

• update css textbox

2017-04-03

• JS update

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.