Want to become a Vibe Coder? Join Vibe Coding Training here
x
C# Corner
Tech
News
Videos
Forums
Jobs
Books
Events
More
Interviews
Live
Learn
Training
Career
Members
Blogs
Challenges
Certification
Contribute
Article
Blog
Video
Ebook
Interview Question
Collapse
Feed
Dashboard
Wallet
Learn
Achievements
Network
Refer
Rewards
SharpGPT
Premium
Contribute
Article
Blog
Video
Ebook
Interview Question
Register
Login
jQuery: Building a Simple Content Slider
WhatsApp
Vincent Maverick Durano
May 20
2015
1.6
k
0
0
<!--HTML-->
<div
class
=
"divMain"
>
<div>Question 1</div>
<div>Question 2</div>
<div>Question 3</div>
<div>Question 4</div>
<div>Question 5</div>
<div>Question 6</div
</div>
<button name=
"prev"
>Prev</button>
<button name=
"next"
>Next</button>
<!--jQuery-->
$(document).ready(function () {
var divs = $(
'.divMain>div'
);
var now = 0;
divs.hide().first().show();
$(
"button[name=next]"
).click(function (e) {
divs.eq(now).hide();
now = (now + 1 < divs.length) ? now + 1 : 0;
if
((now + 1) == divs.length)
$(
this
).attr(
'disabled'
,
'disabled'
);
$(
"button[name=prev]"
).removeAttr(
'disabled'
);
divs.eq(now).show();
// show next
});
$(
"button[name=prev]"
).click(function (e) {
divs.eq(now).hide();
now = (now > 0) ? now - 1 : divs.length - 1;
if
(now == 0)
$(
this
).attr(
'disabled'
,
'disabled'
);
$(
"button[name=next]"
).removeAttr(
'disabled'
);
divs.eq(now).show();
// or .css('display','block');
});
});
<!--CSS-->
.divMain {
height:300px;
border:1px solid #7C7C80;
}
.divMain>div {
height:100%;
overflow-y:auto;
border:2px solid #AFA9DE;
padding:1em;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
This snippet shows how to build a content slider with previous and next button using jQuery. You can see the working demo here:
http://jsfiddle.net/WGkPV/285/
Content Slider
jQuery
Pager
Up Next
jQuery: Building a Simple Content Slider