Skip to main content
Stack Overflow
Products
OverflowAI
Search…
Umer Masood's user avatar
Umer Masood
1, 1 reputation
●22 bronze badges
Home
New
Questions
Tags
Saves
Users
Companies
Labs
Discussions
Collectives
Communities for your favorite technologies. Explore all Collectives
Teams
Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams
Looking for your Teams?
carousel using jQuery
Asked 11 years ago
Modified 11 years ago
Viewed 18k times
Report this ad
4
I know there are plugins available out there, but I'm trying to make one of myself but before that I'm trying to understand the concept of making it as an infinite/circular carousel. Here is my jsfiddle so far.. http://jsfiddle.net/hbk35/KPKyz/3/
HTML:
<div id="carousel_wrapper">
<ul>
<li>
<div>0</div>
</li>
<li>
<div>1</div>
</li>
<li>
<div>2</div>
</li>
<li>
<div>3</div>
</li>
<li>
<div>4</div>
</li>
<li>
<div>5</div>
</li>
<li>
<div>6</div>
</li>
<li>
<div>7</div>
</li>
</ul>
</div>
<br>
<div id="buttons">
<button id="left">left</button>
<button id="right">right</button>
</div>
JS:
var container = $("#carousel_wrapper");
var runner = container.find('ul');
var liWidth = runner.find('li:first').outerWidth();
var itemsPerPage = 3;
var noofitems = runner.find('li').length;
runner.width(noofitems * liWidth);
container.width(itemsPerPage*liWidth);
$('#right').on('click',function(){
runner.animate({scrollLeft: -liWidth},1000);
});
$('#left').on('click',function(){
runner.animate({scrollLeft: liWidth},1000);
});
CSS:
div#carousel_wrapper{
overflow:hidden;
position:relative;
}
ul {
padding:0px;
margin:0px;
}
ul li {
list-style:none;
float:left;
}
ul li div {
border:1px solid white;
width:50px;
height:50px;
background-color:gray;
}
I do not want to use clone and detach method. Is there any other way to do that? Please anyone would like to guide me where I'm making mistake. I'm newbie to stack overflow and javascript/jquery also..trying to learn on my own. Forgive me I'm trying since to put my code onto the question, couldn't get neat and separate like others.
Thanks!!
javascriptjquerycsscarousel
Share
Edit
Follow
edited Feb 27, 2014 at 19:31
asked Feb 27, 2014 at 19:22
harshes53's user avatar
harshes53
42911 gold badge77 silver badges1717 bronze badges
2
We need a reinventing-the-wheel tag on SO –
Dryden Long
CommentedFeb 27, 2014 at 19:24
The code in the fiddle doesn't match the code in your question. –
j08691
CommentedFeb 27, 2014 at 19:27
@j08691 my apologies. the fiddle is updated. thanks. –
harshes53
CommentedFeb 27, 2014 at 19:32
Are you looking to implement the carousel from jquery framework or any other framework –
Someone
CommentedFeb 27, 2014 at 19:50
@Someone using jQuery framework. actually I'm trying to make plugin of it. and to make it circular/infinite. –
harshes53
CommentedFeb 27, 2014 at 19:58
Show 2 more comments
2 Answers
Sorted by:
Highest score (default)
3
Here you go an infinite. Could be done with less code for sure. http://jsfiddle.net/artuc/rGLsG/3/
HTML:
<a href="javascript:void(0);" class="btnPrevious">Previous</a>
<a href="javascript:void(0);" class="btnNext">Next</a>
<div class="carousel">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
</ul>
</div>
CSS:
.carousel{
padding-top: 20px;
width: 357px;
overflow: hidden;
height: 50px;
position: relative;
}.carousel ul{
position: relative;
list-style: none;
list-style-type: none;
margin: 0;
height: 50px;
padding: 0;
}.carousel ul li{
position: absolute;
height: 25px;
width: 50px;
float: left;
margin-right: 1px;
background: #f2f2f2;
text-align: center;
padding-top: 25px;
}
JS:
$(function(){
var carousel = $('.carousel ul');
var carouselChild = carousel.find('li');
var clickCount = 0;
var canClick = true;
itemWidth = carousel.find('li:first').width()+1; //Including margin
//Set Carousel width so it won't wrap
carousel.width(itemWidth*carouselChild.length);
//Place the child elements to their original locations.
refreshChildPosition();
//Set the event handlers for buttons.
$('.btnNext').click(function(){
if(canClick){
canClick = false;
clickCount++;
//Animate the slider to left as item width
carousel.stop(false, true).animate({
left : '-='+itemWidth
},300, function(){
//Find the first item and append it as the last item.
lastItem = carousel.find('li:first');
lastItem.remove().appendTo(carousel);
lastItem.css('left', ((carouselChild.length-1)*(itemWidth))+(clickCount*itemWidth));
canClick = true;
});
}
});
$('.btnPrevious').click(function(){
if(canClick){
canClick = false;
clickCount--;
//Find the first item and append it as the last item.
lastItem = carousel.find('li:last');
lastItem.remove().prependTo(carousel);
lastItem.css('left', itemWidth*clickCount);
//Animate the slider to right as item width
carousel.finish(true).animate({
left: '+='+itemWidth
},300, function(){
canClick = true;
});
}
});
function refreshChildPosition(){
carouselChild.each(function(){
$(this).css('left', itemWidth*carouselChild.index($(this)));
});
}
});
Share
Edit
Follow
edited Feb 27, 2014 at 21:09
answered Feb 27, 2014 at 20:30
artuc's user avatar
artuc
9131111 silver badges2020 bronze badges
There was a bug when you fast click. Added finish() method to JS fiddle: jsfiddle.net/artuc/rGLsG/2 –
artuc
CommentedFeb 27, 2014 at 20:38
works like a charm! awesome this is what i was looking for... thanks!! but theres a small issue with it.. if you keep pressing next button, you will find an space between 1&2 li elements. –
harshes53
CommentedFeb 27, 2014 at 20:55
1
Yep, neither animate nor finish seems to work if you click really fast. I implemented a dirty solution to it. Please see the updated fiddle: jsfiddle.net/artuc/rGLsG/3 also removed one useless function. –
artuc
CommentedFeb 27, 2014 at 21:07
yeah i see the problem with your updated fiddle. if u click left continuously and fast, u will see the first element not there + some random space in between. else previous button works awesome!! thanks though! –
harshes53
CommentedFeb 27, 2014 at 21:52
i think if we can fix the random space issue! –
harshes53
CommentedFeb 27, 2014 at 21:56
Show 1 more comment
Report this ad
3
Here you go: http://jsfiddle.net/KPKyz/5/
JS
var container = $("#carousel_wrapper");
var runner = container.find('ul');
var liWidth = runner.find('li:first').outerWidth();
var itemsPerPage = 3;
var noofitems = runner.find('li').length;
runner.width(noofitems * liWidth);
container.width(itemsPerPage*liWidth);
$('#right').click(function() {
$( runner ).animate({ "left": "-=51px" }, "slow" );
});
$('#left').click(function() {
$( runner ).animate({ "left": "+=51px" }, "slow" );
});
CSS
div#carousel_wrapper{
overflow:hidden;
position:relative;
width:500px;
height: 100px;
}
ul {
padding:0px;
margin:0px;
position: absolute;
top:50px;
left: 0px;
width:300px;
height: 50px;
overflow: hidden;
}
ul li {
list-style:none;
float:left;
}
ul li div {
border:1px solid white;
width:50px;
height:50px;
background-color:gray;
}
Share
Edit
Follow
answered Feb 27, 2014 at 19:53
Ani's user avatar
Ani
4,52344 gold badges2828 silver badges3232 bronze badges
Thanks, was looking for something like that without additinoal plugins –
user133408
CommentedFeb 27, 2014 at 19:58
1
Oh..I thought you were OP :P ...My bad –
Ani
CommentedFeb 27, 2014 at 19:59
@Ani thats awesome. two more question. why i cannot use liWidth if I'm not aware of the width? how can i make it circular/infinite?? appreciate it. –
harshes53
CommentedFeb 27, 2014 at 20:02
1
Oh...I didn't knew you want circular...hold on –
Ani
CommentedFeb 27, 2014 at 20:04
Add a comment
Your Answer
Reminder: Answers generated by AI tools are not allowed due to Stack Overflow's artificial intelligence policy
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Start asking to get answers
Find the answer to your question by asking.
Explore related questions
javascriptjquerycsscarousel
See similar questions with these tags.
The Overflow Blog
Can climate tech startups address the current crisis?
What we learned at TDX 2025
Featured on Meta
Community Asks Sprint Announcement - March 2025
Meta Stack Exchange site maintenance scheduled starting Monday, March 17,...
Policy: Generative AI (e.g., ChatGPT) is banned
Stacks Editor development and testing
Is it better to redirect users who attempt to perform actions they can't yet...
Hot Meta Posts
14
What is the role of this new bottom notice on questions, below the answer box?
Report this ad
Report this ad
Linked
0
Scrolling/carousel with interval
-1
jQuery carousel - disable next/previous link when last item on the list is reached
Related
0
jQuery carousel
0
Circular Carousel (jQuery)
0
Make a carousel with divs
0
Carousel Jquery/Javascript
4
Trying to create a carousel effect with jQuery
0
how to make a jquery carousel
3
Make a carousel using JavaScript
0
Please help me with this carousel
0
Using JQuery to carousel through divs
0
How can i make this carousel working with JS and CSS?
Hot Network Questions
Has the Trump administration explained how they're going to get people to the Moon/Mars if they're reducing the size of NASA?
Building an 8080 based computer
PTIJ: Why did Mordechai insist on Esther ploughing (החרש תחרישי) at such a crucial moment?
Does this average exist?
Is the US debt "crisis" fake?
Is Oz a real place?
With what to replace uBlock Origin now after Google Chrome nerfed it?
What arguments can a developer make to management that he could be Product Owner for his Scrum team?
Is crypto sniping illegal?
Did Trump campaign against gay people?
Do any Tribes actively involve kinfolk in the fight for Gaia?
Why are the download sizes so much bigger than they actually are?
How can visa officials know I ‘visa shopped’
Converting EU motors 230V 30A for U.S. use
How do I start a tie from a grace note to another note in Lilypond?
Am I better off concocting my own chain wax?
How to Reorder Piecewise Function Compositions
What is the swap.img in Disk Analyzer
Did Asimov ever comment on whether the name of this Foundation character was a deliberate clue?
How would a society with no wood reliably heat itself?
"Naïve category theory", or, pedagogy and how to Introduce natural transformations?
Why Do We Take the Derivative of the Basis Vector When Calcuating the Acceleration in Polar Coordinates?
The arrows are not aligning
How to mount a headboard intended for bed to a wall instead?
Question feed
Stack Overflow
Questions
Help
Chat
Products
Teams
Advertising
Talent
Company
About
Press
Work Here
Legal
Privacy Policy
Terms of Service
Contact Us
Cookie Settings
Cookie Policy
Stack Exchange Network
Technology
Culture & recreation
Life & arts
Science
Professional
Business
API
Data
Blog
Facebook
Twitter
LinkedIn
Instagram
Site design / logo © 2025 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2025.3.14.23870