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

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

By Posted on

This time I will share jQuery Plugin and tutorial about Feature-rich Mobile-friendly Slider Plugin For jQuery – fSlider, hope it will help you in programming stack.

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

Demo Download

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.

view source
1 <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.

view source
1 <script src="jquery.min.js"></script>
2 <script src="src/js/fSlider.js"></script>
3 <script src="src/js/responsive.js"></script><br type="_moz">

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

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

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

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

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

view source
1 $('.example').fSlider();

6. All configuration options.

view source
01 $('.example').fSlider({
02  
03   // navigation arrows
04   arrowPrev: '<a class="fArrow-prev" href="javascript:void(0);"></a>',
05   arrowNext: '<a class="fArrow-next" href="javascript:void(0);"></a>',
06  
07   // autoplay
08   autoplay: false,
09  
10   // autoplay interval in ms
11   autoplaySpeed: 3000,
12  
13   adaptiveHeightOnResize: false,
14  
15   // callbacks
16   callbacks: {
17     noLoopAfterEndSlideClickArrow: function(){},
18     afterchangeSlide: function(){},
19     beforeGoToSlide: function(){},
20   },
21  
22   // enable center mode
23   centerMode: false,
24   centerPadding: "0.2%",
25  
26   // custom dots pagination
27   customizeDots: false,
28  
29   // enbale dots pagination
30   dots: true,
31  
32   // enable drag and swipe events
33   drag: true,
34  
35   // dynamic slider height
36   dynamicHeight: false,
37  
38   setHeight: false,
39   widthHeightRatio: 0,
40  
41   // easing option
42   easing: "easeOutExpo",
43  
44   // enable fade transition effect
45   fade: false,
46  
47   // starting slide
48   defaultCurrentSlide: 0,
49  
50   // enable loop mode
51   loop: true,
52  
53   // custom breakpoint
54   responsiveBreakPoint: [0, 960],
55  
56   // number of next slides
57   numOfNextSlides: [1, 1],
58  
59   // pause on hover in autoplay mode
60   pauseOnHover: true,
61  
62   // responsive layout
63   responsive: true,
64  
65   // enable arrows navigation
66   showArrows: true,
67  
68   // 0 - 1
69   showSiblingsHowMuch: 0.5,
70  
71   // for responsive, please pass an array,
72   // for non-responsive, pass either integer or array
73   slidesToShow: [1, 1],
74  
75   // aniamtion speed in ms
76   speed: 500,
77    
78   // for fixed height
79   vTop: false,
80   vBottom: false
81  
82 });

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.

source : jqueryscript.net

Related posts: