I have 4 bullets points, and I noticed the function callback and transitionEnd fire twice. So the carousel jumps some slide...I don't understand why. window.mySwipe is initialized once.
<script src="js/swipe-slider.js"></script>
<script>
window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 0,
speed: 400,
auto: 2000,
continuous: true,
disableScroll: false,
stopPropagation: true,
callback: function(index, elem) {
console.log("callback: " + index);
},
transitionEnd: function(index, elem) {
console.log("-");
}
});
</script>
OUTPUT CONSOLE :
Finally, I removed auto: 2000 and I used a recursive function by calling window.mySwipe.next();. Now, no jumps anymore.
Related
I have a bx slider which has 6 images. I want to go through each of them once then stop for a second and then begin again, then stop for one second again etc. It's mentioned here (http://bxslider.com/options) but with no full example.
This is the code I have now. It doesn't stop navigation images.
<script>
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
speed: 1,
pause:200
});
</script>
Sorry for the lame question. I am a still a newbie to jQuery.
Set autoDelay option and onSlideAfter function
Demo: http://jsfiddle.net/3h0ewwz4/
var slider = $('.bxslider').bxSlider({
auto: true,
autoDelay:2000,
onSlideAfter: function (slide, oldIndex, newIndex) { // add this function to solve issue
if (newIndex === 5) { // remember, it's zero based indices with bxslider...5 is index of last image
slider.stopAuto();
setTimeout(function () {
slider.goToSlide(0);
slider.startAuto();
}, 2000);
}
},
autoControls: true,
speed: 1,
pause:200
});
I have a slick slider for my images:
// Slick slider - Responsive
$(window).on('resize', function() {
if ($(this).width() > 1600) {
$('.images').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 20, // Set at least half of all slides
centerMode: true,
initialSlide: 0, // Fix for centerMode with 1
variableWidth: true,
arrows: true,
draggable: true,
swipeToSlide: true,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 3000
});
}
else {
$('.images').unbind(slick());
};
});
$(document).ready(function() {
$(window).resize();
});
If I refresh the page with a viewport less than 1600px (big size only for demo purposes), the slider not become active, works great. However if I change my browser's width bigger than 1600px and change it back to less than 1600px, the slider's code stays. I used slick slider's built-in responsive flags and unslick feature, but the problem was the same just like here: not completely clearing up it's code.
How can I completely remove it's code without refresh, only with viewport size change?
Edit:
Strange, but looks like this unbinding completely:
else {
$('.images').slick('unslick');
};
However the documentation suggested way is not, just partly:
responsive: [
{
breakpoint: 1600,
settings: 'unslick'
}
Edit:
Although the documentation suggested way removing it too, but not re-binding when the browser's the viewport size reaching where it should be active.
EDIT2:
THiCE's solution modified that only use timer for resize event. This way I won't get any console error on load because of .slick('unslick'); hack:
$(document).ready(function() {
$(window).on('load', function() {
handleSlick();
console.log('handleSlick() fired on load...');
});
var timer;
$(window).on('resize', function() {
clearTimeout(timer);
timer = setTimeout(function() {
handleSlick();
console.log('handleSlick() fired on resize...');
}, 100);
//console.log('jquery on window resize');
});
//handleSlick();
});
Sometimes using a setTimeout does the trick: the resize event is fired lots of times during resizing.
If you use a timer inside the resize callback that resets and starts everytime the resize event fires, you prevent those 'double' fires.
An example, for your case:
// Slick slider - Responsive
function bindSlick() {
$('.images').slick({
dots: false,
infinite: true,
// etc...
});
}
function unbindSlick() {
$('.images').slick('unslick');
}
function handleSlick() {
if ($(window).width() > 1600) {
bindSlick();
} else {
unbindSlick();
}
}
$(document).ready(function() {
var timer;
$(window).on('resize', function() {
clearTimeout(timer);
timer = setTimeout(function() {
handleSlick();
}, 100);
});
handleSlick();
});
//S1
$('#s1').cycle({
fx: 'scrollDown',
speed: 500,
timeout: 1000,
});
//S2
$('#s2').cycle({
fx: 'scrollDown',
speed: 500,
timeout: 2000
});
//S3
$('#s3').cycle({
fx: 'scrollDown',
speed: 500,
timeout: 3000
});
JSFiddle
I have three sliders. I want to slide them one by one. After 1st slide scroll, it should be pause till 3rd slider scroll. Any help on how can I do this?
Use delay property.
$('#s1').cycle({
fx: 'scrollDown',
speed: 500,
delay : -5000
});
//S2
$('#s2').cycle({
fx: 'scrollDown',
speed: 500,
delay : -3000
});
//S3
$('#s3').cycle({
fx: 'scrollDown',
speed: 500,
delay:-2000
});
Working Fiddle
Have a look at the following source code. It's using jquery.cycle's internal events to pause/resume the other sliders. I think it's more robust than using simple delays (which seems to cause some disturbance after a while).
//S1
var s1 = $('#s1').cycle({
fx: 'scrollDown',
speed: 500,
timeout: 500,
after: function() {
$('#s1').cycle('pause'); // when slider1 finishes one slide, pause it
$('#s2').cycle('resume'); // resume next slider, in this case, slider2
}
});
//S2
var s2 = $('#s2').cycle({
fx: 'scrollDown',
speed: 500,
timeout: 500,
after: function() {
$('#s2').cycle('pause'); // when slider2 finishes one slide, pause it
$('#s3').cycle('resume'); // resume next slider, in this case, slider3
}
});
s2.cycle('pause'); // by default pause slider2
//S3
var s3 = $('#s3').cycle({
fx: 'scrollDown',
speed: 500,
timeout: 500,
after: function() {
$('#s3').cycle('pause'); // when slider3 finishes one slide, pause it
$('#s1').cycle('resume'); // resume next slider, in this case, slider1
}
});
s3.cycle('pause'); // by default pause slider3
I've also bundled up a fiddle.
Small Modifications to #NicolaeOlariu's answer
function applyAnimeScroll(a, b, c) {
return {
fx: 'scrollDown',
speed: 500,
timeout: 1000,
after: function () {
$('#s1').cycle(a);
$('#s2').cycle(b);
$('#s3').cycle(c);
}
};
}
var s1 = $('#s1').cycle(applyAnimeScroll('pause', 'resume', 'pause'));
var s2 = $('#s2').cycle(applyAnimeScroll('pause', 'pause', 'resume'));
var s3 = $('#s3').cycle(applyAnimeScroll('resume', 'pause', 'pause'));
Working Fiddle
Good morning all :) I've got an issue here, which is pain in my neck for 2 days already. I'm using bxSlider for images to slide on a page and I'm calling my own function in onAfterSlide callback. Everything works fine except one thing. When I quickly switching between slides my function is being called 2-3 times(I have 3 images on page), which is not good as it returns unexpected results. I can not use newest version of bxSlider, because the markup has been changed. I think this happens, because the animation is still not finished when the onAfterSlide callback is called.
This is how I call bxSlider:
$('#slider_bx').bxSlider({
mode: 'fade',
speed: 1000,
pause: 9000,
auto: true,
autoControls: false,
prevText: '',
nextText: '',
autoHover: true,
captions: false,
pager: true,
onBeforeSlide: function () {
if ($('.slide_in').length) {
$('.slide_in').hide();
}
},
onAfterSlide: function () {
if ($('.slide_in').length && $('.slide_in').is(':hidden')) {
doCrazyStuff();
}
}
});
And this is my function:
function doCrazyStuff() {
var $this = $('.slide_in');
if ($this.length > 0) {
setTimeout(function () {
$this.show();
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
}, 3000);
}
}
Any help appreciated. Thanks.
EDIT:
I've tried to add .stop(), but didn't helped.
$this.show().stop();
$this.stop().show();
$this.stop().rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
}).stop(); // throws an error
You can cancel a timeout or make a check to see if it's running.
If you want only the last timeout to run:
var crazyTimeout;
function doCrazyStuff() {
var $this = $('.slide_in');
if ($this.length > 0) {
if (crazyTimeout != undefined) {
clearTimeout(crazyTimeout); // Cancel previous timeout
}
crazyTimeout = setTimeout(function () {
crazyTimeout = undefined;
$this.show();
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
}, 3000);
}
}
If you want only the first timeout to run:
var crazyTimeout;
function doCrazyStuff() {
var $this = $('.slide_in');
if ($this.length > 0) {
if (crazyTimeout != undefined) {
return; // A timeout is still running: don't create new one
}
crazyTimeout = setTimeout(function () {
crazyTimeout = undefined;
$this.show();
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
}, 3000);
}
}
Try using the
$('.slide_in').stop()
in after slide function I hope it works, if possible try to give code in fiddle it will be easy to help.
Viewing your code I think the problem is not with your code : but as you have set auto to true so the plugin timer is not stopped and is sliding the images in its regular interval.
so I hope the use of stopAuto() bxSlider function in your custom function will solve the problem. and don't forget to start the auto show after you have finished doing your stuff.
thanks
I am trying to change the text of the jquery cycle pager element. By default is is 1, 2, 3 etc. I would like to just make a customized name for each one. Here is the url:
http://www.rockymountainsports.ca/web/layout.html
Any help is great,
Thanks
Try this:
$(document).ready(function () {
var titles = ['Pentiction Summer Classic', 'Ryan Kesler', 'Trevor Linden'];
$('.slideshow').after('<div id="navigation"><div id="nav"></div></div>').cycle({
fx: 'fade',
timeout: 5000,
pager: '#nav',
pagerAnchorBuilder: function (index) {
return '' + titles[index] + '';
}
});
});