How can I add panels to an existing carousel?

Question

For one of my client's brochure websites, I am using the Bootstrap carousel. The carousel has 6 panels, each displaying a fairly large image.

To speed initial load time, I'm toying with the idea of only including two panels in the page's source, and somehow using JavaScript to append additional panels after the page is loaded to the DOM. That is, I want to lazy load additional panels to the carousel; hopefully they'll be in place before the carousel needs to display them (my carousel is set to change panels every 4 seconds, so two initial panels gives me 8 seconds to append a third panel).

HTML:

<div id="home_pictures" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <img src="img/carousel_wellness.jpg" alt="Wellness: Comprehensive approaches for your individual needs" />
            <div class="container">
                <div class="carousel-caption">
                    <h2>Wellness</h2>
                    <p class="lead">Comprehensive approaches for your individual needs</p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="img/carousel_psychotherapy.jpg" alt="Psychotherapy: Increase your sense of your own well-being" />
            <div class="container">
                <div class="carousel-caption">
                    <h2>Psychotherapy</h2>
                    <p class="lead">Increase your sense of your own well-being</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#home_pictures" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#home_pictures" data-slide="next">&rsaquo;</a>
</div>

score 0 · Accepted Answer · edited May 23 '17 at 12:03

This JavaScript, which uses JSON for lightweight object definition and jQuery to append the panels, seems to do the trick nicely:

$(document).ready(function() {
    if( $html_js.find('#home_pictures').length ) {
        var $carousel_inner=$('div.carousel-inner'),
            carousel_panels = [{
                "title"   : "Massage",
                "img_src" : "carousel_massage.jpg", 
                "description": "Promote healing, relaxation and well-being"
            },
            {
                "title"   : "Nutritional Therapy",
                "img_src" : "carousel_nutrition.jpg", 
                "description": "Change behaviors, eat well, feel well"
            },
            {
                "title"   : "Reiki",
                "img_src" : "carousel_reiki.jpg", 
                "description": "Facilitate self-healing and equilibrium"
            },
            {
                "title"   : "Chiropractic Treatment",
                "img_src" : "carousel_chiropractic.jpg", 
                "description": "Adjustments to realign pain away"
            }];

        for(var i = 0; i < carousel_panels.length; i++) {
            var panel = carousel_panels[i];
            $carousel_inner.append( '<div class="item"><img src="img/'+panel.img_src+'" alt="'+panel.title+': '+panel.description+'" /><div class="container"><div class="carousel-caption"><h2>'+panel.title+'</h2><p class="lead">'+panel.description+'</p></div></div></div>' );
        }
    };

});

The finished result is available at http://fallschurchwellness.com/

This solution applies the answer for "JavaScript loop through json array?"

How can I add panels to an existing carousel?

1 Answers1