0

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;
}
2
Contributors
1
Reply
6
Views
3 Years
Discussion Span
Last Post by iamthwee
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.