Develop Reference

js vertical slider with arrows

The thing is that I need to make a vertical images slider,so that when i press arrow down/arrow up every image changes it's position (the highest one goes bottom,the previous take it's place)
what it should look like:
what i have got so far:
$(function(){
var $vsliderboxes = $('#vsliderboxes'),
$vslidernav = $('#vslidernav'),
boxHeight = $vsliderboxes.height(),
current_index = 0;
function clickslide(){
clearInterval(intervalTimer);
clearTimeout(timeoutTimer);
timeoutTimer = setTimeout(function () {
intervalTimer = window.setInterval(autoslide, 2000);
}, 2500);
var index = $(this).index();
current_index = index;
$vsliderboxes.children().stop().animate({
top : (boxHeight * index * -1)
}, 500);
}
function autoslide(){
current_index++;
if (current_index >= $vsliderboxes.children().children().length) {
current_index = 0;
}
$vslidernav.find('a').eq(current_index).trigger('click');
}
$vslidernav.find('a').click(clickslide);
var intervalTimer = window.setInterval(autoslide, 2000),
timeoutTimer = null;
});
#vslidernav ul {
list-style: none;
padding: 0;
}
#vslidernav ul a {
padding: 0;
cursor: pointer;
height: 50px;
}
#vslidernav ul a:active {
color: #9C9A99;
}
#vslidernav ul a li {
height: 50px;
}
#vslidernav ul .active li {
}
.#vslidernav ul a:active {
background: transparent;
color: #9C9A99;
}
.vslider {
display: inline-block;
}
#vslidernav {
float: left;
width: 100px;
z-index: 1;
height: 250px;
}
#vsliderboxes {
position : relative;
overflow : hidden;
}
#vsliderboxes div {
height: 250px;
width: 900px;
}
#vsliderboxs-inner {
position : relative;
width : 900px;
height : 250px;
}
<div class="vslider">
<div id="vslidernav">
<ul>
<a id="1">
<li><img src="img/arrtop.gif"></li>
</a>
<a id="2">
<li><img src="img/arrdown.gif"></li>
</a>
<a id="3">
<li></li>
</a>
</ul>
</div>
<div id="vsliderboxes">
<div id="vsliderboxs-inner">
<div id="box1" class="active"><img src="img/slide1.gif"></div>
<div id="box2" class="inactive"><img src="img/slide2.gif"></div>
<div id="box3" class="inactive"><img src="img/slide3.gif"></div>
</div>
</div>
</div>
thanks for any advice

I think, that it isn't possible to solve this issue like you try to.
Because, when you work with the "top" property, you can't take one image from the top and append it to the other end because appending the image, will move the other images to another place --> the top property wouldn't be correct any more.
I think the contributed sliders (e.g. http://www.jssor.com/demos/vertical-slider.slider) work with the transform CSS property.
transform: translate3d()
Try to research about this property.
Roko C. Buljan answered on this page: loop carousel jquery
He uses a scrollTop loop for your problem.
I've also written a simple slider some time ago. I have now implemented the Roku C. Buljan method. Feel free to look at my code on Bitbucket.
https://bitbucket.org/d-stone/jqueryslider
An excerpt may help you:
value = prev_or_next == 'next' ? self.globals.slide_height : 0;
last = $('#container').find('> div:last');
first = $('#container').find('> div:first');
if(prev_or_next == 'prev') { // click on "next"-button
first.before(last); // put last element before first
settings.elements.inner.scrollTop(self.globals.slide_height); // set the scrollTop to 1 slide-height
}
// animation itself:
$('#container').stop().animate({scrollTop: value}, {
duration: settings.slide_speed,
done: function() {
if(prev_or_next == 'next') {
// put first item after last
last.after(first);
}
}
});
I'd advise you to validate your HTML (W3C Validator). There are some errors inside.
Invalid HTML can be the reason for some CSS and Javascript Errors.

issue creating sliders with jQuery

I'm currently working through this tutorial from helpingdev, but have come up against a brick wall - I've followed every step so far as i can tell and have the interface working - however when i run the page the image doesn't change, it simply stays on the first one.
the video is over three years old, so I'm guessing something in the syntax just need's to be changed - i just can't figure out what even with chrome dev tools.
Thanks for your help.
Here's the html, css, and js for the page:
html:
<!DOCTYPE>
<html>
<head>
<title>Slider example.</title>
<link rel="stylesheet" href="../css/slider.css">
</head>
<body>
<div class="wrapper">
<div id="slider">
<img id="1" src="../images/tromso.jpg">
<img id="2" src="../images/fjord.jpg">
<img id="3" src="../images/tromso_aerial.jpg">
<img id="4" src="../images/sognefjord.jpg">
</div>
Previous
Next
</div>
<script src="../js/jquery.js"></script>
<script src="../js/slider.js"></script>
</body>
</html>
css:
.wrapper {
width: 600px;
margin: 0 auto;
}
#slider {
width: 600px;
height: 400px;
overflow: hidden;
margin: 30px auto;
}
#slider > img {
width: 600px;
height: 600px;
float: left;
display: none;
}
a {
padding: 5px 10px;
background-color: #F0F0F0;
margin-top: 30px;
text-decoration: none;
color: #666;
}
a.left {
float: left;
}
a.right {
float: right;
}
js:
sliderInt = 1;
sliderNext = 2;
$(document).ready(function(){
$("#slider > img#1").fadeIn(300);
startSlider();
});
function startSlider(){
count = $("#slider > img").length;
loop = setInterval(function(){
if(sliderNext > count){
sliderNext = 1;
sliderInt = 1;
}
$("slider > img").fadeOut(300);
$("#slider > img#" + sliderNext).fadeIn(300);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
},3000);
}

This
$("slider > img").fadeOut(300);
Should be
$("#slider > img").fadeOut(300);
You missed a # in front of slider
Also remove the code loop = you are assigning a function to the loop variable but never executing it. So what you need is to run it rather than assigning it. Removing the assignment will execute that block of code.

Pictures in a Jquery slideshow are stuttering and showing incorrectly

I have a slideshow of 5 images, every couple seconds. It's supposed to go to the next image, and loop.
What is currently occurring is the first image shows up, then transitions to the next. When the next appears, it flashes back to the first image. Then it goes to the third image as it should in the series, but flashes back to the first image again. This continues all the way through to the fifth image.
But once it cycles through to the first image again (after going through all five) everything works fine from there on. Each image sits for 3 seconds and then moves on, no jumping back to image one or anything.
Here's the code I'm using.
Html:
<div id="slideshow">
<div>
<img src="Images/1.gif">
</div>
<div>
<img src="Images/2.gif">
</div>
<div>
<img src="Images/3.gif">
</div>
<div>
<img src="Images/4.gif">
</div>
<div>
<img src="Images/5.gif">
</div>
</div>
CSS:
#slideshow {
clear: both;
margin: 50px auto;
position: relative;
max-width: 960px;
height: 643px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow img {
max-width: 100%;
}
JS:
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(800)
.next()
.fadeIn(800)
.end()
.appendTo('#slideshow');
}, 3000);
The actual site I'm putting together is here so you can see it in action:
schmelzerwedding.com
Any help to make it not jump back like that would be greatly appreciated. Thank you!

Like I mentioned in my comment I think the use of appendTo() may be the culprit. I also believe it's not the best thing to do performance wise.
Here's a version that simply keeps track of which slide we're on and increases the number.
(function () {
var slideshow = document.getElementById('slideshow');
var slides = slideshow.getElementsByTagName('img');
var currSlide = 0;
var numSlides = slides.length;
// Set first slide to active
slides[currSlide].classList.add('active');
setInterval(function () {
slides[currSlide].classList.remove('active');
currSlide = (currSlide + 1) >= numSlides ? 0 : currSlide + 1;
slides[currSlide].classList.add('active');
}, 2000);
})();
#slideshow {
position: relative;
width: 200px;
height: 200px;
}
#slideshow img {
opacity: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: opacity .2s ease-out;
}
#slideshow img.active {
opacity: 1;
}
<div id="slideshow">
<img src="http://placehold.it/199x199">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/201x201">
<img src="http://placehold.it/202x202">
</div>
Edit: If you (for some reason) don't want to use pure JS, here's the same code in jQuery:
(function () {
var slideshow = $('#slideshow');
var slides = slideshow.find('> *');
var currSlide = 0;
var numSlides = slides.length;
slides.eq(currSlide).addClass('active');
setInterval(function () {
slides.eq(currSlide).removeClass('active');
currSlide = (currSlide + 1) >= numSlides ? 0 : currSlide + 1;
slides.eq(currSlide).addClass('active');
}, 200);
})();

Using jQuery:
//Just for demo - takes a few secs to load the images
setTimeout(function(){
$('#ld').hide();
},500);
var cnt = 0;
$("#slideshow > div:gt(0)").hide();
setTimeout(showSlide, 2000);
function showSlide() {
cnt++;
cnt = (cnt>3)?0:cnt;
$("#slideshow > div").fadeOut();
$("#slideshow > div:eq("+cnt+")").fadeIn();
setTimeout(showSlide, 2000);
}
#slideshow {clear:both;margin:50px auto;position:relative;max-width:960px;height:643px;padding:10px;box-shadow:0 0 20px rgba(0, 0, 0, 0.4);}
#slideshow > div {position:absolute;top:10px;left:10px;right:10px;bottom:10px;}
#slideshow img {max-width:100%;}
/* For Demo Only */
#ld{position:absolute;top:10%;left:20%;font-size:5rem;text-shadow:5px;z-index:2;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
<div><img src="http://placekitten.com/550/200"></div>
<div><img src="http://placekitten.com/548/200"></div>
<div><img src="http://placekitten.com/550/202"></div>
<div><img src="http://placekitten.com/548/202"></div>
</div>
<div id="ld">Loading . . . </div>

Boostrap cannot pickup jQuery right away, try changing the order that they are called in the head.

how to set jquery slider on auto instead of click or hover on thumbs

i am new learner of jquery and javaScript.
i want to create a slider with a big image section and a section of thumbs.
slider should slide automatically i have coded so far is working on click or hover but i dont know how to set it on auto please help me how to modify my code. code and slider screen shoot is given below.
slider image
$("document").ready(function()
{
$("#thumbs a").mouseenter(function()
{
var smallimgpath = $(this).attr("href");
$("#bigimage img").fadeOut(function()
{
$("#bigimage img").attr("src",smallimgpath);
$("#bigimage img").fadeIn();
});
return false;
});
});
</script>
#imagereplacement{
border: 1px solid red;
width:98%;
height:400px;
margin:auto;
padding-top:8px;
padding-left:10px;
}
#imagereplacement p{
text-align:inline;
}
#bigimage{
/* border: 1px solid green; */
margin:auto;
text-align:center;
float: left;
}
#thumbs{
/*border: 1px solid yellow;*/
margin: 110px 10px;
text-align:center;
width:29%;
float: right;
}
#thumbs img{
height:100px;
width:100px;
}
//This is where all the JQuery code will go
</head>
<body>
<div id="imagereplacement">
<p id="bigimage">
<img src="images/slider1.jpg">
</p>
<p id="thumbs">
<img src="images/slider1.jpg">
<img src="images/slider2.jpg">
<img src="images/slider3.jpg">
</p>

try with this example, please let me know in case of any more question from you :
$("document").ready(function(){
var pages = $('#container li'),
current = 0;
var currentPage, nextPage;
var timeoutID;
var buttonClicked = 0;
var handler1 = function() {
buttonClicked = 1;
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if ($(this).hasClass('prevButton')) {
if (current <= 0)
current = pages.length - 1;
else
current = current - 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", -604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {
currentPage.hide();
});
currentPage.animate({
marginLeft: 604
}, 800, function() {
$('#container .button').bind('click', handler1);
});
} else {
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
}
}
var handler2 = function() {
if (buttonClicked == 0) {
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
}
}
$('#container .button').click(function() {
clearTimeout(timeoutID);
handler1();
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
});
* {
margin: 0;
padding: 0;
}
#container {
width: 604px;
height: 453px;
position: relative;
}
#container .prevButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: left top;
left: 0
}
#container .prevButton:hover {
background-position: left bottom;
left: 0;
}
#container .nextButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: right top;
right: 0
}
#container .nextButton:hover {
background-position: right bottom;
right: 0;
}
#container ul {
width: 604px;
height: 453px;
list-style: none outside none;
position: relative;
overflow: hidden;
}
#container li:first-child {
display: list-item;
position: absolute;
}
#container li {
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<h1>HTML Slideshow AutoPlay (Slide Left/Slide Right)</h1>
<br />
<br />
<div id="container">
<ul>
<li><img src="http://vietlandsoft.com/images/picture1.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture2.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture3.jpg" width="604" height="453" /></li>
</ul>
<span class="button prevButton"></span>
<span class="button nextButton"></span>
</div>
</center>

Here an example i've created that create an auto slider CodePen Demo and JSFiddle Demo
I've used an object literal pattern to create slide variable just to avoid creating many global function and variable. Inside document.ready i've initialised my slider just by calling slide.init({....}) this way it makes it easy to reuse and work like plugin.
$.extend(slide.config,option)
this code in simple words override you're default configuration defined in config key
as i mentioned in my above comment make a function slider() and place seTimeout(slide,1000) at bottom of your function before closing
Here in this code its done in animate key of slide object it is passed with two parameter cnt and all image array, If cnt is greater then image array length then cnt is set to 0 i.e if at first when cnt keeps on increment i fadeout all image so when i make it 0 the next time the fadeToggle acts as switch
if On then Off
if Off the On
and calling function slider after a delay makes it a recursive call its just one way for continuously looping there are many other ways i guess for looping continuous you can try
well i haven't check if all images Loaded or not which is most important in slider well that you could try on your own.
var slide = {
'config': {
'container': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'linear'
},
init: function(option) {
$.extend(slide.config, option);
var imag = slide.getImages();
slide.animate(0, imag);
},
animate: function(cnt, imag) {
if (cnt >= imag.length) {
cnt = 0;
}
imag.eq(cnt).fadeToggle(slide.config.fade, slide.config.easing);
setTimeout(function() {
slide.animate(++cnt, imag);
}, slide.config.delay);
},
getImages: function() {
return slide.config.container.find('img');
}
};
$(document).ready(function() {
slide.init({
'contianer': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'swing'
});
})
body {
margin: 0;
padding: 0;
}
.contianer {
width: 100%;
height: 100%;
position: relative;
}
.container > div,
.container > div >img {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="slideX">
<div id="img1">
<img src="http://imgs.abduzeedo.com/files/articles/magical-animal-photography-gregory-colbert/5.jpg" />
</div>
<div id="img2">
<img src="http://cdn-5.webdesignmash.com/trial/wp-content/uploads/2010/10/great-dog-photography-016.jpg" />
</div>
<div id="img3">
<img src="http://onlybackground.com/wp-content/uploads/2014/01/marble-beautiful-photography-1920x1200.jpg" />
</div>
</div>

How to disable link/button/etc when last item is visible in a carousel in javascript

I've built a carousel but I want the buttons to be disabled when the last/first item is in the viewport, i.e. when the last item is visible then disable the 'next' button.
I'm using unbind('click') but it doesn't work.
Please show me the way.
JS:
var MYPROJECT = {
CONTROL: '.controls',
SLIDELIST: '.slide-wrapper ul',
init: function(){
this.projectCarousel();
},
projectCarousel: function(){
var self = this,
jqs_slideList = $(self.SLIDELIST),
slide = jqs_slideList.find('.slide'),
slideWidth = jqs_slideList.find('.slide').outerWidth(true),
firstSlidePos = slide.first().position().left,
lastSlidePos = slide.last().position(),
count = 0;
$(this.CONTROL).on('click', 'a', function (e) {
var thisElm = $(this);
e.preventDefault();
if (thisElm.hasClass('prev')) {/* if prev button is clicked */
jqs_slideList.animate({ marginLeft: '+=' + slideWidth + 'px' });
} else if (thisElm.hasClass('next')) {/* if next button is clicked */
jqs_slideList.animate({ marginLeft: '-=' + slideWidth + 'px' });
count++;
if (count === (slide.length - 1)) {
// disable button
thisElm.unbind('click').css({ /* this should be in css class */
opacity: 0.5,
cursor: 'default'
});
}
}
});
}
};
MYPROJECT.init();
HTML:
<div class="slideshow">
<div class="controls">
-
+
</div>
<div class="slide-wrapper">
<ul>
<li class="slide">
<article>
<h3>Some title here (nav 1)</h3>
<p>Over the past few years, mobile web usage has considerably increased.</p>
</article>
</li>
<li class="slide">
<article>
<h3>Some title here (nav 2)</h3>
<p>Over the past few years, mobile web usage has considerably increased.</p>
</article>
</li>
</ul>
</div>
</div>
CSS:
.slideshow {
margin: 45px auto 0;
width: 318px;
}
.slideshow .slide-wrapper {
width:325px;
padding: 10px;
overflow: hidden;
}
.slideshow ul {
width: 696px;
}
.slideshow .slide {
float: left;
margin-right: 30px;
}
.slideshow .slide article {
background: #fff;
bottom: 0px;
box-shadow: -2px -1px 8px #bbb;
padding: 10px;
width: 298px;
z-index: 5;
}
.controls {
position: relative;
top: 150px;
}
.controls a {
color: #fff;
display: block;
font-size: 36px;
font-weight: bold;
height: 65px;
position: absolute;
text-indent: -9999px;
width: 65px;
}
.controls .prev {
left: -115px;
}
.controls .next {
right: -115px;
}
Many thanks

I would strongly suggest you use some other means to check where you are in your carousel. For instance, you could use the .index from your list instead.
The best way to disable your buttons is by checking the current slide index, and add a disabled class to the control and only animate depending on
Prev: $(".slide").index() > 0
Next: $(".slide").index() < $(".slide-wrapper ul").index() < $(".slide").index()
Here's a JSFiddle example I made for you. There's also a how to create your own plugin that might be good to take into consideration in your project. Just giving you a push in the right direction, good luck!
Here's the code
(function( $ ) {
$.fn.projectCarousel = function(){
var $slides = $(".slide", this),
$current_slide = $(".slide:first-child", this),
$prev = $(".controls a.prev", this),
$next = $(".controls a.next", this);
if($current_slide.index() <= 0) $prev.addClass("disabled");
$prev.click(function(e){
e.preventDefault();
if($current_slide.index() > 0){
if($prev.hasClass("disabled")) $prev.removeClass("disabled");
$(".slide-wrapper ul").animate({ marginLeft: '+=' + $current_slide.outerWidth(true)+ 'px' });
$current_slide = $current_slide.prev();
}
if($current_slide.index() <= 0){
//disable previous
$prev.addClass("disabled");
$next.removeClass("disabled");
}
});
$next.click(function(e){
e.preventDefault();
if($current_slide.index() < $slides.index()){
if($next.hasClass("disabled")) $next.removeClass("disabled");
$(".slide-wrapper ul").animate({ marginLeft: '-=' + $current_slide.outerWidth(true)+ 'px' });
$current_slide = $current_slide.next();
}
if($current_slide.index() >= $slides.index()){
//disable next
$next.addClass("disabled");
$prev.removeClass("disabled");
}
});
}
})( jQuery );
$(".slideshow").projectCarousel();
Array based
Another way is to store each slide element in an array. This approach is very efficient and reliable. The main downside of this approach is that it's a memory hog, but shouldn't be a problem unless you've got alot of slides. It's also very useful, since you can decide which slide # you want to jump to.
An example of an array-based carousel could be done like in this JSFiddle.
Basically, all the animations are contained within one function _to_slide(index) that takes one argument: "Which frame should I animate to?". Since the array is number based, it is more easily managable and controllable.
Here's the code (Including html and css, changed some to accomodate more functions)
Javascript
(function( $ ) {
$.fn.projectCarousel = function(){
var $slides = $(".slide", this),
$current_slide = $(".slide:first-child", this),
$prev = $(".controls a.prev", this),
$next = $(".controls a.next", this);
if($current_slide.index() <= 0) $prev.addClass("disabled");
$prev.click(function(e){
e.preventDefault();
if($current_slide.index() > 0){
if($prev.hasClass("disabled")) $prev.removeClass("disabled");
$(".slide-wrapper ul").animate({ marginLeft: '+=' + $current_slide.outerWidth(true)+ 'px' });
$current_slide = $current_slide.prev();
}
if($current_slide.index() <= 0){
//disable previous
$prev.addClass("disabled");
$next.removeClass("disabled");
}
});
$next.click(function(e){
e.preventDefault();
if($current_slide.index() < $slides.index()){
if($next.hasClass("disabled")) $next.removeClass("disabled");
$(".slide-wrapper ul").animate({ marginLeft: '-=' + $current_slide.outerWidth(true)+ 'px' });
$current_slide = $current_slide.next();
}
if($current_slide.index() >= $slides.index()){
//disable next
$next.addClass("disabled");
$prev.removeClass("disabled");
}
});
}
})( jQuery );
$(".slideshow").projectCarousel();
HTML
<div class="slideshow">
<div class="controls">
<-
-
<input class='select' type='text' value='1' />
+
->
</div>
<div class="slide-wrapper">
<ul>
<li class="slide">
<article>
<h3>Some title here (nav 1)</h3>
<p>Over the past few years, mobile web usage has considerably increased.</p>
</article>
</li>
<li class="slide">
<article>
<h3>Some title here (nav 2)</h3>
<p>Over the past few years, mobile web usage has considerably increased.</p>
</article>
</li>
<li class="slide">
<article>
<h3>Some title here (nav 3)</h3>
<p>Over the past few years, mobile web usage has considerably increased.</p>
</article>
</li>
<li class="slide">
<article>
<h3>Some title here (nav 4)</h3>
<p>Over the past few years, mobile web usage has considerably increased.</p>
</article>
</li>
<li class="slide">
<article>
<h3>Some title here (nav 5)</h3>
<p>Over the past few years, mobile web usage has considerably increased.</p>
</article>
</li>
<li class="slide">
<article>
<h3>Some title here (nav 6)</h3>
<p>Over the past few years, mobile web usage has considerably increased.</p>
</article>
</li>
</ul>
</div>
</div>
CSS
.slideshow {
margin: 45px auto 0;
width: 318px;
}
.slideshow .slide-wrapper {
width:325px;
padding: 10px;
overflow: hidden;
}
.slideshow ul {
width: 2088px;
}
.slideshow .slide {
float: left;
margin-right: 30px;
}
.slideshow .slide article {
background: #fff;
bottom: 0px;
box-shadow: -2px -1px 8px #bbb;
padding: 10px;
width: 298px;
z-index: 5;
}
.controls {
position: relative;
display: block;
overflow: auto;
clear: both;
text-align: center;
}
.controls a {
color: #fff;
display: block;
font-weight: bold;
height: 18px;
width: 18px;
background-color: #000;
text-decoration: none;
text-align: center;
line-height: 16px;
display: inline-block;
}
input.select{
width: 35px;
text-align: center;
}
a.disabled{
cursor: default;
background-color: #d6d6d6;
}
If you're interested in some theory behind the subject, you could read up on them
linked lists vs vectors vs deques.
Even though most of the links are to C++ libraries, the theory is sound for all programming languages.

Rather than unbinding the click, try the following:
if (count === (slide.length - 1)) {
// disable button
thisElm.addClass('disabled');
} else {
thisElm.removeClass('disabled');
}
Then, inside the main .on('click'...) event handler, you'd check for the disabled class before anything else:
$(this.CONTROL).on('click', 'a', function (e) {
var thisElm = $(this);
e.preventDefault();
if (!thisElm.hasClass('disabled'){
//do the rest inside here
}
});

Without a namesapce you need to pass in the function in order to unbind so you either need to make you function into a call back and pass that in as the second arg to unbind Or you can use a namespace like carousel.click and then just unbind that namespace.