Show Download

In this post we will see how to create an automatic and infinite Carousel with jQuery and a little CSS like the one placed in the header of this post as a promotional image.

Defining the HTML structure of the infinite carousel

We first define the structure of the infinite carousel using the following HTML:

<ul id="c"> 
	<li><p><strong>1</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>2</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>3</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>4</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
 
	<li><p><strong>5</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>6</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>7</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>8</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li> 
 
	<li><p><strong>9</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>10</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>11</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>12</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li> 
</ul>

Defining the critical style of the infinite carousel

We define the CSS of the ul to center the carousel:

body > ul {
	position: absolute;
	top: 50%;
	width: 800px;
	height: 200px; 
	left: 50%;
	margin-left: -400px;
	margin-top: -130px;
}

4 items will be shown at a time and hence the width with 25% for each of the items:

ul > li {
    width: 25%;
    list-style-type: none;
    position: absolute;
    top: 0;
    padding: 20px;
    height: 200px; 
    opacity: 0;
    padding-top: 40px;
    text-align: center;
    transition: 1s opacity; 
}

The rest of the CSS for decorative purposes for our infinite carousel can be found in the source code that you can download at the end and beginning of this entry.

The following JavaScript code with jQuery allows you to restart the carousel once it has reached its end and hence the infinite and automatic:

if (i < max - 4) {
    i = i + 4;
} else {
    i = 0;
}

In the experiment there are 12 items to show that are hidden by default. If we see the entire JavaScript code we will first see that there is a block of code that is only executed once that is responsible for activating the first 4 automatically without the need to wait the two seconds and this is because they are the first elements of the list to be displayed:

$("#c > li").eq(i).addClass('active').css('left', '0');
$("#c > li").eq(i + 1).addClass('active').css('left', '25%');
$("#c > li").eq(i + 2).addClass('active').css('left', '50%');
$("#c > li").eq(i + 3).addClass('active').css('left', '75%');

The rest of the JavaScript is executed through a setInterval method consecutively every two seconds and infinity and is responsible for processing two list blocks at a time, adding transitions to each of the defined group of 4 lists:

$("#c > li").eq(i).css('transition-delay', '0.25s');
$("#c > li").eq(i + 1).css('transition-delay', '0.5s');
$("#c > li").eq(i + 2).css('transition-delay', '0.75s');
$("#c > li").eq(i + 3).css('transition-delay', '1s');
 
...
 
$("#c > li").eq(i).css('left', '0').addClass('active').css('transition-delay', '1.25s');
$("#c > li").eq(i + 1).css('left', '25%').addClass('active').css('transition-delay', '1.5s');
$("#c > li").eq(i + 2).css('left', '50%').addClass('active').css('transition-delay', '1.75s');
$("#c > li").eq(i + 3).css('left', '75%').addClass('active').css('transition-delay', '2s');

As you can see, a delay is established for each of the items to be shown so that they are progressively hidden.

The counter is also reset because there are 4 items to be displayed at a time and in this way avoid overflowing the array:

if (i < max-4) {
        i = i+4; 
} else { 
        i = 0; 
}  

The original experiment can be found at the following link: Infinite Automatic Carousel.

Show Download