Loop Carousel horizontaly javascript/jquery

Question

I was wondering if somebody could help me write a loop for this carousel? at the moment the carousel just scrolls to the right every 3 seconds then scrolls back to the left afterwards and resets itself, I would just like it to contiuously loop infinitly so it looks cleaner, could somebody point me in the right direction or help me? i know its simpler but i'm not much of a js developer! (this is for google sites html box otherwise i would have used a jquery plugin)

<style>
 .carousel {
  width: 1080px;
  height: 220px;
  position: relative;
  overflow: hidden;
  background-color:white;
  margin-bottom: 20px;
  margin-top: 20px;
  margin-left: 70px;
 }
 .items {
  width: 1080px;
  position: absolute;
 }
 .items > div {
  font-size: 20px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
 }
 .items > div > img {
  padding: 10px;
 }
 .nav {
  position: absolute;
  bottom: 5px;
  right: 15px;
 }
 .button {
  cursor: pointer;
  font-weight: bold;
  color: #fff;
 }
</style>
<div class="carousel" style="display:none;">
 <div class="items">
  <div>
    <img src="http://i59.tinypic.com/etisye.png" border="0" alt="Alkamai Logo">
  </div>

  <div>
   <img src="http://i59.tinypic.com/ouukxu.png" border="0" alt="AWS Logo">
  </div>
  <div>
    <img src="http://i61.tinypic.com/16k3t43.png" border="0" alt="cover-it-live">
  </div>
  <div>
    <img src="http://i60.tinypic.com/23wljxh.png" border="0" alt="escenic">
  </div>

  <div>
    <img src="http://i58.tinypic.com/sbiqu1.png" border="0" alt="Livefire">
  </div>
  <div>
    <img src="http://i58.tinypic.com/do9wep.jpg" border="0" alt="ooyala">
  </div>
  <div>
    <img src="http://i61.tinypic.com/24werue.png" border="0" alt="varnish">
  </div>
  <div>
    <img src="http://i60.tinypic.com/2ij14rd.png" border="0" alt="wordpress">
  </div>
 </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<script>
 var current_slide = 0; // zero-based
 var slide_count = 4;
 var slide_size = 1080;

 var Direction = {
  LEFT: -1,
  RIGHT: 1
 };

 /**
 * Moves to the next slide using the direction (dx) parameter.
 */
 var nextSlide = function(dx) {
  current_slide = (current_slide + slide_count + dx) % slide_count;

  // Calculate the new value for css 'left' property and animate.
  var left_offset = '-' + (current_slide * slide_size) + 'px';
  $('.items').animate({'left': left_offset}, 1080);
 };

 $('.carousel').show();

 setInterval(function(){
    nextSlide(Direction.RIGHT);
  }, 3000);
</script>

Here's a fiddle for you or anyone else trying to help: jsfiddle.net/techfoobar/dWy9R — techfoobar
– techfoobar, Commented Aug 1, 2014 at 15:11

techfoobar · Accepted Answer · 2014-08-01 17:00:31Z

1

A slight modification to your current script can make it move forward continuously.

The changes are:

current_slide is always 1 (so as to always move forward only)
When we move .items X pixels to the left, we move the corresponding number of items to the end (the number that fits inside X pixels in width)

Updated Demo: http://jsfiddle.net/techfoobar/dWy9R/4/

Code:

var parent = $('.items');

var nextSlide = function (dx) {

    // NOTE: always move forward only
    current_slide = 1; //(current_slide + slide_count + dx) % slide_count;

    // Calculate the new value for css 'left' property and animate.
    var ileft_offset = current_slide * slide_size,
        left_offset = '-' + ileft_offset + 'px',
        iWidth = 0;

    parent.animate({
        'left': left_offset
    }, 'slow', function() { // called when animation is done
        iWidth = parent.find('> div:first').width();
        while(ileft_offset > iWidth) {
            parent.find('> div:first').appendTo(parent);
            ileft_offset -= iWidth;
            parent.css('left', '-' + ileft_offset + 'px');
        }
    });
};

A modified version that doesn't pause in between. Just goes on.

Demo: http://jsfiddle.net/techfoobar/dWy9R/5/

var nextSlide = function () {
    parent.animate({
        'left': '-' + slide_size + 'px'
    }, 4000, 'linear', function() { // called when animation is done
        var ileft_offset = slide_size,
            iWidth = parent.find('> div:first').width();
        while(ileft_offset > iWidth) {
            parent.find('> div:first').appendTo(parent);
            ileft_offset -= iWidth;
            parent.css('left', '-' + ileft_offset + 'px');
            iWidth = parent.find('> div:first').width();
        }
        nextSlide();
    });
};

nextSlide(); // start it off!

edited Aug 1, 2014 at 17:00

answered Aug 1, 2014 at 15:36

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

plimbs Over a year ago

Hey @techfoobar thats awesome, but is there anyway to make it smooth? as in not stop at all and just to continuously flow right?

plimbs Over a year ago

Yeh this is great, but for some reason it breaks googles html box editor in google sites! something must be conflicting but when opening the console it shows no errors. @techfoobar

Collectives™ on Stack Overflow

Loop Carousel horizontaly javascript/jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related