https://github.com/b13/js-sliderwithprogressbar

https://github.com/b13/js-sliderwithprogressbar

Last synced: 15 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/b13/js-sliderwithprogressbar
• Owner: b13
• Created: 2015-06-03T08:49:36.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2015-12-15T14:25:47.000Z (over 10 years ago)
• Last Synced: 2025-12-01T09:03:30.532Z (7 months ago)
• Language: JavaScript
• Size: 142 KB
• Stars: 1
• Watchers: 12
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
js-sliderWithProgressbar

===================

setup up slick slider (https://kenwheeler.github.io/slick/) with preview image and bootstrap progressbar 

### Initialization with AMD

	// init slider

	require(['js-sliderWithProgressbar'], function(slider) {

		

		$('.bJS_ct_slider').each(function() {

		

			me.slider = new slider($(this), options, sliderOptions, previewSliderOptions);

	

			// stop slider

			//me.slider.stop();

	

			// start slider

			//me.slider.start(index);

			

			// get reference to slick slider

			//me.slider.getSlick();

			

		});

	});

	

	

### default options

	

	var options = {

		progressbarSelector    : '.bJS_progressbar'

		, slideSelector        : '.bJS_slider'

		, previewSlideSelector : '.bJS_previewSlider'

		, progressInterval     : ''

			// add your own progressbar animation function to sync it i.e. with a video

			// function will be called if the current preview slider item (".b_previewItem") has the data-customprogressbar="true" property set

		, onCustomProgressbar : function($slide, $progressbar) {}

	}

	

		// slick slider options

		// see: https://kenwheeler.github.io/slick/

	var sliderOptions = {

		slidesToShow   : 1,

		slidesToScroll : 1,

		arrows         : false,

		fade           : true,

		autoplay       : true

	}

	

		// slick slider options

		// see: https://kenwheeler.github.io/slick/

	var previewSliderOptions = {

		slidesToShow   : 3,

		slidesToScroll : 1,

		dots           : false,

		focusOnSelect  : true,

		centerMode     : true

	}