CODEWITHSUNDEEP
jquerycss
DineshS
DineshS

Reputation: 13

Issue with JQuery slider

I have made a slider using Jquery which functions properly but as soon as it gets to the last slide it does not slide over to the first one, instead it just instantaneously displays the first slide. Also it does not stay on the last slide even for a second.

JSfiddle for slider

HTML:

<body>
    <div id="container">
        <div id="header">
            <h3>J-Slider</h3>
        </div>
        <div class="slider">
            <ul>
                <li>
                    <img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-1.jpg">
                </li>
                <li>
                    <img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-13.jpg">
                </li>
                <li>
                    <img width="750px" height="400px" src="http://th08.deviantart.net/fs70/PRE/f/2014/071/5/5/blue_space_by_whendell-d79zabi.jpg">
                </li>
            </ul>
        </div>
    </div>
</body>

CSS:

body {
    font-family:Gerogia;
    font-size:15px;
}
#container {
    width:930px;
    margin:50px auto 10px auto;
    border-left:#666 solid 3px;
    border-right:#666 solid 3px;
    background:#f5f5f5;
    padding:20px 30px;
}
#header {
    padding:10px 0;
    border-bottom:#ccc solid 1px;
    overflow:hidden;
    text-align:center;
}
h3 {
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.slider {
    width: 750px;
    height: 400px;
    padding-top: 10px;
    margin-left: 75px;
    overflow: hidden;
}
.slider ul {
    width:8000px;
    list-style-type:none;
}
.slider li {
    float: left;
}

JQuery:

$('document').ready(function () {
    var width = 750;
    var animationSpeed = 1000;
    var pause = 3000;
    var currentSlide = 1;

    var $slider = $('.slider');
    var $slideContainer = $slider.find('ul');
    var $slides = $slideContainer.find('li');

    setInterval(function () {
        $slideContainer.animate({
            'margin-left': '-=' + width + 'px'
        }, animationSpeed, function () {
            currentSlide++;
            if (currentSlide === $slides.length) {
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
            }
        });
    }, pause);
});

Upvotes: -1

Views: 171

Answers (4)

Prashant Tapase
Prashant Tapase

Reputation: 2147

Please check jsfiddle code. or below code

Maybe your solution.

$('document').ready(function () {
var width = 750;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;

var $slider = $('.slider');
var $slideContainer = $slider.find('ul');
var $slides = $slideContainer.find('li');

setInterval(function () {
    $slideContainer.animate({
        'margin-left': '-=' + width + 'px'
    }, animationSpeed, function () {
        currentSlide++;
        if (currentSlide === $slides.length) {
            currentSlide = 1;
            //$slideContainer.css('margin-left', 0);
            $slideContainer.animate({ 'margin-left': 0  


 }, pause ); 
                }
            });
        }, pause);
    });

Upvotes: 0

Steven
Steven

Reputation: 1494

I changed your code a bit, I put a copy of the first element at the last position, and modified your code a bit

$('document').ready(function () {
    var width = 750;
    var animationSpeed = 1000;
    var pause = 3000;
    var currentSlide = 1;

    var $slider = $('.slider');
    var $slideContainer = $slider.find('ul');
    var $slides = $slideContainer.find('li');

    setInterval(function () {
        $slideContainer.animate({
            'margin-left': '-=' + width + 'px'
        }, animationSpeed, function () {
            currentSlide++;
            if (currentSlide >= $slides.length) {
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
            }
        });
    }, pause);
});

Change

if (currentSlide === $slides.length)

To:

if (currentSlide >= $slides.length)

An example : jsFiddle

Update: Issue with image border on the left

To make it all work I modified your css (put left margin of UL to 0px)

.slider ul {
    width:8000px;
    list-style-type:none;
    padding-left: 0px
 }

Updated jsFiddle : jsFiddle

Upvotes: 2

Lucas
Lucas

Reputation: 106

I am not a pro in Javascript but i think i figured your problem.

When you animate you do currentSlide++, and just after you do the check (currentSlide ==$slides), so you iterate your currentSlide and just after you tell him to change to the first. As said mmseasor just before put it after.

For your not returning back problem is because on the action in the if loop you forgot to animate slideContainer, so it just displays.

Upvotes: 0

mmeasor
mmeasor

Reputation: 458

try changing how and when you increment the slides, and when you reset it back to one. in your current js, you increment to the last slide, then tell it to go back to one right away

$('document').ready(function () {
    var width = 750;
    var animationSpeed = 1000;
    var pause = 3000;
    var currentSlide = 1;

    var $slider = $('.slider');
    var $slideContainer = $slider.find('ul');
    var $slides = $slideContainer.find('li');

    setInterval(function () {
    $slideContainer.animate({
        'margin-left': '-=' + width + 'px'
    }, animationSpeed, function () {
        if (currentSlide === $slides.length) {
            currentSlide = 1;
            $slideContainer.css('margin-left', 0);
        } else {
            currentSlide++; // move this down here
        }
    });
}, pause);
});

Upvotes: 0

Related Questions