jquery slider playing automatically - javascript

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.

Related

Synchronization two different slideshow jquery plugins

please go to this Address:
http://pakianco.ir/test/index.php
on the above of page i use two different slideshow for displaying company products. these two slideshow must be consonant means that they must be start at same time and images used in two slideshow must be change Simultaneously.But it did not happen.
i use two different plugin for that. left slideshow is bootstrap carousel plugin and right slideshow is flux Slider.
this code is for right slideshow:
$(function(){
window.myFlux = new flux.slider('#slideshow', {
autoplay: true,
pagination: false,
transitions: ['blocks'],
delay: 5000
});
});
and this is for left slideshow:
$('#slides.carousel').carousel({
'interval': 5000,
'pause':'false',
'wrap':'false'
});
can you help me to doing that

How to sync two jQuery cycle image sliders?

In my single HTML page I am using two image sliders. For both the sliders I have given the same delay time.
When the page is loaded both image slides are syncing but when the image slides run for few minutes they are not syncing correctly.
Is it possible to make them sync?
$(document).ready(function() {
$('#slide').cycle({
fx: 'fade',
delay: -6000,
});
$('#content_slide').cycle({
fx: 'fade',
delay: -6000,
});
});

jQuery Cycle delay issue

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

How do I slow down the banner transitions on my homepage? CSS

On my homepage the banner transitions are going very quickly- I would like to know how to slow them down. Here is the page: www.sevenbarfoundation.org
It is written in CSS

Under:
http://assets.sevenbarfoundation.org/wp-content/themes/sevenbar/js/slideshow.js
You need to change the values in line 14 and 15 to have the effect you want (timeout and speed):
$('#slideshow').cycle({
timeout: 1000,
speed: 1000,
pager: '#slideshow_controls_num'
});

jQuery Cycle: Scroll back to the first slide after the last slide

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.

Categories