css slider 5 items in a row

Question

I am working on a slider of thumbnails. I want to show 5 of them at any time, and if the user click on the right or left buttons, they will move of one thumbnail, to show the next one. I've tried to start from another slider that does this for one item at a time, but I'm new to JS and I'm not good enough to fix it. The original code works fine, but the changes I made screwd it up.

Some one can help me fix it? Here the jfiddle with my code: http://jsfiddle.net/aqcktp3q/5/

Here also my source code HTML:

CSS:

.image-menu {
    width:1160px;
    text-align:center;
    margin:0 auto;
    position:relative;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
.image-menu a {
    color: black;
    font-weight:bold;
}
.image-menu a:hover {
    text-decoration:none;
    color:#B22222;
}
.image-menu a img {
    border: 3px solid #FFFFFF;
}
.image-menu a:hover img {
    border: 3px solid #B22222;
}
.image-menu ul {
    padding-left:40px;
}
#project {
    position: relative;
    overflow: hidden;
    margin: 3px auto 0 auto;
    border-radius: 4px;
}
#project ul {
    position: relative;
    margin: 0;
    padding: 0;
    height: 200px;
    list-style: none;
}
#project ul li {
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 170px;
    height: 150px;
    background: #ccc;
    text-align: center;
    /*line-height: 170px;*/
}
#project ul li div {
    width: 170px;
    height: 20px;
    line-height: 20px;
}
a.control_prev, a.control_next {
    position: absolute;
    top: 0%;
    z-index: 999;
    display: block;
    padding: 9% 2%;
    width: auto;
    height: auto;
    background: #2a2a2a;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    opacity: 0.8;
    cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease;
}
a.control_prev {
    border-radius: 0 2px 2px 0;
}
a.control_next {
    right: 0;
    border-radius: 2px 0 0 2px;
}

JS:

jQuery(document).ready(function ($) {

    var slideCount = $('#project ul li').length;
    var slideWidth = $('#project ul li').width();
    var slideHeight = $('#project ul li').height();
    var sliderUlWidth = slideWidth * slideCount;

    $('#project').css({
        width: sliderUlWidth,
        height: slideHeight
    });

    $('#project ul').css({
        width: sliderUlWidth,
        marginLeft: -slideWidth
    });

    $('#project ul li:last-child').prependTo('#project ul');

    function moveLeft() {
        $('#project ul').animate({
            left: +slideWidth
        }, 200, function () {
            $('#project ul li:last-child').prependTo('#project ul');
            $('#project ul').css('left', '');
        });
    };

    function moveRight() {
        $('#project ul').animate({
            left: -slideWidth
        }, 200, function () {
            $('#project ul li:first-child').appendTo('#project ul');
            $('#project ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});

css slider 5 items in a row

Answers (1)

Related Questions