Feature-rich Mobile-friendly Slider Plugin For jQuery - fSlider
File Size: | 19.5 KB |
---|---|
Views Total: | 5281 |
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
- 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.