https://github.com/fionnachan/fslider

A light jQuery slider plugin
https://github.com/fionnachan/fslider

plugin slider slider-plugin

Last synced: 10 months ago
JSON representation

A light jQuery slider plugin

• Host: GitHub
• URL: https://github.com/fionnachan/fslider
• Owner: fionnachan
• Created: 2015-12-18T09:06:32.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2017-08-18T23:59:51.000Z (almost 9 years ago)
• Last Synced: 2025-08-23T22:54:23.663Z (10 months ago)
• Topics: plugin, slider, slider-plugin
• Language: JavaScript
• Homepage: http://fionnachan.github.io/
• Size: 91.8 KB
• Stars: 11
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 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]


#### support IE8+