Simple jQuery Slider - Demo page
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Jquery Simple Slider

How to use

Include jQuery library in your page:

<script src=""></script>

Include the javascript file in your page:

<script src="./src/slider.js"></script>


HTML layout

By default all images have height=auto(for responsive slider) if necessary can set fixed height

<div class="slider-container">
  <div class="slider">
    <div class="slider__item">
      <img src="img-1.jpg" alt="">
      <span class="slider__caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.<a href="">Далее >></a> </span>
    <div class="slider__item">
      <img src="img-2.jpg" alt="">
      <span class="slider__caption">2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, facilis.</span>
    <div class="slider__item">
      <img src="img-3.jpg" alt="">
      <span class="slider__caption">3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, culpa!</span>
    <div class="slider__switch slider__switch--prev" data-ikslider-dir="prev">
    <div class="slider__switch slider__switch--next" data-ikslider-dir="next">

Init plugin


Init with options

	speed: 700,
	cssEase: "ease-in-out"

Show specified slide


Destroy plugin



available options and their default values

touch   : true,
controls: true,
arrows  : true,
infinite: false,
delay   : 10000, // 10s
caption : false,
speed   : 300,
cssEase : 'ease-out',
responsive: true,
autoPlay: true,
pauseOnHover: true


ikSlider represents one event for additional functionality.

Event slideChange.ikSlider - event fired everytime when changing slides. Event have the following additional property currentSlide (index of the current slide).

$('#slider').on('changeSlide.ikSlider', function(e) {
  // console.log(e.currentSlide) ...