I have a slider that looks like this:
$('#slider').cycle({
fx: 'scrollHorz',
speed: 1250,
timeout: 5000,
easing: 'easeInOutExpo',
pager: '#slider-pagination',
next: '#next-slide',
prev: '#prev-slide',
pause: 1
});
By default, when it's on the last slide Cycle just scrolls to the left again to start over, as though it's an infinite loop. I want it to scroll back through all the slides and land on the first one again. Much like it does here (see the last slide): http://www.iconlicious.com/. I must use Cycle, so I can't use the same plugin as they are.
How can that be achieved?
Thanks
The solution is to set the nowrap option to false.
While I can't test anything, you probably will have to use the end option to define a function to return to the beginning.
So, something like:
$('#slider').cycle({
fx: 'scrollHorz',
speed: 1250,
timeout: 5000,
easing: 'easeInOutExpo',
pager: '#slider-pagination',
next: '#next-slide',
prev: '#prev-slide',
pause: 1
nowrap: false,
end: function() {
// make it go to the first slide
}
});
Use the not documented 'bounce' option:
$('#slider').cycle({
fx: 'scrollHorz',
speed: 1250,
timeout: 5000,
easing: 'easeInOutExpo',
pager: '#slider-pagination',
next: '#next-slide',
prev: '#prev-slide',
pause: 1,
bounce: true
});
Hope this helps
Looking at your website, I can tell you already solved your problem, but I wanted to post this in case there were others who might find it valuable.
You used jquery.scrollable, which is a great solution and solved the same issue for me.
Related
I have a slick slider and on hover of the slider I want it to go to the second slide. I've managed to do this with mouseenter and mouseleave, however if you hover on/off the slider quickly the function doesn't work.
I'm presuming this is because it doesn't have enough time to complete each function but I'm not sure how to get around this. Any advice would be appreciated.
jsFiddle
JS:
$('.slider').on('mouseenter', function (e) {
$(this).slick('slickGoTo', 1);
});
$('.slider').on('mouseleave', function (e) {
$(this).slick('slickGoTo', 0);
});
In the function that you provided:
$(document).ready(function(){
$('.slider').slick({
dots: true,
speed: 1000,
infinite: true,
autoplay: false,
});
});
I see that you have set the speed very high. If you put speed to 10 etc. than it should work better.
I need help with the coding on the site I'm trying to build.
www.diveintodesign.co.uk/ChrisMcCrone/index.html
The coding is from http://jquery.malsup.com/cycle/
The large image in the middle is the slideshow, the two bars on the left and right of it are the next and previous buttons which work fine but it won't run automatically for some reason, the javascript includes timeout:0
Does anyone know what I've done wrong?
Cheers,
Lise
I think setting timeout to the amount of time to hold on a slide is what you want.
$('.slideshow').cycle({
fx: 'scrollHorz',
speed: 'fast',
timeout: 3000, // 3 seconds
next: '#next',
prev: '#prev'
});
I looked up your code and the jQuery Cycle Plugin website. I think you have to change the timeout to a number which is higher than 0, else it doesn't automatically slide.
$('.slideshow').cycle({
fx: 'scrollHorz',
speed: 'fast',
timeout: 5000, // time in milliseconds you want
next: '#next',
prev: '#prev'
});
Also, I want to say that it's really not clear that the black bars on the side are the buttons to control the slideshow.
Having trouble with jquery cycle not sure what am i doing wrong.
Without delay it all works fine, but I would love to delay the first image
because the slider starts before the first image or two are loaded
I would love to stop it for few seconds and then start.
ANY IDEAS ?
$(document).ready(function() { $('#slideshow').cycle({
fx: 'fade',
speed: '1000',
timeout:'4000',
delay: '1000'
});
});
if you wanted a 4 second interval between transitions but you want the first transition to occur 2 seconds after the page loads then you would do this:
$('#slideshow').cycle({
fx: 'fade',
speed: '1000',
timeout:'4000',
delay: -2000
});
The 'delay' option gives you an opportunity to change the transition interval of the very first slide. When the timeout value of the first slide is calculated, the value of the delay option (default is 0) is added to the timeout value
Hope it helps
I've tried all manner of things based on the documentation but no matter what I do, I can't seem to make it pause.
Here's what the documentation says:
slider.pause() //Function: Pause slider slideshow interval
slider.play() //Function: Resume slider slideshow interval
But it doesn't specify how to define the slider variable. I've tried:
var slider = $('.flex-slider').flexslider({
animation: "slide",
easing: "swing",
direction: "horizontal",
animationLoop: true,
slideshow: true,
animationSpeed: 600,
slideshowSpeed: 1200,
controlNav: false,
directionNav: false,
pausePlay: false
});
$('.pause-button').on('click',function({
slider.pause();
});
Which resulted in... http://puu.sh/4qpo3.png
And I've tried:
$('.flex-slider').flexslider().pause();
Which resulted in... http://puu.sh/4qpcS.png
And I've tried:
$('.flex-slider').flexslider().pause(true);
Which resulted in... http://puu.sh/4qpcS.png
And all in all I'm just not seeing what exactly I'm doing wrong here.
Anyone wanna provide some insight? :)
Try $('.flex-slider').flexslider('pause') and $('.flex-slider').flexslider('play').
Hi I see you turned off the option
pausePlay: false
Now edit few thing. first turned on the option
pausePlay: true,
pauseText :"Pause",
playText :"Play",
Now you will see a play pause text comes in the slider, with having two different classes for pay and pause, just add your icon image to that class with css. and you will have you desired functionality.
If you have Anything slider setup on a page like something like so
$('.anythingSlider').anythingSlider({
easing: "easeInOutExpo",
autoPlay: true,
delay: 5000,
startStopped: false,
animationTime: 600,
hashTags: true,
buildNavigation: true,
pauseOnHover: true,
navigationFormatter: formatText
});
How can you later change an individual property - say delay=10000?
You can use the API to access the options. In the newest version .anythingSlider isn't the element to initialize AnythingSlider on, it ends up being named as .anythingBase.
$('#slider').data('AnythingSlider').options.delay = 10000;
I'll update the usage wiki page to show this more explicitly.