Bootstrap 3 Carousel: Displaying set of Images as per button choice

Question

This is what I am trying to achieve: I have 3 category of images with different no. of images in each category: Category 1 (5 Images), Category 2 (3 Images) and Category 3 (4 Images).

The images displayed in the Carousel should follow the order: if Button 1 is pressed it gets active and displays all the images of Category 1, if Button 2 then the slider displays the 3 images of Category 2 and the 4 images of Category 3 on pressing button 3. Is it possible through Bootstrap Carousel as I do not want to look for another slider for this purpose.

Answer 1

So, here is my implementation to solve your problem:

http://jsbin.com/qemiki/7/edit

How it works?

• The plugin exposes 2 classes: SlideByCategory and DynamicCarousel
• DynamicCarousel, in short terms, creates the slideshow from something like this:

{
  'id': '#category_b',
  'slides': [{
    img: 'http://themes.themolitor.com/wpbm/files/2011/05/tumblr_mrraevBLsP1st5lhmo1_12801-280x170.jpg',
    title: 'Foo Category B',
    desc: 'My lorem Foo'
  }, {
    img: 'http://themes.themolitor.com/wpbm/files/2011/05/16Gz2hU-280x170.jpg'
  }, {
    img: 'http://themes.themolitor.com/wpbm/files/2011/05/1eRBRVa-280x170.jpg',
    title: 'Bar Category B',
    desc: 'My lorem Bar desc'
  }]
}

The SlideByCategory, which depends on the previous one, accepts an array of categories, with similar structure.