How to move a carousel item to the middle when it's clicked in jquery


Tags: javascript,jquery,css,carousel

Problem :

How can I make the carousel center the item I've clicked to the middle? I've looked everywhere for an answer but they're not straight answers... Can someone help me in this, please?

This is what I've done so far: http://jsfiddle.net/sp9Jv/

HTML:

<div id="wrapper">
    <div id="carousel">
        <a href="#" class="prev">prev</a>
        <a href="#" class="next">next</a>

        <div class="viewport">
            <ul>
                <li><a href="#">Un</a></li>
                <li><a href="#">Deux</a></li>
                <li><a href="#">Trois</a></li>
                <li><a href="#">Quatre</a></li>
                <li><a href="#">Cinq</a></li>
                <li><a href="#">Six</a></li>
                <li><a href="#">Sept</a></li>
                <li><a href="#">Huit</a></li>
            </ul>
        </div>
        <!-- viewport -->

    </div>
    <!-- carousel -->
</div>
<!-- wrapper -->

JavaScript:

var carousel = $('#carousel'),
    prev = carousel.find('.prev'),
    next = carousel.find('.next'),
    viewport = carousel.find('.viewport'),
    item = viewport.find('li'),
    itemWidth = item.outerWidth(true),
    itemNum = item.length,
    itemList = viewport.find('ul');

itemList.width(itemWidth * itemNum);

var moveCarousel = function(dir) {
    itemList.animate({ left: '-=' + (itemWidth  * dir) + 'px' }, 400);  
};

//prev
prev.on('click', function(e) {
    e.preventDefault();
    moveCarousel(-1);
});

//next
next.on('click', function(e) {
    e.preventDefault();
    moveCarousel(1);
});

//carousel item
item.on('click', 'a', function(e) {
    var self = $(this),
        selfIndex = self.index(),
        distance = itemList.width() / 2,
        selfPos = self.position(),
        selfPosLeft = selfPos.left,
        viewportPosLeft = viewport.position().left;

    e.preventDefault();

    //move item to middle, but it doesn't work... 
    if (selfPosLeft > Math.floor(viewport.width())/3) {
        itemList.animate({ left: '-' + Math.floor(viewport.width())/3 + 'px' }, 400);
    }

    if (selfPosLeft < Math.floor(viewport.width())/3) {
        itemList.animate({ left: Math.floor(viewport.width())/3 + 'px' }, 400);
    }
});

CSS:

#wrapper {
    width: 500px;
    margin: 20px auto;
}
#carousel {
    position: relative;
}
.viewport {
    width: 260px;
    border: 1px solid #6e6e6e;
    height: 80px;
    overflow: hidden;
    position: relative;
    margin-left: 100px;
}
.prev, .next {
    position: absolute;
}
.prev {
    top: 20px;
    left: 0;
}
.next {
    top: 20px;
    right: 0;
}

.viewport ul {
    position: absolute;
}
.viewport li {
    float: left;
    margin-right: 10px;
}
.viewport li a {
    display: block;
    width: 80px;
    height: 80px;
    background: #ddd;
}


Solution :

While you have prepared all the information needed about all items, you can calculate the value of the left based on the clicked item.

Here is my modification:

and I've bound the click action of carousel items with this function and passed the clicked item using the self keyword.

var itemClicked=function(item){
    var itemIndex=$(item).index(),
        newLeft=(itemIndex*itemWidth*-1)+Math.floor(($(viewport).width()/itemWidth)/2)*itemWidth;
    $(itemList).animate({left:newLeft+"px"},400);
};

You can check it working on this url: http://jsfiddle.net/rUZHg/3/

I assume that this should work despite of the number of viewed elements while it calculates the padding between the left 0 and the left of the center element.


    CSS Howto..

    How to target images with dynamically generated ids with CSS

    How to override position : absolute in css?

    Skeleton CSS - how to span the width of the screen?

    How to set HTML element's margin using percent of page height?

    How to add elements to an specified position without influence of other elements?

    How to use position in CSS?

    How to downsize a larger image while showing only one portion of it in CSS (or adding JS to the mix if necessary)?

    How do I customize an asp:Button class?

    jQuery: How do I target the clicked element when they all share the same CSS class?

    How can I resize an image, added via ajax, to fit within specific dimensions while maintaining aspect ratio using JQuery/CSS?

    Conditional css showing limit items

    CSS bottom bar isn't correctly shown with chrome

    How to arrange the elements of a semicircle in css/html/js

    How to think to get all content inline (HTML & CSS)

    How do I use icons from fontello in my css?

    how to animate icon fa-circle using CSS to look as recording video blinking red dot?

    How to crop image with css

    How can i get bootstrap to alter page CSS instead of lay dormant?

    How do I make effect like this on image hover?

    Link on Link - How to activate JS code without parent link activation?

    How to enable -webkit-animation/transition-property for :before and :after pseudo elements?

    jQuery hide() method do show element with display:none !important

    How to access CSS children properly?

    How can I modify left property after hide an element using JQuery?

    How to let the user choose a page number?

    How can I change my code from PHP to HTML?

    How to change font of default header and footer of print page with css?

    CSS: How to set up border radius cross browser (only IE8 and IE9 missing ?)

    How can I make browser scale image frames according to CSS before loading actual images into frames?

    How to fix this css to conform to all browsers?