Slider inside another slider with slidesjs

Question

I'm trying to put a slider with controls inside of another slider with controls using SlidesJS, meanwhile I did this:

JS:

$(function() {
  $('#slides').slidesjs({
    width: 600,
    height: 300,
    callback: {
      loaded: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS: Loaded with slide #' + number);

        // Show start slide in log
        $('#slidesjs-log .slidesjs-slide-number').text(number);
      },
      start: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS: Start Animation on slide #' + number);
      },
      complete: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS: Animation Complete. Current slide is #' + number);

        // Change slide number on animation complete
        $('#slidesjs-log .slidesjs-slide-number').text(number);
      }
    }
  });
});

$(function() {
  $('#slides2').slidesjs({
    width: 500,
    height: 175,
    callback: {
      loaded: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS: Loaded with slide #' + number);

        // Show start slide in log
        $('#slidesjs-log2 .slidesjs-slide-number2').text(number);
      },
      start: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS: Start Animation on slide #' + number);
      },
      complete: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS: Animation Complete. Current slide is #' + number);

        // Change slide number on animation complete
        $('#slidesjs-log2 .slidesjs-slide-number2').text(number);
      }
    }
  });
});

HTML:


    
      

   
      
        
      
      
        
      
      
        
      
      
        
      
    
Slide 1 of 4
      

      
        
      
      
        
      
      
        
      
    
Slide 1 of 4

But I have a bug when you change the slide from the inside slider and then change the slide from the external slider, because when you come back to see the internal slider, it is all blank, but when you try change the slide from the internal slider you can see that is was in the correct slide, but just wasnt showing it.

Can anyone help me correct this bug?

Alvaro Montoro · Accepted Answer

Why you are getting this error

This is not a bug in your code or in the plugin. It is the actual way in which SlidesJS was designed/developed that doesn't support nested sliders. If you look at the plugin's code, it's using the children() function to detect all the slides within that particular slider in order to hide them, and keep only the active one visible.

This works great in regular sliders, but you have an slider (#slides2) inside another slider (#slides) like this (I named the slides to explain something later):

- SLIDER #slides
    - Slide 1
         - SLIDER #slides2
             - Slide A
             - Slide B
             - Slide C
             - Slide D
    - Slide 2
         - Content of slide 2
    - Slide 3
         - Content of slide 3
    - Slide 4
         - Content of slide 4

When you click on slide A, the plugin shows slide A, and hides slide B, C, and D. When you click on slide 1, the plugin shows slide 1, and hides 2, 3, and 4... but also A, B, C, and D! This is because the plugin uses children() to get the slides inside the slider control.

When you slide in #slides2, the only slides affected are the ones that are children of #slides2: A, B, C, and D. But when you slide in #slides you affect ALL the slides children of it, and that includes the slides under #slides2 too: 1, A, B, C, D, 2, 3, and 4.

As you can see, that's the expected behavior the way the plugin was designed/developed.

How to "fix" this behavior

There is a way of fixing this effect, and it may not be too pretty. The idea is to show the inner slider slide, when the containing outer slider slide is selected (yes, a bit confusing, but not so complicated if you see it in code):

// this code would go in the completed section of the parent slider
// we use 1, because the slide 1 contains the inner slider
if (number == 1) { 
    // show the first slide of the inner slider
    $("#slides2 .slidesjs-slide:first-child").css("display", "block");
}

And as an image is worth 1,000 words, here is a demo with your code:

$(function() {
  $('#slides').slidesjs({
    width: 600,
    height: 400,
    callback: {
      loaded: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS: Loaded with slide #' + number);

        // Show start slide in log
        $('#slidesjs-log .slidesjs-slide-number').text(number);
      },
      start: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS: Start Animation on slide #' + number);
      },
      complete: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS: Animation Complete. Current slide is #' + number);
         
         
        // FIX
        // if the first slide is selected in the outer slider, show the inner slider
        if (number == 1) { $("#slides2 .slidesjs-slide:first-child").css("display", "block"); }
        
          
         
        // Change slide number on animation complete
        $('#slidesjs-log .slidesjs-slide-number').text(number);
      }
    }
  });
});

$(function() {
  $('#slides2').slidesjs({
    width: 500,
    height: 175,
    callback: {
      loaded: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS2: Loaded with slide #' + number);

        // Show start slide in log
        $('#slidesjs-log2 .slidesjs-slide-number2').text(number);
      },
      start: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS2: Start Animation on slide #' + number);
      },
      complete: function(number) {
        // Use your browser console to view log
        console.log('SlidesJS2: Animation Complete. Current slide is #' + number);

        // Change slide number on animation complete
        $('#slidesjs-log2 .slidesjs-slide-number2').text(number);
      }
    }
  });
});

/* Prevent the slideshow from flashing on load */
#slides {
  display: none
}

#slides2 {
  display: none;
  border: 1px solid black;;
}

/* Center the slideshow */
.container {
  margin: 0 auto
}

/* Show active item in the pagination */
.slidesjs-pagination .active {
  color:red;
}

/* Media quires for a responsive layout */

/* For tablets & smart phones */
@media (max-width: 767px) {
  body {
    padding-left: 10px;
    padding-right: 10px;
  }
  .container {
    width: auto
  }
}

/* For smartphones */
@media (max-width: 480px) {
  .container {
    width: auto
  }
}

/* For smaller displays like laptops */
@media (min-width: 768px) and (max-width: 979px) {
  .container {
    width: 724px
  }
}

/* For larger displays */
@media (min-width: 1200px) {
  .container {
    width: auto
  }
}





  
    

      
        
          
        
        
          
        
        
          
        
        
          
        
      
      Slide 1 of 4
    

    
      
    
    
      
    
    
      
    
  
  Slide 1 of 4

You can see it also on this JSFiddle: http://jsfiddle.net/3pqvpk8p/9/

The problem with this approach is that the inner slider will be hidden until the animation in the outer slider is completed, so it will create a "flash" effect.

Slider inside another slider with slidesjs

Answers (1)

Related Questions