Out Of Sync Slider

JavaScript
1

Hi

I have created a slider within a slider that contains an image carousel as well. The left hand panel contains the slider links that autoscrolls through 5 images for that section before moving onto the next section that then scrolls through 5 images before moving onto the next section.

Here is the example - http://www.cre8tivesource.co.uk/tdf/home-slider/

It is controlled via Wordpress and I think I might have gone about this the wrong way. The slider becomes out of sync especially when you click on one of the links in the left hand column, when it reaches the 5th image it shows the first image of that section briefly before showing the correct section images.

It is very difficult to explain so hopefully the above link will show you better the out of sync problem.

Also if I were to switch between browser tabs then come back to the slider the slider again becomes out of sync!!

Is there another method I could use with the same layout and functionality where I don’t have the out of sync problem.

I am using flexslider and owl carousel for this at the moment.

Below are the javascript code I have in footer.php

<script  src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.flexslider.js"></script>
<script src="<?php bloginfo('template_url');?>/js/owl.carousel.js"></script>
<script>
jQuery(document).ready(function() {
  // The slider being synced must be initialized first
jQuery('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: true,
itemWidth: 210,
slideshowSpeed: 2000,  
itemMargin: 5,
directionNav:false,
direction: 'vertical',
asNavFor: '#slider',
});
 
jQuery('#slider').flexslider({
animation: "slide",
controlNav: true,
animationLoop: true,
slideshowSpeed: 10000,  
directionNav:true,
slideshow: true,
controlsContainer: ".main_slidescroll",
sync: "#carousel",
pauseOnAction: false,
	after: function(slider) {
    /* auto-restart player if paused after action */
    if (!slider.playing) {
      slider.play();
    }
 }
});
	
jQuery(".galleryimg_slider").owlCarousel({
navigation : true, 
singleItem:true,
items : 1,
loop:true,
autoPlay:2000,
afterAction: function(el){
//remove class active
this
.$owlItems
.removeClass('active')

//add class active
this
.$owlItems //owl internal $ object containing items
.eq(this.currentItem )
.addClass('active')    
} 
});
	
jQuery('#carousel li').click(function(){
	jQuery('.galleryimg_slider').trigger('owl.jumpTo', 0)
   
});
[details="Summary"]
This text will be hidden
[/details]

I hope someone can help or steer me in the right direction as it is driving me nuts!

Thanks

2

It… doesn’t seem to be happening for me on your test page. I can’t seem to force it to do anything I would consider out of sync.

What browser are you testing in? Maybe it’s a browser specific issue.

3

Hi

I am using chrome, if you click on one of the links then let it autoscroll it becomes slightly out of sync, where it shows the first image again of the previous section before moving onto the next section.

Very hard to explain!

4

I think it’s because you’re not stopping the timer before you change to the new page (set of slides)? Maybe give it a little bit of delay also?

1 Like
5

Thanks for the response, how would I do that, not sure I fully understand what you are saying?

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.