fSlider
[Slider Examples] (http://fionnachan.github.io)
[Slider Demo on CodePen] (http://codepen.io/fionnachan/pen/eZKMZg)
For the DOM:
Wrap your .sliderItem elements in a div with a class name to be used in the script, e.g. multi4Slider
For the script:
if responsive is set true, responsive.js is recommended to be included, otherwise please include $('window').trigger('responsive') somehow.
sliderName = $('.multi4Slider').fSlider({ arrowPrevClass: 'fArrow-prev', // provided for easy styling of arrows arrowNextClass: 'fArrow-next', // provided for easy styling of arrows autoplay: false, autoplaySpeed: 3000, // in ms adaptiveHeightOnResize: false, loop: false, callbacks: { beforeGoToSlide: function(){}, noLoopAfterEndSlideClickArrow: function(){}, afterchangeSlide: function(){} }, // can pass functions customizeDots: false, // can use thumbnails centerMode: false, // slidesToShow should always be 1 if centerMode is set true centerPadding: '0.2%', // center mode padding applied to current slide, pass in any style among '20%', '40' & '40px' showSiblingsHowMuch: 0.5, // 0.5 = show 50% width of the sibling slide, if value > 1, > 1 slides will be on each side of the center slide dots: true, drag: true, dynamicHeight: false, // if this is set false, default slider item vertical-align: middle setHeight: false, // setHeight to crop sliderItems which are too long widthHeightRatio: 0, // if setHeight is set true, you must provide this value defaultCurrentSlide: 0, // start from 0 easing: 'easeOutExpo', // pass any jQuery easing numOfNextSlides: [1, 1], // for responsive, please pass an array, for non-responsive, pass either integer or array pauseOnHover: true, responsiveBreakPoint: [0, 960], // must include 0 responsive: true, showArrows: true, slidesToShow: [1, 1], // for responsive, please pass an array, for non-responsive, pass either integer or array speed: 500 // in ms }); sliderName.fSlider('destroy'); or $('.multi4Slider').fSlider('destroy'); // return sliding movement direction: 'prev' or 'next' sliderName.fSlider('returnSlideDir'); or $('.multi4Slider').fSlider('returnSlideDir'); $('.multi4Slider').fSlider('goToSlide', targetSlideIndex); // targetSlideIndex [integer] 
