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,
});
});
Related
bxSlider has a function to reload slider(s) at a specific action. I initialise multiple sliders on my page in the following way:
jQuery('.product_carousel_images').each(function(index,item) {
jQuery(item).bxSlider({
mode: 'fade',
speed: 600,
pause: 7000,
auto: false,
controls: false,
pager: true,
pagerCustom: '.product_carousel_pager'
});
});
Using jQuery easytabs for a tab layout, the first slider is in the first (i.e. visible) tab and working well, while the second is generated in an initially hidden div. Since bxSlider sets the height of a slider within a div with display:none to 0, the second slider has zero-height images. visibility:hidden isn't an option, since the tabs interface doesn't allow for that.
With this multiple slider function, how can I trigger a reload of my sliders on a specific action, like clicking a tab header?
I don't use bxSlider myself, however I'm guessing you can make use of bxSlider's "reloadSlider" function.
http://bxslider.com/examples/reload-slider
Just keep a reference to your slider at initialization, then call reloadSlider on it whenever you change tabs, which in your case with easy tabs would have to make use of the easytabs:after event.
var slider = jQuery(item).bxSlider({
mode: 'fade',
speed: 600,
pause: 7000,
auto: false,
controls: false,
pager: true,
pagerCustom: '.product_carousel_pager'
});
// Reload slider whenever tab changes
$('#your-tabs-container').bind('easytabs:after', function() {
// TODO identify the displayed tab using EasyTabs target panel parameters in order not to reload bxSlider when the wrong tab is displayed
slider.reloadSlider();
});
More information on EasyTabs' Event Hooks here:
https://os.alfajango.com/easytabs/#configuration
Can I Add Custom Attributes To the Jquery Slider named Fullscreen slider? I want my slider to autoplay, How should i do so?
jQuery(document).ready(function (){
jQuery('#slider').fullscreen_slider({
easing: 'easeOutQuad',
handle_width: 100, //Prev next show width
speed: 'slow' // Three options only.
});
});
jQuery(window).resize(function() {
jQuery('#slider').fullscreen_slider('resize');
});
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.
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