Форум

Rimako · #1 (**permalink**) 22.07.2017, 13:02

Есть слайдер, с помощью которого можно листать слайды влево и вправо. Пыталась сделать так, чтобы можно было листать и по конкретным слайдам. (В данном случае их всего два)
+ чтобы при "листании" вправо или влево отмечалось на каком слайде находимся с помощью класса .block-pancakes-indicators__item_active
Но у меня ничего не выходило. Прошу помочь, так как в первый раз делаю такого видела слайдер.
https://jsfiddle.net/91py1awo/

рони · #2 (**permalink**) 22.07.2017, 17:47

Rimako,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  <style type="text/css">
    .block-pancakes__arrow-left, .block-pancakes__arrow-right {
    cursor: pointer;
}

.block-pancakes__arrow-left, .block-pancakes__arrow-right {
    vertical-align: middle;
    height: 110px;
}

.block-pancakes__arrow-left, .block-pancakes__arrow-right, .block-pancakes__slider-img {
    display: inline-block;
}

.block-pancakes__slider-wrapper {
    display: inline-block;
    width: 360px;
    overflow: hidden;
    position: relative;
    height: 90px;
    margin: 0 auto;
}

.block-pancakes__slider-container {
    width: 740px;
    position: absolute;
}

.block-pancakes__slider-img {
    margin: 0 14px;
}

.block-pancakes__arrow-left, .block-pancakes__arrow-right, .block-pancakes__slider-img {
    display: inline-block;
}

.block-pancakes__slider-img_type_block {
    display: block;
}

.block-pancakes-indicators {
    padding-left: 0;
    list-style: none;
    position: absolute;
    left: 35%;
}

.block-pancakes-indicators__item {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 12px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #5a5751;
    border-radius: 14px;
}

.block-pancakes-indicators__item_active {
    margin: 0 12px 0 0;
    background-color: #dabda6;
}
.block-pancakes__arrow.hide{
  display: none;
}
  </style>

  <title></title>
<script>

$(function() {
    var $container = $(".block-pancakes__slider-container"),
        $arrow = $(".block-pancakes__arrow"),
        i = 0,
        len = 6,
        n = 3,
        $indicators = $(".block-pancakes-indicators__item");

    $indicators.each(function(indx, li) {
        $(li).on("click", function() {
            setIndex(n * indx)
        })
    });

   $arrow.on("click", function(e) {
        var isLeft = $(this).hasClass("block-pancakes__arrow-left");
        i += isLeft ? n : -n;
        i > len - n && (i = len - n);
        i < 0 &&
            (i = 0);
        setIndex(i)
    });

    function setIndex(i) {
        $arrow.removeClass("hide");
        i == 0 && $arrow.eq(1).addClass("hide");
        i == len - n && $arrow.eq(0).addClass("hide");
        $indicators.removeClass("block-pancakes-indicators__item_active")
        .eq(i / n).addClass("block-pancakes-indicators__item_active");
        var left = -i * 120 + "px";
        $container.stop().animate({left: left}, 300)
    }

});

</script>


</head>

<body>
  <div class="block-pancakes__slider">
                        <div class="block-pancakes__arrow block-pancakes__arrow-left">
                            <img src="http://savepic.ru/14972720.png" alt="arrow left" class="block-pancakes__slider-img_type_block">
                        </div>
                        <div class="block-pancakes__slider-wrapper">
                            <div class="block-pancakes__slider-container">

                                <div class="block-pancakes__slider-img">
                                    <img src="http://savepic.ru/14978864.png" alt="pancake 1" class="block-pancakes__slider-img_type_block">
                                </div>
                                <div class="block-pancakes__slider-img">
                                    <img src="http://savepic.ru/14993200.png" alt="pancake 2" class="block-pancakes__slider-img_type_block">
                                </div>
                                <div class="block-pancakes__slider-img">
                                    <img src="http://savepic.ru/14973745.png" alt="pancake 3" class="block-pancakes__slider-img_type_block">
                                </div>
                                <div class="block-pancakes__slider-img">
                                    <img src="http://savepic.ru/14993200.png" alt="pancake 4" class="block-pancakes__slider-img_type_block">
                                </div>
                                <div class="block-pancakes__slider-img">
                                    <img src="http://savepic.ru/14973745.png" alt="pancake 5" class="block-pancakes__slider-img_type_block">
                                </div>
                                <div class="block-pancakes__slider-img">
                                    <img src="http://savepic.ru/14978864.png" alt="pancake 6" class="block-pancakes__slider-img_type_block">
                                </div>
                            </div>
                        </div>
                        <div class="block-pancakes__arrow block-pancakes__arrow-right hide">
                            <img src="http://savepic.ru/14954288.png" alt="arrow left" class="block-pancakes__slider-img_type_block">
                        </div>
                        <ol class="block-pancakes-indicators">
                            <li class="block-pancakes-indicators__item block-pancakes-indicators__item_active"></li>
                            <li class="block-pancakes-indicators__item"></li>
                        </ol>
                    </div>

</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript