I want to create image gallery with infinite loop using jquery

Question

I want to create an image gallery, I wrote for a slideshow, but I don't know how to code for the previous and next buttons. These should work like an infinite loop (last image jumps back to the first).

How should I get started? This is what I have so far:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#play").click(function () {
        $("#img1").fadeOut(2000);
        $("#img2").fadeIn();
        $("#img2").fadeOut(4000);
        $("#img3").fadeIn();
    });
});
</script>
<body>
<div id=outer>
    <div id=inner>
        <img id="img1" src="img1.jpg"/>
        <img id="img2" src="img2.jpg" style="display:none"/>
        <img id="img3" src="img3.jpg" style="display:none"/>
    </div>
    <div id=button>
        <button id="bwd"><<</button>
        <button id="play"><></button>
        <button id="fwd">>></button>
    </div>
</div>
</body>

My advice, ditch the ids, start fresh but with common classes this time. — elclanrs, Jun 14 '13 at 05:47
Try this one, has a good layout also http://zurb.com/playground/jquery_image_slider_plugin — Swapneel Kondgule, Jun 14 '13 at 05:57

score 1 · Answer 1 · edited May 23 '17 at 12:32

1

You can use setInterval() . This link can help you to understand much more

Call function with setInterval in jQuery?

may be this can help you too :

http://jquery.malsup.com/cycle/

edited May 23 '17 at 12:32

Community

1
1

answered Jun 14 '13 at 05:59

Hadi Rasouli

1,871
3
27
43

Daniel Nill · Answer 2 · 2013-06-14T06:23:38.397

you're going to want to use the javascript timing function. Something like:

$('#play').click(function(){
  window.setInterval(function(){
    if($('#img1').is(:visible)){
      $("#img2").show()
      $("#img1").hide()
    }
    if($('#img2').is(:visible)){
      $('#img3').show()
      $('#img2').hide()
    }
    if($('#img3').is(:visible)){
      $('#img1').show()
      $('#img3').hide()
    }
  }, 1000);
});

You can also condense this logic down, but this gets you the basic idea. Then if you look carefully the functions for next is already in the code and it can be extracted out and reuses. Once you have the next function it's pretty straight forward that the back function will be the exact opposite.

To answer your question below you can change the img's to have the same class and then apply show and hide based on which one is visible and the image immediately after the visible one:

#find the one currently being shown
$(".images:visible")

#find the one after the visible one
$(".images:visible").next()

#keep an id on the last image so that you can do something like
if($('.images:visible') == $('#last_image')){
    $('.images').first().show()
}

what should i do,if i have more than 20 images ?If i write like this it take so much of time.. — user2482141, Jun 14 '13 at 06:04

Neeraj Dubey · Answer 3 · 2017-05-23T15:53:00.100

Hi i have created Carousel without using any third party plugin.If you want please refer.Reference Link

Js Code is.

 $(document).ready(function () {
    var currentPosition = 0;
    var slideWidth = 300;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var timer = 3000;
    var img1, img2;
    var sliderLink = $("#slider a");
    var direction = 1;
    // Remove scrollbar in JS
    $('#slidesContainer').css('overflow', 'hidden');

    // Wrap all .slides with #slideInner // Float left to display horizontally, readjust .slides width
    slides.wrapAll('<div id="slideInner"></div>').css({
        'float': 'left',
        'width': slideWidth
    });

    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', slideWidth * numberOfSlides);

    // Insert left and right arrow controls in the DOM
    $('#slideshow').prepend('<span class="control" id="leftControl">Move left</span>').append('<span class="control" id="rightControl">Move right</span>');

    // Hide left arrow control on first load
    // manageControls(currentPosition);
    // manageSlide();
    // Create event listeners for .controls clicks
    $('#rightControl').bind('click', rightControl);
    $('#leftControl').bind('click', leftControl);
    function leftControl() {
        var butonid = 0;
        direction = 0;
        $("#slideInner").stop();
        $("#slideInner").dequeue();
        $('#timer').stop();
        $('#timer').dequeue();
        $('#leftControl').unbind('click');

        manageSlide(0, direction);
        setTimeout(function () {

            $('#leftControl').bind('click', leftControl);
        }, timer, null);


    }
    function rightControl() {
        var butonid = 1;
        direction = 1;
        $("#slideInner").stop();
        $("#slideInner").dequeue();
        $('#timer').stop();
        $('#timer').dequeue();
        $('#rightControl').unbind('click');

        manageSlide(0, direction);
        setTimeout(function () {

            $('#rightControl').bind('click', rightControl);
        }, timer, null);

    }

    var slideIndex = 0;
    var data = $("#slideInner .slide").toArray();
    $("#slideInner").empty();
    function manageSlide(auto, idButtonid) {

        $("#slideInner").empty();


        // console.log(slideIndex);

        if (idButtonid == 0) {

            $("#slideInner").css({ 'marginLeft': "-300px" });
            $(data).each(function (index) {
                //                        if (index == slideIndex - 1) {
                //                            $(this).show();
                //                        } else {
                $(this).hide();
                // }
            });
            $(data[slideIndex - 1]).show();
            if (slideIndex == numberOfSlides - 1) {
                slideIndex = 0;
                img1 = data[0];
                img2 = data[numberOfSlides - 1];

                $("#slideInner").append(img1);
                $("#slideInner").append(img2);
                $(img2).show();
                $(img1).show();

            } else {
                img1 = data[slideIndex];
                img2 = data[slideIndex + 1];
                $("#slideInner").append(img2);
                $("#slideInner").append(img1);

                $(img1).show();
                $(img2).show();
                slideIndex = slideIndex + 1;
            }



            $('#slideInner').animate({
                'marginLeft': "0px"
            }, 'slow', function () {
                $('#timer').animate({
                    opacity: 1
                }, timer, function () {
                    console.log('leftControl');
                    manageSlide(1, direction);
                });

            });
        }

        // right move here
        else if (idButtonid == 1) {
            $("#slideInner").css({ 'marginLeft': "0px" });
            $(data).each(function (index) {
                if (index == slideIndex + 1) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
            if (slideIndex == numberOfSlides - 1) {
                slideIndex = 0;
                img1 = data[0];
                img2 = data[numberOfSlides - 1];
                $("#slideInner").append(img2);
                $("#slideInner").append(img1);
                $(img2).show();
                $(img1).show();

            } else {
                img1 = data[slideIndex];
                img2 = data[slideIndex + 1];
                $("#slideInner").append(img1);
                $("#slideInner").append(img2);
                $(img1).show();
                $(img2).show();
                slideIndex = slideIndex + 1;
            }

            $('#slideInner').animate({
                'marginLeft': slideWidth * (-1)
            }, 'slow', function () {
                console.log('rightControl');
                $('#timer').animate({
                    opacity: 1
                }, timer, function () {
                    manageSlide(1, direction);
                });

            });
        }


        if (auto == 1) {


            sliderLink.each(function () {
                $(this).removeClass();
                if ($(this).text() == (slideIndex + 1)) {

                    $(this).addClass('active');
                }

            });
        }
        auto = 1;

    }



    $("#slider a").click(function () {

        sliderLink.each(function () {
            $(this).removeClass();
        });
        slideIndex = $(this).addClass('active').text() - 1;
        $('#timer').stop();
        $('#timer').dequeue();
        $("#slideInner").stop();
        $("#slideInner").dequeue();
        manageSlide(0, direction);
    });

    manageSlide(1, direction);
});

Demo Link

Hope it helps you.

@Apuleius I have updated for you,Please have a look. – Neeraj Dubey May 23 '17 at 15:53 — Neeraj Dubey, May 23 '17 at 15:53

I want to create image gallery with infinite loop using jquery

3 Answers3