Feature-rich Mobile-friendly Slider Plugin For jQuery - fSlider

fSlider is a simple, flexible and robust jQuery slider plugin for generating a fully responsive, customizable carousel/slideshow component for your mobile or desktop web projects.

Features:

• Cross-browser and cross-platform.
• Autoplay.
• Carousel mode.
• Center mode.
• Slide or fade animations.
• Supports both drag to slide on desktop and swipe to slide on mobile.
• Custom breakpoint for responsive layout.
• Custom pagination and navigation.
• Auto adjusts the height based on the child elements.
• Supports jQuery easing effects.

Basic usage:

1. Load the required style sheet fSlider.css in the head section. It provides default styles for the sliders and you can extend it to create your own styles.

<link href="src/css/fSlider.css" rel="stylesheet">

2. Load jQuery library and the jQuery fslider plugin's JavaScript file at the end of the document.

<script src="jquery.min.js"></script> 
<script src="src/js/fSlider.js"></script> 
<script src="src/js/responsive.js"></script>

3. Load the jQuery easing plugin for additional easing functions.

<script src="jquery.easing.min.js"></script> 

4. Wrap the slider items e.g. images into a container..

<div class="example">
  <img class="sliderItem" src="1">
  <img class="sliderItem" src="2">
  <img class="sliderItem" src="3">
  <img class="sliderItem" src="4">
  <img class="sliderItem" src="5">
  <img class="sliderItem" src="6">
</div>

5. Call the function on the top container to generate a basic slider.

$('.example').fSlider();

6. All configuration options.

$('.example').fSlider({

  // navigation arrows
  arrowPrev: '<a class="fArrow-prev" href="javascript:void(0);"></a>', 
  arrowNext: '<a class="fArrow-next" href="javascript:void(0);"></a>', 

  // autoplay
  autoplay: false, 

  // autoplay interval in ms
  autoplaySpeed: 3000, 

  adaptiveHeightOnResize: false,

  // callbacks
  callbacks: {
    noLoopAfterEndSlideClickArrow: function(){},
    afterchangeSlide: function(){},
    beforeGoToSlide: function(){},
  }, 

  // enable center mode
  centerMode: false, 
  centerPadding: "0.2%",

  // custom dots pagination
  customizeDots: false, 

  // enbale dots pagination
  dots: true, 

  // enable drag and swipe events
  drag: true, 

  // dynamic slider height
  dynamicHeight: false, 

  setHeight: false,
  widthHeightRatio: 0,

  // easing option
  easing: "easeOutExpo", 

  // enable fade transition effect
  fade: false, 

  // starting slide
  defaultCurrentSlide: 0, 

  // enable loop mode
  loop: true, 

  // custom breakpoint
  responsiveBreakPoint: [0, 960], 

  // number of next slides
  numOfNextSlides: [1, 1], 

  // pause on hover in autoplay mode
  pauseOnHover: true, 

  // responsive layout
  responsive: true, 

  // enable arrows navigation
  showArrows: true, 

  // 0 - 1
  showSiblingsHowMuch: 0.5, 

  // for responsive, please pass an array, 
  // for non-responsive, pass either integer or array 
  slidesToShow: [1, 1], 

  // aniamtion speed in ms
  speed: 500, 
  
  // for fixed height
  vTop: false, 
  vBottom: false 

});

Change logs:

2016-08-24

• fixed resize issue when slider is not displayed

2016-02-12

• added responsive.js for better responsiveness.

2016-02-04

• JS update

2016-01-29

• clean up code

2016-01-25

• added image loaded check.

2016-01-22

• JS update

2016-01-19

• more mobile-friendly

2016-01-18

• v0.8.6

2016-01-15

• subtle modifications for UX

2016-01-10

• changed drag off target

2015-12-30

• JS update

2015-12-24

• updated center mode
• fixed center mode dots bug

2015-12-23

• fixed touch events
• update arrows

2015-12-21

• JS update + bugfix

 

---

This awesome jQuery plugin is developed by fionnachan. For more Advanced Usages, please check the demo page or visit the official website.