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