jsor / jcarousel

Riding carousels with jQuery.
https://sorgalla.com/jcarousel/
MIT License
2k stars 737 forks source link

JCarousel - How to align last item to left? #844

Open diegosomar opened 4 years ago

diegosomar commented 4 years ago

jCarousel plugin always align the current item to the left side. But, only in the last item, it is aligned to right. It is correctly, because is the last item and has no more content after.

But, in some cases, when the wrapper is small, is better to align the last item to the left too.

See the fiddle: https://jsfiddle.net/d48oqxyj/

Items 1 to 5 is touching the red border. But, item 6 is touching the green border, because is the last.

There's a way to make the last item to touch the red border? With this solution, after the last item we got a white space.

I tried to add a 'fake item' after the last item, but is not a good solution. Perhaps there's other much better.

My current code is (fiddle above):

HTML

<div class="wrapper">
    <div class="jcarousel">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>

    <a class="jcarousel-prev" href="#">Prev</a>
    <a class="jcarousel-next" href="#">Next</a>
</div>

JS

$(function() {
    var carousel = $('.jcarousel').jcarousel({

    });

    $('.jcarousel-prev').jcarouselControl({
        target: '-=1',
        carousel: carousel
    });

    $('.jcarousel-next').jcarouselControl({
        target: '+=1',
        carousel: carousel
    });
});