Home » Tutorials

Content slider with jCarousel

Tutorials
Author Reading 26 min Views 97 Published by Modified by

Today we are going to develop a nice content slider with jCarousel. It is possible that you have already seen similar sliders before, and were looking forward to repeat it. Our slider consists of next elements: initial intro block, control buttons to navigate through the slides, slides itself, and carousel with images (thumbnails) in the bottom. Plus, we can see all the slides one after the other (in alternative layout). This slider works very well in all the most popular browsers (Chrome, Firefox, IE7-9 etc).

Contents
  1. Step 1. HTML
  2. Step 2. CSS
  3. css/main.css
  4. Step 3. JS
  5. js/main.js
  6. Conclusion
Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, let’s download the source files and start coding !

Step 1. HTML

In the beginning we have to add all the necessary scripts and styles in header section:

1 <!-- add styles -->
2 <link href="css/main.css" rel="stylesheet" type="text/css" />
3 <!-- add scripts -->
4 <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
5 <script src="js/jquery.jcarousel.min.js"></script>
6 <script src="js/main.js"></script>

There are three javascript files: jQuery library, jCarousel library and our own custom script. As I mentioned before, we are going to use intro block, here is it:

1 <!-- Content slider - intro section -->
2 <div class="sl-intro">
3     <img class="intro-img" alt="Intro" src="images/1.jpg" />
4     <p>'<a rel="nofollow" target="_blank" href="http://www.flickr.com/photos/infinite-systems/galleries/72157623200762669/">I wish I had Taken That</a>' gallery by Little_Debbie</p>
5     <br />
6     <a href="javascript:void(0)" class="sl-start">Look all the photos</a>
7 </div>

Basically, this is simple DIV block with an image and text inside. For our slider I selected nice photo gallery by Little_Debbie (from flickr). After the intro section, there is main section:

001 <!-- Content slider - main section -->
002 <div class="sl-main" style="display:none">
003     <!-- Controls -->
004     <div class="sl-controls">
005         <a class="next"></a>
006         <div id="count"></div>
007         <a class="prev"></a>
008         <a class="back-home"></a>
009     </div>
010     <!-- Content -->
011     <div class="sl-content">
012         <div class="sl-slide">
013             <h2 class="sl-title">Just Hidden</h2>
014             <p><img src="images/1.jpg" /> 'Just Hidden' image description</p>
015         </div>
016         <div class="sl-slide">
017             <h2 class="sl-title">Come sit awhile...</h2>
018             <p><img src="images/2.jpg" /> 'Come sit awhile... image description</p>
019         </div>
020         <div class="sl-slide">
021             <h2 class="sl-title">escapando</h2>
022             <p><img src="images/3.jpg" /> 'escapando' image description</p>
023         </div>
024         <div class="sl-slide">
025             <h2 class="sl-title">Beelitz Heilstatten</h2>
026             <p><img src="images/4.jpg" /> 'Beelitz Heilstatten' image description</p>
027         </div>
028         <div class="sl-slide">
029             <h2 class="sl-title">I'm just a little guy...</h2>
030             <p><img src="images/5.jpg" /> 'I'm just a little guy...' image description</p>
031         </div>
032         <div class="sl-slide">
033             <h2 class="sl-title">Nothing says I love you...</h2>
034             <p><img src="images/6.jpg" /> 'Nothing says I love you...' image description</p>
035         </div>
036         <div class="sl-slide">
037             <h2 class="sl-title">The birds</h2>
038             <p><img src="images/7.jpg" /> 'The birds' image description</p>
039         </div>
040         <div class="sl-slide">
041             <h2 class="sl-title">Have a Seat</h2>
042             <p><img src="images/8.jpg" /> 'Have a Seat' image description</p>
043         </div>
044         <div class="sl-slide">
045             <h2 class="sl-title">Jess and the birds</h2>
046             <p><img src="images/9.jpg" /> 'Jess and the birds' image description</p>
047         </div>
048         <div class="sl-slide">
049             <h2 class="sl-title">Lost Angel</h2>
050             <p><img src="images/10.jpg" /> 'Lost Angel' image description</p>
051         </div>
052         <div class="sl-slide">
053             <h2 class="sl-title">Here I come...</h2>
054             <p><img src="images/11.jpg" /> 'Here I come... image description</p>
055         </div>
056         <div class="sl-slide">
057             <h2 class="sl-title">Inle Lake Reflections</h2>
058             <p><img src="images/12.jpg" /> 'Inle Lake Reflections' image description</p>
059         </div>
060         <div class="sl-slide">
061             <h2 class="sl-title">Evening Excursion</h2>
062             <p><img src="images/13.jpg" /> 'Evening Excursion' image description</p>
063         </div>
064         <div class="sl-slide">
065             <h2 class="sl-title">In the woods</h2>
066             <p><img src="images/14.jpg" /> 'In the woods' image description</p>
067         </div>
068         <div class="sl-slide">
069             <h2 class="sl-title">In the room</h2>
070             <p><img src="images/15.jpg" /> 'In the room' image description</p>
071         </div>
072         <div class="sl-slide">
073             <h2 class="sl-title">batsto</h2>
074             <p><img src="images/16.jpg" /> 'batsto' image description</p>
075         </div>
076         <div class="sl-slide">
077             <h2 class="sl-title">A boy playing with his...</h2>
078             <p><img src="images/17.jpg" /> 'A boy playing with his...' image description</p>
079         </div>
080     </div>
081     <!-- jCarousel -->
082     <ul id="sl-thumbs">
083         <li><img src="images/1t.jpg" /></li>
084         <li><img src="images/2t.jpg" /></li>
085         <li><img src="images/3t.jpg" /></li>
086         <li><img src="images/4t.jpg" /></li>
087         <li><img src="images/5t.jpg" /></li>
088         <li><img src="images/6t.jpg" /></li>
089         <li><img src="images/7t.jpg" /></li>
090         <li><img src="images/8t.jpg" /></li>
091         <li><img src="images/9t.jpg" /></li>
092         <li><img src="images/10t.jpg" /></li>
093         <li><img src="images/11t.jpg" /></li>
094         <li><img src="images/12t.jpg" /></li>
095         <li><img src="images/13t.jpg" /></li>
096         <li><img src="images/14t.jpg" /></li>
097         <li><img src="images/15t.jpg" /></li>
098         <li><img src="images/16t.jpg" /></li>
099         <li><img src="images/17t.jpg" /></li>
100     </ul>
101     <!-- ViewAll button -->
102     <div class="sl-view-all">View as one page</div>
103 </div>

In the beginning of this main section you can see control buttons, after, the content section with slides and the carousel (UL-LI based)

Step 2. CSS

css/main.css

To adjust our intro section I used next styles:

01 /* Slider styles */
02 .sl-intro, .sl-main {
03     background-color: #BBBBBB;
04     border: 1px solid #000;
05     margin: 20px auto;
06     overflow: hidden;
07     padding: 5px;
08     width: 800px;
09     /* CSS3 round border and shadow */
10     -webkit-border-radius: 3px;
11     -moz-border-radius: 3px;
12     border-radius: 3px;
13     -webkit-box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
14     -moz-box-shadow: 0 1px 2px 0 rgba(119,119,119,.5);
15     box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
16 }
17 .sl-intro img {
18     float: left;
19     margin: 0 10px 10px 0;
20 }
21 .sl-intro p {
22     font-size: 24px;
23 }
24 .sl-intro a {
25     font-size: 20px;
26 }

It is the basic rounded box with image at the left and text at the right. Now, styles for navigation control buttons:

01 /* Controls */
02 .sl-controls {
03     margin: 5px;
04     overflow: hidden;
05 }
06 .sl-controls .next {
07     background:transparent url(sprite.png) no-repeat -100px 0;
08     cursor: pointer;
09     display:block;
10     float:right;
11     height:35px;
12     width:36px;
13 }
14 .sl-controls .next:hover {
15     background-position:-100px -100px
16 }
17 .sl-controls .prev {
18     background:transparent url(sprite.png) no-repeat -50px 0;
19     cursor: pointer;
20     display:block;
21     float:right;
22     height:35px;
23     margin:0 0 .5em .5em;
24     width:36px;
25 }
26 .sl-controls .prev:hover {
27     background-position:-50px -100px;
28 }
29 .sl-controls .back-home {
30     background:transparent url(sprite.png) no-repeat 0 0;
31     cursor: pointer;
32     display:block;
33     float:right;
34     height:35px;
35     margin:0 0 .5em 1em;
36     width:36px;
37 }
38 .sl-controls .back-home:hover {
39     background-position:0 -100px;
40 }
41 .sl-controls #count {
42     float: right;
43     margin-top: 12px;
44     padding-left: 5px;
45     padding-right: 5px;
46 }

I hope that everything is clean with them, next styles are for slides and carousel object:

001 /* Slides */
002 .sl-slide {
003     display: none;
004     overflow: hidden;
005     padding: 0 20px;
006 }
007 .sl-slide.visible {
008     display: block;
009 }
010 .sl-slide img {
011     cursor: pointer;
012     float: right;
013     margin:0 0 10px 10px;
014 }
015 /* jcarousel styles */
016 #sl-thumbs li {
017     cursor: pointer;
018     height: 79px;
019     width: 79px;
020 }
021 #sl-thumbs li.selected {
022     background-color: #FFFFFF;
023     cursor: default;
024 }
025 #sl-thumbs li img {
026     height: 75px;
027     padding: 2px;
028     width: 75px;
029 }
030 .jcarousel-container {
031     margin: 10px 0;
032     padding: 0 40px;
033 }
034 .jcarousel-clip {
035     background-color: #497e96;
036     border-left: 20px solid #497e96;
037     border-right: 20px solid #497e96;
038     overflow: hidden;
039     padding: 10px 0;
040     /* CSS3 round border and shadow */
041     -webkit-border-radius: 3px;
042     -moz-border-radius: 3px;
043     border-radius: 3px;
044     -webkit-box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
045     -moz-box-shadow: 0 1px 2px 0 rgba(119,119,119,.5);
046     box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
047 }
048 .jcarousel-prev-horizontal, .jcarousel-next-horizontal {
049     border: 1px solid white;
050     cursor: pointer;
051     height: 49px;
052     position: absolute;
053     top: 25px;
054     width: 18px;
055     z-index: 1;
056     /* CSS3 round border and shadow */
057     -webkit-border-radius: 3px;
058     -moz-border-radius: 3px;
059     border-radius: 3px;
060     -webkit-box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
061     -moz-box-shadow: 0 1px 2px 0 rgba(119,119,119,.5);
062     box-shadow: 0 1px 2px 0 rgba(119, 119, 119, .5);
063 }
064 .jcarousel-prev-horizontal {
065     left: 30px;
066     background:url(sprite.png) no-repeat -165px 3px, -moz-linear-gradient(top,white 0,#EDEDED 100%);
067     background:url(sprite.png) no-repeat -165px 3px, -webkit-linear-gradient(top,white 0,#EDEDED 100%);
068     background:url(sprite.png) no-repeat -165px 3px #EDEDED;
069 }
070 .jcarousel-next-horizontal {
071     right: 30px;
072     background: url(sprite.png) no-repeat -215px 3px,-moz-linear-gradient(top,white 0,#EDEDED 100%);
073     background: url(sprite.png) no-repeat -215px 3px,-webkit-linear-gradient(top,white 0,#EDEDED 100%);
074     background: url(sprite.png) no-repeat -215px 3px #EDEDED;
075 }
076 .jcarousel-prev-horizontal:hover,
077 .jcarousel-prev-horizontal:focus {
078     background:url(sprite.png) no-repeat -165px -97px,-moz-linear-gradient(top,#EDEDED 0,white 100%);
079     background:url(sprite.png) no-repeat -165px -97px,-webkit-linear-gradient(top,#EDEDED 0,white 100%);
080     background:url(sprite.png) no-repeat -165px -97px #EDEDED;
081 }
082 .jcarousel-prev-horizontal:active {
083     background:url(sprite.png) no-repeat -165px 3px,-moz-linear-gradient(top,white 0,#EDEDED 100%);
084     background:url(sprite.png) no-repeat -165px 3px,-webkit-linear-gradient(top,white 0,#EDEDED 100%);
085     background:url(sprite.png) no-repeat -165px 3px #EDEDED;
086 }
087 .jcarousel-prev-disabled-horizontal,
088 .jcarousel-prev-disabled-horizontal:hover,
089 .jcarousel-prev-disabled-horizontal:focus,
090 .jcarousel-prev-disabled-horizontal:active {
091     cursor: default;
092     background:url(sprite.png) no-repeat -165px -197px,-moz-linear-gradient(top,rgba(255, 255, 255, 0.5) 0,rgba(237, 237, 237, 0.5) 100%);
093     background:url(sprite.png) no-repeat -165px -197px,-webkit-linear-gradient(top,rgba(255, 255, 255, 0.5) 0,rgba(237, 237, 237, 0.5) 100%);
094     background:url(sprite.png) no-repeat -165px -197px #EDEDED;
095 }
096 .jcarousel-next-horizontal:hover,
097 .jcarousel-next-horizontal:focus {
098     background:url(sprite.png) no-repeat -215px -97px,-moz-linear-gradient(top,#EDEDED 0,white 100%);
099     background:url(sprite.png) no-repeat -215px -97px,-webkit-linear-gradient(top,#EDEDED 0,white 100%);
100     background:url(sprite.png) no-repeat -215px -97px #EDEDED;
101 }
102 .jcarousel-next-horizontal:active {
103     background: url(sprite.png) no-repeat -215px 3px,-moz-linear-gradient(top,white 0,#EDEDED 100%);
104     background: url(sprite.png) no-repeat -215px 3px,-webkit-linear-gradient(top,white 0,#EDEDED 100%);
105     background: url(sprite.png) no-repeat -215px 3px #EDEDED;
106 }
107 .jcarousel-next-disabled-horizontal,
108 .jcarousel-next-disabled-horizontal:hover,
109 .jcarousel-next-disabled-horizontal:focus,
110 .jcarousel-next-disabled-horizontal:active {
111     cursor: default;
112     background:url(sprite.png) no-repeat -215px -197px, -moz-linear-gradient(top,rgba(255, 255, 255, 0.5) 0,rgba(237, 237, 237, 0.5) 100%);
113     background:url(sprite.png) no-repeat -215px -197px, -webkit-linear-gradient(top,rgba(255, 255, 255, 0.5) 0,rgba(237, 237, 237, 0.5) 100%);
114     background:url(sprite.png) no-repeat -215px -197px #EDEDED;
115 }
116 /* ViewAll button */
117 .sl-view-all { cursor: pointer;text-align: right; }

Step 3. JS

Finally, our javascript:

js/main.js

001 // Set active slide function
002 function setActiveSlide(i) {
003     // Update current position counter
004     $('#count').html( (i + 1) + '/' + $('.sl-slide').length );
005     // Remove 'selected' class attribute from all jcarousel-items
006     $('ul li').removeClass('selected');
007     // Set 'selected' class attribute to a selected jcarousel-item
008     var li = $('ul li').eq(i);
009     li.addClass('selected');
010     // Hide all slides (remove 'visible' class attribute)
011     $('.sl-slide').removeClass('visible');
012     // Show selected slide (set 'visible' class attribute)
013     $('.sl-slide').eq(i).addClass('visible');
014     // Update browser's URL with a title of selected slide (optional):
015     window.location.hash = $('.visible .sl-title').text().replace(/ /g, '-');
016 }
017 // dummy text generator
018 function randomString(len) {
019     charSet = 'A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z';
020     var randomString = '';
021     for (var i = 0; i < len; i++) {
022         var randomPoz = Math.floor(Math.random() * charSet.length);
023         randomString += charSet.substring(randomPoz,randomPoz+1);
024     }
025     return randomString;
026 }
027 // Once DOM (document) is finished loading
028 $(document).ready(function(){
029     // View all mode
030     var bViewAllMode = false;
031     $('.sl-slide p').each(function () {
032         $(this).append( '<br />' + randomString(500) );
033     });
034     // Initialize jCarousel
035     $('#sl-thumbs').jcarousel();
036     // set first active slide
037     setActiveSlide(0);
038     // jcarousel-item onclick handler
039     $('#sl-thumbs li').click(function() {
040         setActiveSlide($(this).index());
041     });
042     // Slide's image onclick handler
043     $('.sl-slide img').click(function(){
044         if (! bViewAllMode) {
045             // Find current index and next position
046             var iCur = $('ul li.selected').index();
047             var iMax = $('ul li').length - 1;
048             var iNext = (iCur + 1 >  iMax) ? 0 : (iCur + 1);
049             // Update position and set to next slide
050             setActiveSlide(iNext);
051         }
052         return false;
053     });
054     // Next button onclick handler
055     $('.next').click(function(){
056         // Find current index and next position
057         var iCur = $('ul li.selected').index();
058         var iMax = $('ul li').length - 1;
059         var iNext = (iCur + 1) >  iMax ? 0 : (iCur + 1);
060         // Update position and set to next slide
061         setActiveSlide(iNext);
062         return false;
063     });
064     // Prev button onclick handler
065     $('.prev').click(function(){
066         // Find current index and previous position
067         var iCur = $('ul li.selected').index();
068         var iMax = $('ul li').length - 1;
069         var iPrev = (iCur - 1 >  iMax) ? 0 : (iCur - 1);
070         iPrev = (iPrev == -1) ? iMax : iPrev;
071         // Update position and set to previous slide
072         setActiveSlide(iPrev);
073         // Update browser's URL with a title of selected slide (optional):
074         window.location.hash = $('.visible .sl-title').text().replace(/ /g, '-');
075         return false;
076     });
077     // 'ViewAll' button onclick handler
078     $('.sl-view-all').click(function() {
079         // Set ViewAllMode to 'true' value
080         bViewAllMode = true;
081         // Hide controls, ViewAll button and jcarousel container
082         $('.sl-controls, .sl-view-all, .jcarousel-container').hide();
083         // Show Intro and all slides
084         $('.sl-intro').show();
085         $('.sl-slide').addClass('visible');
086     });
087     // 'Start' button onclick handler
088     $('.sl-start').click(function () {
089         // Set ViewAllMode to 'false' value
090         bViewAllMode = false;
091         // Hide Intro
092         $('.sl-intro').hide();
093         // Show controls, main slider section, ViewAll button and jcarousel container
094         $('.sl-controls, .sl-main, .sl-view-all, .jcarousel-container').show();
095         // set first active slide
096         setActiveSlide(0);
097         return false;
098     });
099     // 'BackHome' button onclick handler
100     $('.back-home').click(function () {
101         // Hide main slider section
102         $('.sl-main').hide();
103         // Show Intro
104         $('.sl-intro').show();
105         return false;
106     });
107 });

In the beginning I defined ‘setActiveSlide’ function to set active slide. Then, in order to fill our slides with dummy text I created ‘randomString’ function. We can see that random (dummy) text on our slides. After, when DOM is ready – we initialize jcarousel object, and add all the necessary event handlers (all of them – onclick events).

Live Demo

Conclusion

That is all for today. We have just developed really good slider for custom content (which can be images, text, media objects etc). I’m sure that this material will be very useful for you. Good luck and welcome back.

Rate article
© 2025 Script Tutorials