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'
});
Related
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
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.
I have the nivo slider working perfectly on a few sites.
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade',
animSpeed: 1000,
pauseTime: 8000,
controlNav: true,
manualAdvance: false
directionNav: false,
controlNavThumbs: false
});
});
Very happy, except for one thing...
When the slide transition is in process. I have to wait for it to complete before I can go to the next slide. This is a bad user experience if i have my slide transaition on 1 second. as it feels like a long wait if i want to click through quickly.
On other carousel banners, I can click through the nav buttons very quickly back and forth and the effect keeps up and dynamically changes direction.
Can't find anyone else asking this or a fix so assume I am missing something. How can I have this effect with nivo slider?
You can see the same issue exists on the nivo slider demo http://demo.dev7studios.com/nivo-slider/ although it's difficult to notice as the images change shape so the navigation moves.
Thanks
EDIT: Added JSFiddle. http://jsfiddle.net/micjam/Bq3nT/
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.