移动 div 块

Question

I need make something like slider. But I have problem with jQuery I don't know how right force to move my items. Maybe I make not properly css file and maybe this need change? Help please.

I have html:

<div class="carusel-section">
    <div class="top-indent">
        <div class="carusel-container">
            <div class="arrow-back">
                <img src="img/arrow-back.png" alt="back">
            </div>
            <div class="item item-first"><h4 class="item-text">200x120</h4></div>
            <div class="item"><h4 class="item-text">200x120</h4></div>
            <div class="item"><h4 class="item-text">200x120</h4></div>
            <div class="item"><h4 class="item-text">200x120</h4></div>
            <div class="item"><h4 class="item-text">200x120</h4></div>
            <div class="item"><h4 class="item-text">200x120</h4></div>
            <div class="arrow-forward">
                <img src="img/arrow-forward.png" alt="forward">
            </div>
        </div>
    </div>
</div>

Css:

.carusel-container {
    max-width: 742px;
    margin-left: 5px;
}

    .carusel-container:before {
        width: 40px;
        left: 17px;
    }

    .carusel-container .arrow-back {
        top: 43px;
        left: 28px;
    }

    .carusel-container .item-first {
        margin: 0 0 0 57px;
    }

    .carusel-container .arrow-forward {
        top: 43px;
        right: 12px;
    }

jQuery:

$(".arrow-back").click(function () {
    console.log("BACKKK");
    $(".item").css("margin-left", "-50px");
});

$(".arrow-forward").click(function () {
    console.log("TOWARDDD");
    $(".item").css("margin-right", "-50px");
});

Answer 1

Initially, one element should appear only and all the others should be hidden

On pressing the next button, all the elements should disappear except the next element, and same thing to back button

I recommend you to use this simple code:

HTML Code:

<div id="carousel-container">
        <a href="#" class="control_next">>></a>
        <ul>
            <li>200x120</li>
            <li>200x120</li>
            <li>200x120</li>
            <li>200x120</li>
            <li>200x120</li>
            <li>200x120</li>
        </ul>
        <a href="#" class="control_prev"><<</a>
</div>

CSS Code:

#carousel-container {
    position: relative;
    overflow: hidden;
    margin: 20px auto 0 auto;
    border-radius: 4px;
}
#carousel-container ul {
    position: relative;
    margin: 0;
    padding: 0;
    height: 200px;
    list-style: none;
}
#carousel-container ul li {
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 500px;
    height: 300px;
    background: #ccc;
    text-align: center;
    line-height: 300px;
}
a.control_prev,
a.control_next {
    position: absolute;
    top: 40%;
    z-index: 999;
    display: block;
    padding: 4% 3%;
    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 Code:

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

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

    $('#carousel-container').css({ width: slideWidth, height: slideHeight });

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

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

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

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

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

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

});  

Check it out.