Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* ******************* */
- /* begin user settings */
- /* ******************* */
- // replace the number below with your slider's ID
- // http://tinyurl.com/zb6hzpc
- var api = revapi20;
- // add horizontal scrollbar
- var scrollbar = true;
- // elastic animation timing/duration
- var elasticDistance = false,
- elasticTiming = 0.5;
- /* ***************** */
- /* end user settings */
- /* ***************** */
- var totalSlides,
- hasElastic,
- sliderWid,
- scrollWid,
- scroller,
- keyboard,
- slider,
- wheel,
- timer,
- swipe,
- wheelDirection,
- bodies = jQuery('body'),
- data = api.data('opt').navigation,
- touches = 'ontouchend' in document ? ['touchstart.cj', 'touchmove.cj', 'touchend.cj'] :
- ['mousedown.cj', 'mousemove.cj', 'mouseup.cj'];
- if(data.touch.touchenabled === 'on') {
- data.touch.touchenabled = 'off';
- swipe = true;
- }
- if(data.keyboardNavigation === 'on') {
- data.keyboardNavigation = 'off';
- keyboard = true;
- }
- if(data.mouseScrollNavigation !== 'off') {
- data.mouseScrollNavigation = 'off';
- wheelDirection = data.mouseScrollReverse === 'default';
- wheel = true;
- }
- api.on('revolution.slide.onloaded', function() {
- hasElastic = elasticDistance;
- totalSlides = api.revmaxslide();
- slider = api.find('.tp-revslider-mainul').addClass('film-strip');
- sliderWid = slider.width();
- api.find('.tp-revslider-slidesli').not('.tp-invisible-slide').each(setPositions);
- api.on('revolution.slide.onbeforeswap', slideChange).addClass('the-slider-loaded');
- if(swipe) addSwipe(api, data.touch['swipe_threshold']);
- if(scrollbar) addScrollbar();
- if(keyboard) jQuery(document).on('keydown', onKey);
- if(wheel) api.on('wheel', onWheel);
- jQuery(window).on('resize focus', onResize);
- });
- function onWheel(event) {
- api.revpause();
- slider.off('transitionend.cj').one('transitionend.cj', onEnded);
- event = event.originalEvent.deltaY;
- var curSlide = Math.round(Math.abs(parseInt(slider[0].style.left, 10) / sliderWid));
- if(wheelDirection ? event > 0 : event < 0) {
- if(curSlide < totalSlides - 1) slideChange(false, false, curSlide + 1);
- }
- else {
- if(curSlide > 0) slideChange(false, false, curSlide - 1);
- }
- return false;
- }
- function onKey(event) {
- var key = event.which,
- curSlide;
- if(key === 37) {
- curSlide = Math.round(Math.abs(parseInt(slider[0].style.left, 10) / sliderWid));
- if(curSlide > 0) {
- api.revpause();
- slider.off('transitionend.cj').one('transitionend.cj', onEnded);
- slideChange(false, false, curSlide - 1);
- return false;
- }
- }
- else if(key === 39) {
- curSlide = Math.round(Math.abs(parseInt(slider[0].style.left, 10) / sliderWid));
- if(curSlide < totalSlides - 1) {
- api.revpause();
- slider.off('transitionend.cj').one('transitionend.cj', onEnded);
- slideChange(false, false, curSlide + 1);
- return false;
- }
- }
- }
- function slideChange(e, data, pos) {
- var index = data ? data.nextslide.index() : pos;
- pos = -(sliderWid * index);
- if(elasticDistance) {
- var dif = elasticTiming * 0.5;
- dif += (Math.abs((api.revcurrentslide() - 1) - index) * elasticTiming) * 0.5;
- slider[0].style.transitionDuration = dif + 's';
- if(scroller) scroller[0].style.transitionDuration = dif + 's';
- }
- else if(hasElastic) {
- elasticDistance = true;
- }
- slider[0].style.left = pos + 'px';
- if(scroller) {
- var perc = -pos / (sliderWid * (totalSlides - 1));
- scroller[0].style.left = ((sliderWid - scrollWid) * perc) + 'px';
- }
- }
- function setPositions() {
- jQuery.fn.revolution.animateTheCaptions(jQuery(this), api.data('opt'), true);
- }
- function onResize(event) {
- api.off(touches[1]);
- slider.off('transitionend.cj');
- bodies.off(touches[1] + ' ' + touches[2]);
- if(event.type === 'focus') {
- sliderWid = slider.width();
- if(scroller) {
- scrollWid = scroller.width();
- scroller[0].style.left = '0px';
- }
- elasticDistance = false;
- api.revshowslide(1);
- return;
- }
- clearTimeout(timer);
- timer = setTimeout(resized, 100);
- }
- function resized() {
- sliderWid = slider.width();
- api.find('.tp-revslider-slidesli').not('.tp-invisible-slide').each(setPositions);
- var pos = -((sliderWid * (api.revcurrentslide() - 1)));
- slider[0].style.left = pos + 'px';
- if(scroller) {
- var perc = -pos / (sliderWid * (totalSlides - 1));
- scrollWid = scroller.width();
- scroller[0].style.left = ((sliderWid - scrollWid) * perc) + 'px';
- }
- }
- function onEnded() {
- var index = Math.round(Math.abs(parseInt(slider[0].style.left, 10) / sliderWid));
- api.revshowslide(index + 1);
- api.revresume();
- }
- function addSwipe(api, threshold) {
- var pos,
- perc,
- newX,
- prevX,
- newPos;
- slider.addClass('tp-carousel-wrapper');
- api.on(touches[0], function(event) {
- api.revpause();
- slider.off('transitionend.cj').removeClass('film-strip').addClass('dragged');
- event = event.originalEvent;
- if(event.touches) event = event.touches[0];
- prevX = event.pageX;
- newX = prevX;
- pos = parseInt(slider[0].style.left, 10) || 0;
- newPos = pos;
- if(scroller) scroller.removeClass('film-strip');
- bodies.off(touches[2]).one(touches[2], onUp);
- api.off(touches[1]).on(touches[1], onMove);
- return false;
- });
- function onMove(event) {
- event = event.originalEvent;
- if(event.touches) event = event.touches[0];
- newX = event.pageX;
- newPos = pos + (newX - prevX);
- slider[0].style.left = newPos + 'px';
- if(scroller) {
- perc = -newPos / (sliderWid * (totalSlides - 1));
- scroller[0].style.left = ((sliderWid - scrollWid) * perc) + 'px';
- }
- event.preventDefault();
- }
- function onUp(event) {
- api.off(touches[1]);
- bodies.off(touches[2]);
- if(Math.abs(newX - prevX) > threshold) {
- var sliderHalf = sliderWid * 0.5;
- newPos += newX < prevX ? -sliderHalf : sliderHalf;
- }
- newPos = Math.max(Math.min(newPos, 0), -(sliderWid * (totalSlides - 1)));
- var index = Math.round(Math.abs(newPos / sliderWid));
- slider.one('transitionend.cj', onEnded).removeClass('dragged').addClass('film-strip');
- slider[0].style.left = -(index * sliderWid) + 'px';
- if(scroller) {
- scroller.addClass('film-strip');
- scroller[0].style.left = (index * scrollWid) + 'px';
- }
- }
- }
- function barClick(event) {
- api.revpause();
- slider.off('transitionend.cj');
- var pos = event.pageX - api.offset().left - (scroller.width() * 0.5);
- pos = Math.min(Math.max(pos, 0), sliderWid - scrollWid);
- var perc = pos / (sliderWid - scrollWid);
- pos = -((sliderWid * (totalSlides - 1)) * perc);
- var index = Math.round(Math.abs(pos / sliderWid));
- api.revshowslide(index + 1);
- }
- function addScrollbar() {
- var pos,
- perc,
- newX,
- prevX,
- newPos,
- scrollW = (100 / totalSlides) + '%',
- container = jQuery('<div class="horizontal-scrollbar-container" />');
- jQuery('<div class="horizontal-scrollbar-base" />').on('click', barClick).appendTo(container);
- scroller = jQuery('<div class="horizontal-scrollbar film-strip" style="width: ' + scrollW + '" />').appendTo(container);
- container.insertAfter(slider);
- scrollWid = scroller.width();
- scroller.on(touches[0], function(event) {
- api.revpause();
- slider.off('transitionend.cj').removeClass('film-strip');
- scroller.removeClass('film-strip');
- event = event.originalEvent;
- if(event.touches) event = event.touches[0];
- prevX = event.pageX;
- newX = prevX;
- pos = parseInt(scroller[0].style.left, 10) || 0;
- perc = pos / (sliderWid - scrollWid);
- newPos = -((sliderWid * (totalSlides - 1)) * perc);
- bodies.off(touches[1] + ' ' + touches[2]).one(touches[2], onUp).on(touches[1], onMove);
- return false;
- });
- function onMove(event) {
- event = event.originalEvent;
- if(event.touches) event = event.touches[0];
- newX = event.pageX;
- newPos = pos + (newX - prevX);
- newPos = Math.min(Math.max(newPos, 0), sliderWid - scrollWid);
- scroller[0].style.left = newPos + 'px';
- perc = newPos / (sliderWid - scrollWid);
- newPos = -((sliderWid * (totalSlides - 1)) * perc);
- slider[0].style.left = newPos + 'px';
- event.preventDefault();
- }
- function onUp(event) {
- api.off(touches[1]);
- bodies.off(touches[1] + ' ' + touches[2]);
- newPos = Math.max(Math.min(newPos, 0), -(sliderWid * totalSlides) + sliderWid);
- var index = Math.round(Math.abs(newPos / sliderWid));
- scroller.addClass('film-strip');
- scroller[0].style.left = (index * scrollWid) + 'px';
- slider.one('transitionend.cj', onEnded).addClass('film-strip');
- slider[0].style.left = -(index * sliderWid) + 'px';
- }
- }
Add Comment
Please, Sign In to add comment