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

Feature-rich Mobile-friendly Slider Plugin For jQuery - fSlider
File Size: 19.5 KB
Views Total: 4992
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

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.