I have a slider that has some slides that are super long and some that are super short. I want to be able to set the transition speed on the fly by the width of the slide * 100 in milliseconds. The following code isn't working, but could you help point me in the right direction?
var speed = 10000;
$(".scrolling").on('beforeChange', function(event, slick, currentSlide){
var currentSlide = $('.scrolling').find('.slick-active');
var currentSlidewidth = currentSlide.width()*100;
$('.slick-track').css('transition', 'transform' + currentSlidewidth + 'ms linear');
console.log(currentSlidewidth);
});
$('.scrolling').slick({
speed: speed,
autoplay: true,
autoplaySpeed: 0,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
dots: false,
arrows: false,
variableWidth: true
});
http://jsfiddle.net/tpwidman/fmo50w7n/1564
====================================================================
Steps to reproduce the problem
- Set continuous slider settings
$(".slider").slick({
autoplay: true,
autoplaySpeed:0,
speed: 10000,
dots:false,
arrows:false,
cssEase:'linear',
dots: true,
variableWidth:true,
responsive: [{
breakpoint: 500,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 2
}
}]
});
====================================================================
What is the expected behaviour?
This is the expected behaviour.
...
====================================================================
What is observed behaviour?
Shorter width slides are slower and longer slides are faster because of the width.
...
====================================================================
More Details
- Which browsers/versions does it happen on? All browsers
- Which jQuery/Slick version are you using? most current
- Did this work before? No
tpwidman
All 6 comments
Tried adding this to the transition timer:
Slick.prototype.applyTransition = function(slide, slideIndex) {
var _ = this,
transition = {};
if (_.options.fade === false) {
if(_.options.continuousSliding === true) {
_.continuousWidth = $(_.$slides[_.currentSlide-1]).width()*5;
console.log($(_.continuousWidth));
transition[_.transitionType] = _.transformType + ' ' + _.continuousWidth + 'ms ' + _.options.cssEase;
} else {
transition[_.transitionType] = _.transformType + ' ' + _.options.speed + 'ms ' + _.options.cssEase;
}
} else {
console.log(_.options);
transition[_.transitionType] = 'opacity ' + _.options.speed + 'ms ' + _.options.cssEase;
}
if (_.options.fade === false) {
_.$slideTrack.css(transition);
} else {
_.$slides.eq(slide).css(transition);
}
};
But it keeps pausing, I think I'll need to figure out how the timing is set and subtrack the difference from the width
tpwidman
on 22 Nov 2017
I fixed this by updating the library to include a new parameter called continuousSliding
(function($) {
'use strict';
var Slick = window.Slick || {};
Slick = (function() {
var instanceUid = 0;
function Slick(element, settings) {
var _ = this, dataSettings;
_.defaults = {
accessibility: true,
adaptiveHeight: false,
appendArrows: $(element),
appendDots: $(element),
arrows: true,
asNavFor: null,
prevArrow: '<button class="slick-prev" aria-label="Previous" type="button">Previous</button>',
nextArrow: '<button class="slick-next" aria-label="Next" type="button">Next</button>',
autoplay: false,
autoplaySpeed: 3000,
centerMode: false,
centerPadding: '50px',
continuousSliding: false,
cssEase: 'ease',
customPaging: function(slider, i) {
return $('<button type="button" />').text(i + 1);
},
dots: false,
dotsClass: 'slick-dots',
draggable: true,
easing: 'linear',
edgeFriction: 0.35,
fade: false,
focusOnSelect: false,
focusOnChange: false,
infinite: true,
initialSlide: 0,
lazyLoad: 'ondemand',
mobileFirst: false,
pauseOnHover: true,
pauseOnFocus: true,
pauseOnDotsHover: false,
respondTo: 'window',
responsive: null,
rows: 1,
rtl: false,
slide: '',
slidesPerRow: 1,
slidesToShow: 1,
slidesToScroll: 1,
speed: 500,
swipe: true,
swipeToSlide: false,
touchMove: true,
touchThreshold: 5,
useCSS: true,
useTransform: true,
variableWidth: false,
vertical: false,
verticalSwiping: false,
waitForAnimate: true,
zIndex: 1000
};
_.initials = {
animating: false,
dragging: false,
autoPlayTimer: null,
currentDirection: 0,
currentLeft: null,
currentSlide: 0,
direction: 1,
$dots: null,
listWidth: null,
listHeight: null,
loadIndex: 0,
$nextArrow: null,
$prevArrow: null,
scrolling: false,
slideCount: null,
slideWidth: null,
$slideTrack: null,
$slides: null,
sliding: false,
slideOffset: 0,
swipeLeft: null,
swiping: false,
$list: null,
touchObject: {},
transformsEnabled: false,
unslicked: false
};
$.extend(_, _.initials);
_.activeBreakpoint = null;
_.animType = null;
_.animProp = null;
_.breakpoints = [];
_.breakpointSettings = [];
_.cssTransitions = false;
_.focussed = false;
_.interrupted = false;
_.hidden = 'hidden';
_.paused = true;
_.positionProp = null;
_.respondTo = null;
_.rowCount = 1;
_.shouldClick = true;
_.$slider = $(element);
_.$slidesCache = null;
_.transformType = null;
_.transitionType = null;
_.visibilityChange = 'visibilitychange';
_.windowWidth = 0;
_.windowTimer = null;
dataSettings = $(element).data('slick') || {};
_.options = $.extend({}, _.defaults, settings, dataSettings);
_.currentSlide = _.options.initialSlide;
_.originalSettings = _.options;
if (typeof document.mozHidden !== 'undefined') {
_.hidden = 'mozHidden';
_.visibilityChange = 'mozvisibilitychange';
} else if (typeof document.webkitHidden !== 'undefined') {
_.hidden = 'webkitHidden';
_.visibilityChange = 'webkitvisibilitychange';
}
_.autoPlay = $.proxy(_.autoPlay, _);
_.autoPlayClear = $.proxy(_.autoPlayClear, _);
_.autoPlayIterator = $.proxy(_.autoPlayIterator, _);
_.changeSlide = $.proxy(_.changeSlide, _);
_.clickHandler = $.proxy(_.clickHandler, _);
_.selectHandler = $.proxy(_.selectHandler, _);
_.setPosition = $.proxy(_.setPosition, _);
_.swipeHandler = $.proxy(_.swipeHandler, _);
_.dragHandler = $.proxy(_.dragHandler, _);
_.keyHandler = $.proxy(_.keyHandler, _);
_.instanceUid = instanceUid++;
// A simple way to check for HTML strings
// Strict HTML recognition (must start with <)
// Extracted from jQuery v1.11 source
_.htmlExpr = /^(?:\s*(<[\w\W]+>)[^>]*)$/;
_.registerBreakpoints();
_.init(true);
}
return Slick;
}());
Slick.prototype.activateADA = function() {
var _ = this;
_.$slideTrack.find('.slick-active').attr({
'aria-hidden': 'false'
}).find('a, input, button, select').attr({
'tabindex': '0'
});
};
Slick.prototype.addSlide = Slick.prototype.slickAdd = function(markup, index, addBefore) {
var _ = this;
if (typeof(index) === 'boolean') {
addBefore = index;
index = null;
} else if (index < 0 || (index >= _.slideCount)) {
return false;
}
_.unload();
if (typeof(index) === 'number') {
if (index === 0 && _.$slides.length === 0) {
$(markup).appendTo(_.$slideTrack);
} else if (addBefore) {
$(markup).insertBefore(_.$slides.eq(index));
} else {
$(markup).insertAfter(_.$slides.eq(index));
}
} else {
if (addBefore === true) {
$(markup).prependTo(_.$slideTrack);
} else {
$(markup).appendTo(_.$slideTrack);
}
}
_.$slides = _.$slideTrack.children(this.options.slide);
_.$slideTrack.children(this.options.slide).detach();
_.$slideTrack.append(_.$slides);
_.$slides.each(function(index, element) {
$(element).attr('data-slick-index', index);
});
_.$slidesCache = _.$slides;
_.reinit();
};
Slick.prototype.animateHeight = function() {
var _ = this;
if (_.options.slidesToShow === 1 && _.options.adaptiveHeight === true && _.options.vertical === false) {
var targetHeight = _.$slides.eq(_.currentSlide).outerHeight(true);
_.$list.animate({
height: targetHeight
}, _.options.speed);
}
};
Slick.prototype.animateSlide = function(targetLeft, callback) {
var animProps = {},
_ = this;
_.animateHeight();
if (_.options.rtl === true && _.options.vertical === false) {
targetLeft = -targetLeft;
}
if (_.transformsEnabled === false) {
if (_.options.vertical === false) {
_.$slideTrack.animate({
left: targetLeft
}, _.options.speed, _.options.easing, callback);
} else {
_.$slideTrack.animate({
top: targetLeft
}, _.options.speed, _.options.easing, callback);
}
} else {
if (_.cssTransitions === false) {
if (_.options.rtl === true) {
_.currentLeft = -(_.currentLeft);
}
$({
animStart: _.currentLeft
}).animate({
animStart: targetLeft
}, {
duration: _.options.speed,
easing: _.options.easing,
step: function(now) {
now = Math.ceil(now);
if (_.options.vertical === false) {
animProps[_.animType] = 'translate(' +
now + 'px, 0px)';
_.$slideTrack.css(animProps);
} else {
animProps[_.animType] = 'translate(0px,' +
now + 'px)';
_.$slideTrack.css(animProps);
}
},
complete: function() {
if (callback) {
callback.call();
}
}
});
} else {
_.applyTransition();
targetLeft = Math.ceil(targetLeft);
if (_.options.vertical === false) {
animProps[_.animType] = 'translate3d(' + targetLeft + 'px, 0px, 0px)';
} else {
animProps[_.animType] = 'translate3d(0px,' + targetLeft + 'px, 0px)';
}
_.$slideTrack.css(animProps);
if (callback) {
if(_.options.continuousSliding === true){
_.continuousWidth = $(_.$slides[_.currentSlide-1]).width()*10;
//console.log(_.continuousWidth);
setTimeout(function() {
_.disableTransition();
callback.call();
}, _.continuousWidth);
}else {
console.log(_.continuousWidth);
setTimeout(function() {
_.disableTransition();
callback.call();
}, _.options.speed);
}
}
}
}
};
Slick.prototype.getNavTarget = function() {
var _ = this,
asNavFor = _.options.asNavFor;
if ( asNavFor && asNavFor !== null ) {
asNavFor = $(asNavFor).not(_.$slider);
}
return asNavFor;
};
Slick.prototype.asNavFor = function(index) {
var _ = this,
asNavFor = _.getNavTarget();
if ( asNavFor !== null && typeof asNavFor === 'object' ) {
asNavFor.each(function() {
var target = $(this).slick('getSlick');
if(!target.unslicked) {
target.slideHandler(index, true);
}
});
}
};
Slick.prototype.applyTransition = function(slide, slideIndex) {
var _ = this,
transition = {};
if (_.options.fade === false) {
if(_.options.continuousSliding === true) {
_.continuousWidth = $(_.$slides[_.currentSlide-1]).width()*10;
//console.log($(_.continuousWidth));
transition[_.transitionType] = _.transformType + ' ' + _.continuousWidth + 'ms ' + _.options.cssEase;
} else {
transition[_.transitionType] = _.transformType + ' ' + _.options.speed + 'ms ' + _.options.cssEase;
}
} else {
console.log(_.options);
transition[_.transitionType] = 'opacity ' + _.options.speed + 'ms ' + _.options.cssEase;
}
if (_.options.fade === false) {
_.$slideTrack.css(transition);
} else {
_.$slides.eq(slide).css(transition);
}
};
Slick.prototype.autoPlay = function() {
var _ = this;
_.autoPlayClear();
if(_.options.continuousSliding === true){
_.continuousWidth = $(_.$slides[_.currentSlide-1]).width()*5;
_.autoPlayTimer = setInterval( _.autoPlayIterator, _.options.autoplaySpeed);
//console.log(_.autoPlayTimer);
}
else if ( _.slideCount > _.options.slidesToShow ) {
_.autoPlayTimer = setInterval( _.autoPlayIterator, _.options.autoplaySpeed );
}
};
Slick.prototype.autoPlayClear = function() {
var _ = this;
if (_.autoPlayTimer) {
clearInterval(_.autoPlayTimer);
}
};
👍2
So uh, if I wanted to use this, how would I include this in my slick? Like, where do I put that code?
schnoodly
on 30 Nov 2017
just replace in the slick.js library from the top to autoPlayClear. Then, just add continuousSliding: true; to your options. All I wrote were a couple of if statements and got the width of the slides.
tpwidman
on 30 Nov 2017
❤3
If I set continuousSliding: true, the speed parameter stops working.
miaerbus
on 27 Nov 2018
Hi, I stucked, any ideas how to fix it?
There's problem after last slide, another loop doasn't start immediately but first slide is delayed.
https://codepen.io/urbi/pen/zbjeWz
urbi15
on 26 Mar 2019
Was this page helpful?
0 / 5 - 0 ratings
Related issues
xitongzou
路
3Comments
jamesinealing
路
3Comments
eirikrlee
路
3Comments
crstauf
路
3Comments
stephane-r
路
3Comments
Most helpful comment
just replace in the slick.js library from the top to autoPlayClear. Then, just add continuousSliding: true; to your options. All I wrote were a couple of if statements and got the width of the slides.