Hero Carousel Auto Navigation

Question

I have a carousel Item Implemented by some one in a Webcenter Portal. I have the HTML code, CSS file of it and the JS.

The issue I have now occurs when the carousel has 5 Images and is auto sliding. Wait for the carousel to get to the fifth item and watch it scroll back to the first one. When it scrolls back, it cycles through all the Images rather than directly going to first.

The expected behavior is that it has to scroll from the 5th slide directly to 1st slide. I have no much experience with this particular JS and I would like to know where exactly I need to check for this particular behaviour and where exactly to do the changes.

How could we tell you without seeing **any** code? Please provide the code and even better would be to give us a working demo on [JsFiddle](http://jsfiddle.net/). — Ruddy, Jul 17 '14 at 07:35

Prashant Tapase · Answer 1 · 2014-07-17T08:01:51.227

Your question is simple. After 5 th slide next slide should be 1 st with continuation. Now it goes to 1 st but with reverse order and then cont. normally.

In this code you will get your solution.

Please try this code. jsfiddle

jquery code

  $('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);
});

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>
                   <li>
                    <img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-1.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;
}

Hero Carousel Auto Navigation

1 Answers1