CODEWITHSUNDEEP
jquerycyclejquery-cycle
mariobros
mariobros

Reputation: 899

jQuery Cycle2 multiple slideshow nav

I need to work the first slider with a navigation and the second automatically but click on the navigation buttons run both sliders. Code here:

<script type="text/javascript">
jQuery(function(){
  jQuery('.scrollsingle').cycle('prev');
  jQuery('.scrollsingle ').cycle('next');
});
</script>

<button data-cycle-cmd="prev">Prev</button>
<button data-cycle-cmd="next">Next</button>

<div class="images scrollsingle cycle-slideshow" 
    data-cycle-fx="scrollHorz" 
    data-cycle-timeout="4000"
    data-cycle-slides="> div">

   <div>content</div>
   <div>content</div>
   <div>content</div>
   <div>content</div>
</div>

<article class="span3 box boxstaff cycle-slideshow" 
    data-cycle-fx="scrollHorz" 
    data-cycle-timeout="2000"
    data-cycle-slides="> div"
    >

   <div>content</div>
   <div>content</div>
   <div>content</div>
   <div>content</div>
</article>

Upvotes: 1

Views: 2938

Answers (1)

Gabriel Pereira
Gabriel Pereira

Reputation: 53

When you declare a class with the name 'cycle-slideshow', you're auto initializing your slideshow and this will treat all containers with that class the same way, like any other class would. What you need to do is manually initialize your slideshow by declaring a different class like this:

<div class="slide1">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
    <img src="image4.jpg">
</div>

<div class="slide2">
    <img src="image5.jpg">
    <img src="image6.jpg">
    <img src="image7.jpg">
    <img src="image8.jpg">
</div>

Then your JQuery code must have these simple lines before you manipulate anything under your custom class for the slidesow:

//Initialize slide1
$('.slide1').cycle();

//Initialize slide2
$('.slide2').cycle();

After that you can do everything as you would normally do with the cycle-slideshow... Hope that helps you!

Ex:

$('.slide1').cycle('goto', 4);

Upvotes: 1

Related Questions