Задать вопрос

clavik1312

Комментарии

  • Как сделать каждый блок слайдера независимым друг от друга?

    @clavik1312 Автор вопроса
    Exploding, ты лучший просто, спасибо
    Написано

  • Как сделать каждый блок слайдера независимым друг от друга?

    @clavik1312 Автор вопроса
    HTML:
    <div class="sl-container">
    <div class="view view-after">
        <img src="winter.jpg"/>      
    </div>
    <div class="view view-before">
        <img src="summer.jpg"/>
    </div>
    <div class="dragme"><div class="dr-circle"><i class="fa fa-arrows-h" aria-hidden="true"></i></div></div>
</div>


    CSS:
    .sl-container {
    border: 10px solid #BFE2FF;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    width: 640px;
    height: 420px;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.sl-container .view {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.sl-container .view img {
    width: 640px;
    max-width: 640px;
}
.sl-container .view-before {
    z-index: 100;
}
.sl-container .view-after {
    width: 100px;
    z-index: 200;
}
.sl-container .dragme {
    position: absolute;
    width: 10px;
    height: 100%;
    top: 0px;
    left: 100px;
    background-color: #BFE2FF;
    cursor: pointer;
    z-index: 300;
}
.sl-container .dr-circle {
    position: absolute;
    top: calc(50% - 20px);
    left: -15px;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    text-align: center;
    background-color: #BFE2FF;
    cursor: pointer;
    z-index: 300;
}
.sl-container .dr-circle i {
    line-height: 40px;
    font-size: 20px;
    color: #337AB7;
    font-weight: bold;
}
@media screen and (max-width: 600px) {
    .sl-container {
        width: 320px;
        height: 210px;
    }
    .sl-container .view img {
        width: 320px;
        max-width: 320px;
    }
}


    JS:
    (function($) {
    var $dragMe = $(".dragme"),
    $container = $(".sl-container"),
    $viewAfter = $(".view-after");
    $dragMe.draggable({
        containment: "parent",
        drag: function() {
            $viewAfter.css({
                width : parseFloat($(this).css('left')) + 5
            });
        }
    });
    $container.on("click", function(event) {
        var eventLeft = event.pageX - $container.offset().left - 15;
        animateTo(eventLeft);
    });
    animateTo("50%");
    function animateTo(_left) {
        $dragMe.animate({
            left: _left
        }, 'slow', 'linear');
        $viewAfter.animate({
            width: _left
        }, 'slow', 'linear');
    }
})(jQuery);


    + подключена библиотека jQuery

    в js делаю вот так, но мне кажется что то не то я делаю
    $( ".sl-container" ).each(function() {
   var slider = $(this);
(function($) {
    var $dragMe = $(".dragme"),
    $container = $(".sl-container"),
    $viewAfter = $(".view-after");
    $dragMe.draggable({
        containment: "parent",
        drag: function() {
            $viewAfter.css({
                width : parseFloat($(this).css('left')) + 5
            });
        }
    });
    $container.on("click", function(event) {
        var eventLeft = event.pageX - $container.offset().left - 15;
        animateTo(eventLeft);
    });
    animateTo("50%");
    function animateTo(_left) {
        $dragMe.animate({
            left: _left
        }, 'slow', 'linear');
        $viewAfter.animate({
            width: _left
        }, 'slow', 'linear');
    }
})(jQuery);
});
    Написано

  • Как сделать каждый блок слайдера независимым друг от друга?

    @clavik1312 Автор вопроса
    а если у меня таких слайдеров около 30 ? есть решение по проще ?
    Написано