amith kumar n r amith kumar n r - 5 months ago 66
Javascript Question

bootstrap thumbnail single image slider for small images (or for more number of images)

http://bootsnipp.com/snippets/featured/thumbnail-carousel-single-image-sliding

I am working on above link. It is fine only for 3 images. But if I need more than 3 images to display, that too

col-md-2
images I am getting BLANK space. It is displaying only 3 images.

This is because I need to change javascript, let me the solution for the above question.

you can have a look at this image, i have changed div size to col-2

Answer

You can change in javaScript like this:

    $(document).ready(function () {
    $('#myCarousel').carousel({
        interval: 10000
    })
    $('.fdi-Carousel .item').each(function () {
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));

        if (next.next().length > 0) {
            next.next().children(':first-child').clone().appendTo($(this));
        }
        else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }

         if (next.next().next().length > 0) {
            next.next().next().children(':first-child').clone().appendTo($(this));
        }
        else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }
         if (next.next().next().next().length > 0) {
            next.next().next().next().children(':first-child').clone().appendTo($(this));
        }
        else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }
    });
});

This will work for 5 images. If you want it for more than 5 images like 6 then add one more if-else condition.

if (next.next().next().next().next().length > 0) {
        next.next().next().next().next().children(':first-child').clone().appendTo($(this));
    }
    else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }

Because it calculate the length of its siblings.

This is working code for 6 images with div size col-md-2