How to create a jQuery simple Carousel

This scripts uses the Jcarousellite plugin with some changes to add the pagination.


<style type="text/css">
<!--
body {margin:0; padding:0; background:#fff;}
#slidebox{position:relative; border:1px solid #ccc; margin:40px auto;overflow:hidden;}
#slidebox, #slidebox ul {width:600px;height:300px;}
#slidebox, #slidebox ul li{width:600px;height:300px;}
#slidebox ul li{position:relative; left:0; background:#eee; float:left;list-style: none; padding:15px 28px; font-family:Verdana, Geneva, sans-serif; font-size:13px;}
#slidebox .next, #slidebox .previous{position:absolute; z-index:2; display:block; width:21px; height:21px;top:139px;}
#slidebox .next{right:0; margin-right:10px; background:url(slidebox_next.png) no-repeat left top;}
#slidebox .next:hover{background:url(slidebox_next_hover.png) no-repeat left top;}
#slidebox .previous{margin-left:10px; background:url(slidebox_previous.png) no-repeat left top;}
#slidebox .previous:hover{background:url(slidebox_previous_hover.png) no-repeat left top;}
#slidebox .thumbs{position:absolute; z-index:2; bottom:10px; right:10px;}
#slidebox .thumbs a{display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; text-decoration:none; padding:2px 4px; background:url(slidebox_thumb.png); color:#fff;}
#slidebox .thumbs a:hover{background:#fff; color:#000;}
#slidebox .thumbs .thumbActive{background:#fff; color:#000; display:block; margin-left:5px; float:left; font-family:Verdana, Geneva, sans-serif; font-size:9px; text-decoration:none; padding:2px 4px;}
-->


<script src="jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="jcarousellite_1.0.1c5.js" type="text/javascript"></script>
<script type="text/javascript">

$(function() {
$("#slidebox").jCarouselLite({
vertical: false,
hoverPause:true,
btnPrev: ".previous",
btnNext: ".next",
visible: 1,
start: 0,
scroll: 1,
circular: true,
auto:1000,
speed:500,
btnGo:
[".1", ".2",
".3", ".4"],

afterEnd: function(a, to, btnGo) {
if(btnGo.length <= to){
to = 0;
}
$(".thumbActive").removeClass("thumbActive");
$(btnGo[to]).addClass("thumbActive");
}
});
});
</script>

<div id="slidebox">
<div class="next"></div>
<div class="previous"></div>
<div class="thumbs">
<a href="#" onclick="" class="1">1</a>
<a href="#" onclick="" class="2 thumbActive">2</a>
<a href="#" onclick="" class="3 ">3</a>
<a href="#" onclick="" class="4">4</a>
</div>
<ul>
<li>content 1</li>
<li>content 2</li>
<li>content 3</li>
<li>content 4</li>
</ul>
</div>
Author: scriptbreaker - Source

Sponsored Links:



Comments

Arun Potti:
2012-08-27 10:08:35

Good Example

Panpic Technology:
2014-07-23 22:07:00

Great work, Thanks for your tutorial

Leave a comment
[Optional]
(Will not be shown on the site)
[Optional]
[Optional]

Recent Comments

SEO Training in Hyderabad said:

Bharat Go Digital Academy is a online e learning platform where we teach people the digital skills.

deekshitha said:

Informative blog <a href="https://360digitmg.com/data-analytics-certification-training-course-in-hyderabad">data ...

360DIGITMGtraining said:

I am impressed by the information that you have on this blog. It shows how well you understand this subject. https://360digitmg.com/digital-marketing-training-in-hyderabad ...

tanish velu said:

Thank you for your post, I look for such article along time, today i find it finally. this post give me lots of advise it is very ...

deekshitha said:

Informative blog <a href="https://360digitmg.com/digital-marketing-training-in-hyderabad">best ...

ssdd said:

dsddssd

360DIGITMGtraining said:

It's really nice and meaningful. it's a really cool blog.you have really helped lots of people who visit blogs and provide ...

amritabansal said:

In today's world Data Science is the most desirable course among students and professionals. When I came to know about this ...

data science course syllabus said:

Very Nice Article

princika sweety said:

I want to leave a little comment to support and wish you the best of luck we wish you the best of luck in all your blogging enedevores ...

SyntaxHighlighter.config.stripBrs=true;