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 do you position CSS elements directly under each other?

    How can I set a CSS property on the html element with jQuery?

    How to Change Style of Parent
  • on Hover
  • margin-top set by jQuery makes content jump. How can I make it smoothly animate?

    How to centralise a button div

    How can I center an image with text that follows it using CSS?

    How to customize the size of JCoverFlip?

    How to properly pad an HTML link?

    How to calculate total size of all css,js and html pages separately uing shell script?

    Can User-Agent affect how CSS is rendered on a page?

    Are there limits to how tall/wide CSS Sprite-maps can be?

    How to give the background-image path in CSS?

    how to use static folder in django for css and javascript?

    How to pass a local file name to css-validator.jar?

    How to create shadow in JSF input field

    Yahoo's new blur effect in web mail - How?

    How come bootstrap.min.css looks like commented

    How to make this rounded shape with css [duplicate]

    How to match an element's background colour with 2 semi-transparent element background colours

    How to emulate window title bar in CSS/HTML

    How to style div's so that they don't stack right on top of each other?

    How to apply CSS to list in HTML

    How to create a dropdown menu like google's 'More' button?

    What is the best CSS trick to reduce how much HTML you need?

    How to get Width of html control (in pixel ) from charaters contained by that control

    How to stop an image shrinking on responsive site whilst also keeping it centred

    How to use if else blocks to decide style in Razor?

    How to move an image upwards in html/css

    How does jQuery .fadeTo() work?

    How to add missing browser-specific css declaration properties and prefixes to epub [closed]