Bootstrap: unable to put carousel inside carousel

[amolv]

I wanted to use carousel inside another carousel, but its not working.

[mdo]

Yeah... don't do that. Would be a bad experience all around.

[aaroneiche]

Is that a valid reason to close an issue: "It would be a bad experience" ? Whether or not that would be problematic experience-wise I don't think is really relevant. Can you provide a little more feedback as to why this isn't worth pursuing? I have a project that I was implementing nested carousels and I believe it was a good fit.

[uniquelau]

Hello,

This is something I am looking to achieve as well.

As people who do software, it's all about the implementation and use.

Anyway, this is my real world use.

A webpage that shows four services using a standard carousel. The user can read about each service and it comes with a background image. Pretty basic stuff.

Now all I want to do, is make each service have 4 background images.

A carousel, inside a carousel! ;)

(think each service, 100% page width, big and beautiful!)

If that makes no sense, let me know and I'll draw a picture/post some code.

Laurie

[uniquelau]

I _think_ this could be achieved, by adjusting the way the script sets/removes 'active'. If it only set on items at the same level in the tree then it wouldn't break the nested carousel.

Then the only other fix required, would be finding a way to set options on the nested carousel. As currently these are inherited from the parent.

[uniquelau]

Okay, so after doing a little bit of playing around. I though, I'd do things a little different. I'd use the same principle of the carousel, and use the presence of an 'active' class, to display the image. The CSS is essentially the same, etc.

All the script does, is get the index of the thumbnail images, and then set the active class on the image. This script doesn't use any of the bootstrap carousel functionality.

Anyway! Sharing is caring, once the site is live, I'll post the URL.

$('.thumbnail.carousel-control img').click(function(){

    var index = $(this).index();

    if ($(this).hasClass('active')) {
        // do nothing
    }
    else 
    {
        $(this).parent().children().removeClass('active');
        $(this).addClass('active');     
                // go up the tree, and select the div.static that contains a bunch of images.
        $(this).parent().parent().children('.static').children('img').removeClass('active');
        $(this).parent().parent().children('.static').children('img').eq(index).addClass('active');

    }
    return false;

});

[magnattic-agency]

Well I have found a reason to require a carousel within a carousel. Ideal for mobile views.
Uniquelau was onto it when he said that all you need to is adjust the script for the reset of active items.
The problem is the find('.item.active') statements on the elements var. Because find will reset all the way down the DOM.
It looks like the sliders is indexed in relation to the .active.item. To select it more directly, replace find('.item.active') with .children().children('.item.active') on the getActiveIndex: function and on the slide: function.
Or line 50 and 96 on bootstrap-carousel.js v2.3.1

[uniquelau]

Gosh, was that 6 months ago! DNS changes happen on Monday, so I'll be able to post that URL soon! Thanks for updating the thread will a better solution +1: will update that code before it goes live! Lau

[uniquelau]

Something which has troubled me a little is...

It would be nice to load the Parent Carousel on-page load, but then lazy load the child items after the initial hit. Working on a site which has 4 parents, 4 children (12 images) even with very compressed images, that first hit page weight is too high and I know in my heart, it should be addressed.

[magnattic-agency]

True, won't lazyload do the trick for that?
Also, if your using carousel-indicator. I had to add this in scripts to make it work.

// Carousel within Carousel hack
$('#servSlider').bind('slid', function() {

// natively li:first will not be set active
if (!$('.carousel-indicators li').hasClass('active')) {
    $('.carousel-indicators li:first-child').addClass('active');
}   

});

[ravisuhag]

@beormalte ..Thanks man.. you saved my day :)

[magnattic-agency]

Hi, do you have a link so I can look at it?

On Sat, Mar 9, 2013 at 2:39 PM, Ravi Suhag [email protected] wrote:

hi beormalte .. i am using nested carousel. using carousel indicator on
parent as navigation. and one of the slide contains child carousel . so
when i click first time it is not showing the slide. then on clicking the
arrow button for next slide in child carousel work well. need help.

—
Reply to this email directly or view it on GitHubhttps://github.com/twitter/bootstrap/issues/4359#issuecomment-14663096
.

[uniquelau]

My solution to lazy loading was to only load the first image in each carousel. For the other images (n>1) load the src into a data property, set src to null and then use the following code to load these images in once the carousel 'slids'.

$('#my-carousel').on('slid', function() {
 $img = $(".active .static img[data-lazy-src]", this)
 $img.each(function() {
  $(this).attr("src", $(this).data('lazy-src'))
  });
});

[uniquelau]

URL as promised -> http://premierparkstudios.co.uk/ would love to wire up some sort of hashbang navigation for the carousel, but budgets apply >.<

[magnattic-agency]

very nice indeed mate :-) Awesome design! What about the mobile views tho?

[uniquelau]

Thanks :+1: That's the next phase, I'd like to write a new template for mobile / small screen / _low bandwidth_ devices that gets served initially, just containing basic Map + Contact details, with a switch that gives access to an updated responsive site.

[ludoblues]

I have made a small change in the source code which seems to work fine.

On all your html carousel add a data-item=".item" (and change the value for each nested carousel).

On the Carousel constructor add this line:
this.item = this.$element.data('item');

Then, replace all the ".item" jquery calls by "this.item" in the js.

Don't forget to update the CSS according to your new items classes.

Thanks to tell me if you meet issues with this.

[ttseng]

I know this thread is old, but @uniquelau, can you share how you were able to get the nested carousels to work on your site?

[magnattic-agency]

I changed a few things around the the carousel.js It uses find() and I
replaced it with children or something. Even so, there were small bugs
left, which I can't remember specifically. I ended up going with a
different concept all together. I would suggest you make your own CSS
slider and avoid nesting it. Or use swipe.js or something similar with the
carousel inside. Thats probably the easiest option.

On Thu, Jul 18, 2013 at 1:28 AM, ttseng [email protected] wrote:

I know this thread is old, but @uniquelau https://github.com/uniquelau,
can you share how you were able to get the nested carousels to work on your
site?

—
Reply to this email directly or view it on GitHubhttps://github.com/twitter/bootstrap/issues/4359#issuecomment-21152864
.

[ttseng]

ok, thanks for the advice!

[uniquelau]

The code in the posts above is how I got it working,

http://premierparkstudios.co.uk/scripts/studio/studio.js

Lines 33 -> 52

Everything you should need is in this thread :-)

[vikramjeetsingh41]

var $active = this.$element.find(' > .carousel-inner > .item.active') will solve the problem and we will use nested carousels