Hi,
I am trying to create a jquery slider with navigation button and arrows, but my slider is not stopping at the last image nor stopping at the first image.
See my fiddle for an example: http://jsfiddle.net/c2mKp/
Any help is welcomed.
HTML:
<!-- Jquery Slider -->
<div class="jquery-slider">
<div class="wrap">
<div id="slider-1" class="slider">
<img class="slider-image" src="http://www.camprefugeinc.org/test/slider/slider-image-1.jpg"/>
</div>
<div id="slider-2" class="slider">
<img class="slider-image" src="http://www.camprefugeinc.org/test/slider/slider-image-2.jpg"/>
</div>
<div id="slider-3" class="slider">
<img class="slider-image" src="http://www.camprefugeinc.org/test/slider/slider-image-3.jpg"/>
</div>
<div id="slider-4" class="slider">
<img class="slider-image" src="http://www.camprefugeinc.org/test/slider/slider-image-4.jpg"/>
</div>
</div>
</div>
<!-- Jquery Slider Buttons/CTA/Copy Overlay -->
<div class="slider-overlays">
<div class="jquery-slider-btns">
<img src="http://www.camprefugeinc.org/test/btn/prev-btn.png" class="button-prev prev btns">
<img src="http://www.camprefugeinc.org/test/btn/next-hover-btn.png" class="button-next cursor next btns">
</div>
<div class="slider-text-overlay" id="text-overlay-1">
<div class="text-bgcolor">Welcome to the MLT Vacations
<br />Marketing Hub: Your one stop shop
<br />for marketing tools to build your business! </div>
<div class="jquery-slider-cta">
<div class="cta-text">LEARN MORE</div>
<img src="http://www.camprefugeinc.org/test/btn/jquery-cta-btn.png">
</div>
</div>
<div class="slider-text-overlay" id="text-overlay-2" style="display:none;">
<div class="text-bgcolor">Welcome to the MLT Vacations
<br />Marketing Hub: Your one stop shop
<br />for marketing tools to build your business! </div>
<div class="jquery-slider-cta"></div>
</div>
<div class="slider-text-overlay" id="text-overlay-3" style="display:none;">
<div class="text-bgcolor">Welcome to the MLT Vacations
<br />Marketing Hub: Your one stop shop
<br />for marketing tools to build your business! </div>
<div class="jquery-slider-cta"></div>
</div>
<div class="slider-text-overlay" id="text-overlay-4" style="display:none;">
<div class="text-bgcolor">Welcome to the MLT Vacations
<br />Marketing Hub: Your one stop shop
<br />for marketing tools to build your business! </div>
<div class="jquery-slider-cta"></div>
</div>
<div class="jquery-slider-nav-circles"></div>
<div class="clear-left"></div>
</div>
JQUERY:
// JavaScript Document
$(document).ready(function(){
//Slider Animation
$('.button-next').click(function(){
//Animate the images to next slide
$('.slider').animate({"left": "-=865"}, 500);
});
$('.button-prev').click(function(){
//Animate the image to previous slide
$('.slider').animate({"left": "+=865"}, 500);
});
});
CSS:
/* Jquery Slider */
.jquery-slider {
height: 285px;
width:865px;
position: absolute;
z-index: 1;
overflow: hidden;
}
.slider-text-overlay {
width:439px;
float:left;
position:absolute;
z-index:3;
margin-top:108px;
margin-left:82px;
color:#FFFFFF;
font-size:15pt;
}
.text-bgcolor {
display:inline;
background-color:#000000;
color:#fff;
padding:2px 5px 5px 0px;
line-height:18pt;
}
.jquery-slider-btns {
width:82px;
float:left;
position:absolute;
z-index:3;
margin-top:112px;
}
.jquery-slider-cta {
padding: 20px 0px 0px 174px;
}
.cta-text {
position:absolute;
z-index:3;
text-transform:uppercase;
font-size: 9pt;
width:105px;
text-align:center;
padding-top:8px;
}
.jquery-slider-nav-circles {
width: 231px;
padding-left:113px;
float:left;
position:absolute;
z-index:3;
margin-top:261px;
}
.slider {
width:865px;
float:left;
position:relative;
}
.slider-overlays {
width:865px;
position:absolute;
z-index:2;
}
.next {
margin-left:-5px;
}
.cursor {
cursor:pointer;
}
.wrap {
width: 3460px;
}