Simple jQuery Slider - Demo page
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
images
lib
src
README.md
index.html

README.md

Jquery Simple Slider

How to use

Include jQuery library in your page:

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

Include the javascript file in your page:

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

Example

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>
    <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>
    <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>
  </div>
    <div class="slider__switch slider__switch--prev" data-ikslider-dir="prev">
      <span></span>
    </div>
    <div class="slider__switch slider__switch--next" data-ikslider-dir="next">
      <span></span>
    </div>
</div>

Init plugin

$(".slider-container").ikSlider();

Init with options

$(".slider-container").ikSlider({
	speed: 700,
	cssEase: "ease-in-out"
});

Show specified slide

$(".slider-container").ikSlider(3);

Destroy plugin

$(".slider-container").ikSlider('destroy');

Options

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

Event

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) ...
});