CODEWITHSUNDEEP
javascriptjquery
naveen
naveen

Reputation: 937

how to show image circularly in jquery?

I implemented image slider using jquery .But it is not circularly .It mean currently it show 1->2->3..->8 then back to zero margin. it not look good. how i will append after last element 1->2->3..->8->1->2-3 so that it will look good.

here is my code

$(function(){
  var counter =0
  var len =$('.imageSlilder ul li').length;
    setInterval(function(){
      $('.imageSlilder ul').css('margin-left',-325*counter+'px')

    counter++;
       if(counter>=len){
                    counter =0
                }
    },2000)
})

https://jsbin.com/zizegixoha/edit?html,css,js,output

Upvotes: 1

Views: 54

Answers (2)

Jonas Wilms
Jonas Wilms

Reputation: 138277

Add the first image at the last position also, then simply reset the position to 0 without a transition:

 if(counter>=len+1){
      $('.imageSlilder ul').css({
        'margin-left':'0px',
        transition:'margin-left 0s'
     })
  counter=1
  }

to reinit the transition, may set it back:

$('.imageSlilder ul').css({
   'margin-left':-325*counter+'px',
   transition:'margin-left 1s'
  })

current approach, needs some optimizations to run smooth:

https://jsbin.com/qaruwadiwi/1/edit?js

Upvotes: 1

Andrés P
Andrés P

Reputation: 1

I think that a better approach than using margins is to make a copy of the first item to the last position and then remove it from its former place, so you'll have your infinite slider.

For a softer animation, you could reduce the width of the image before removal.

$(function(){
    setInterval(function(){
        var first = $('.imageSlilder ul').children().first(); // item to move
        $('.imageSlilder ul').append(first.clone()); // CLONE it at the end
        first.animate( {width: 0}, 500, function() { // reduce width to 0
            first.remove(); // on completion of the animation, remove item
        });
    },2000)
});

Here you have it working: https://jsbin.com/malehufifu/1/edit?html,css,js,output

Upvotes: 0

Related Questions