Twitter Bootstrap 2 carousel - display a set of thumbnails at a time like jcarousel

Question

I would appreciate it if anyone can advice on how to modify Twitter Bootstrap 2 carousel in order to display a set of thumbnails at a time similar to this jquery plugin (jca

Answer 1

Currently there is no support for such an option on the Bootstrap Carousel and i wouldn't recommend you hack away at the script since that amounts to basically creating a new one, and when updated come around you might lose support but there are other ways that you can fake such a setup by using the .thumbnails group that the bootstrap carries. You will just be limited to always giving the slider container a width, or a span class, like so:

HTML

  

        

            

                

                    
                
            
            

                

                    
                
            
            

                

                    
                
            
            

                

                    
                
            
        
  
  

        

            

                

                    
                
            
            

                

                    
                
            
            

                

                    
                
            
            

                

                    
                
            
        
  
  

        

            

                

                    
                
            
            

                

                    
                
            
            

                

                    
                
            
            

                

                    
                
            
        
  

‹
›

Demo, edit here.

As you can see i nested a thumbnail group inside the item divs that the carousel slides, this way you can have a group of images slide and there is no need to modify the original script.

Note ^*: Updated demo with multiple image sizes inside the carousel.