How to load images dynamically using jquery into any carousel?

Question

I wrote code my self

here it is

I wrote myself where I'm appending the image url dynamically to .pgwslider class . '

function carouselImgaeData() {
    var image_array = image_list.split("|");
          for (var i = 0, len = image_array.length; i < len; i++) {
            var image1 = image_array[0].replace(/ /g, "");
            image_url = image1.replace(/[\\]/g, '/');
             //Dynamically Appending images to the class .pgwSlider 
            $('.pgwSlider').append('<li><img width="420" height="300" src="' + image_url + '"  ></li>');

    };
}'

Possible duplicate of [jQuery dynamic image loading](http://stackoverflow.com/questions/18518758/jquery-dynamic-image-loading) — Mukesh Kalgude, Oct 01 '15 at 05:24

score 0 · Accepted Answer · edited May 23 '17 at 11:53

Assuming you have the following markup in your HTML:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="img_chania.jpg" alt="Chania">
        </div>

        <div class="item">
            <img src="img_chania2.jpg" alt="Chania">
        </div>

        <div class="item">
            <img src="img_flower.jpg" alt="Flower">
        </div>

        <div class="item">
            <img src="img_flower2.jpg" alt="Flower">
        </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

You will want to delete the items inside the div class "carousel-inner", so the wrapper for slides would look like this:

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <!-- Items will be created dynamically here -->         
    </div>

Now go to your JS file, (which I assume is working and you have already JQuery set and with the html(''), append(''), or prepend('') methods you can add text like this:

$(document).on('load', function(){
//it can also be $(window) 
    $('.carousel-inner').html('<div class="item"><img src="img_chania2.jpg" alt="Chania"></div>');
});

more info: window.onload VS document.onload

There are lots of ways of doing it while you are coding in JQuery (loops, function nesting, etc), that is up to you.

Also there are several things to take into consideration when wanting to load dynamic HTML, the first and most important is the SEO being affected by this, so taking that into consideration, google bots will crawl your HTML mark-up when it first loads, so if google bots doesn't find any link or elements (images in this case) for SEO search engines, then google will not recognize much information.

More info at: https://www.google.com/webmasters/

thanks mate, it worked ! for multiple images I wrote for loop. — code0789, Oct 01 '15 at 02:06
in addition to answer, _I wrote myself a code where I'm appending the image url dynamically to .pgwslider class _ . `function carouselImgaeData() { var image_array = image_list.split("|"); for (var i = 0, len = image_array.length; i < len; i++) { var image1 = image_array[0].replace(/ /g, ""); image_url = image1.replace(/[\\]/g, '/'); //Dynamically Appending images to the class .pgwSlider $('.pgwSlider').append('

How to load images dynamically using jquery into any carousel?

1 Answers1