CODEWITHSUNDEEP
javascriptjqueryhtmlcsscarousel
Lemon Kazi
Lemon Kazi

Reputation: 3311

column based carousel without javascript need to create loop

I am trying to create a carousel using JavaScript or jquery. Here I tried with below snippet. But not able to do it in 3 or 4 columns. I know bootstrap can do it easily but here I want to do it without using bootstrap plugin. Here carousel working but loop not working.

var container = $("#carousel_wrapper");
    
    var runner = container.find('ul');
    var liWidth = runner.find('li:first').outerWidth();
    var itemsPerPage = 3;
    var noofitems = runner.find('li').length;
    
    runner.width(noofitems * liWidth);
    container.width(itemsPerPage*liWidth);

    $('#right').click(function() {
        $( runner ).animate({ "left": "-=51px" }, "slow" );
    });
    
    
    $('#left').click(function() {
        $( runner ).animate({ "left": "+=51px" }, "slow" );
    });
div#carousel_wrapper{

    overflow:hidden;
    position:relative;
    width:500px;
    height: 100px;
}

ul {
    padding:0px;
    margin:0px;
    position: absolute;
    top:50px;
    left: 0px;
    width:300px;
    height: 50px;
    overflow: hidden;
}
ul li {
    list-style:none;
    float:left;
}
ul li div {
    border:1px solid white;
    width:50px;
    height:50px;
    background-color:gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="carousel_wrapper">
    <ul>
        <li>
            <div>0</div>
        </li>
        <li>
            <div>1</div>
        </li>
        <li>
            <div>2</div>
        </li>
        <li>
            <div>3</div>
        </li>
        <li>
            <div>4</div>
        </li>
        <li>
            <div>5</div>
        </li>
        <li>
            <div>6</div>
        </li>
        <li>
            <div>7</div>
        </li>
    </ul>
</div>

<div id="buttons">
    <button id="left">left</button>
    <button id="right">right</button>
</div>

http://jsfiddle.net/lemonkazi/kj87Lb3b/

Upvotes: 0

Views: 99

Answers (1)

user5529144
user5529144

Reputation:

I see no reason to reinvent the wheel. Several plugins already do what you want, a number are really lightweight and some are really good.

I would recommend Owl Carousel 2, it supports loops, dynamic widths, touch events, and much more.

In case you still want to create your own, I would not use any fixed values when calculating the wrapper's position:

$(runner).animate({ "left": "-=" + <li real outer width> + "px" }, "slow" );

You are already forgetting that while your element has 50px of width, it has both the left and right borders 1px wide, so it would be "-=52px" instead of "-=51px" already. Just inspect the element's outer width on execution.

For the loop part, you would need to do a check of some kind on the wrapper's position relative to its width. Something like

$('#right').click(function() {
    var width = $(~last visible <li>~).outerWidth(); // ~*~ is pseudo-code
    var $runner = $(runner);
    var left = $runner.prop('left') + width < $runner.width()
                 ? "-=" + width + "px"
                 : "0px";

    $runner.animate({ "left": left }, "slow" );
});

And that doesn't even account for positioning <li> number 0 and 1 aside number 7 when it's the only one visible - it'll just show 7 by itself, then reset back to 0.

Visually: [5,6,7] -> [6,7,-] -> [7,-,-] -> [0,1,2]

Again, I would strongly recommend against going through the hassle and using an already proven carousel plugin instead ;D

Upvotes: 1

Related Questions