Форум

hujak_hujak · #1 (**permalink**) 15.08.2016, 15:54

Здравствуйте, помогите пожалуйста с каруселью, бьюсь уже 3й день с элементарной задачкой.
Вот мой код: https://jsfiddle.net/fr50zxez/14/
В рабочем варианте он завершен, кроме функции resize.
Собственно проблема:
Хочу чтобы карусель корректно отображалась при уменьшении/ увеличении ширины страницы.

Отталкиваюсь от этого: если страница, допустим, увеличилась на 200px, то и лефт должен увеличится на 200.
Вот мой код:

resize: function () {
        for (var i = 0; i<= slider.imgs.length - 1; i++) {
            slider.imgs.eq(i).css('left', slider.getLeft(i) +(slider.getWidth() - slider.startWidth))
        } // Это функция только на увеличение, экрана
    }

Тут я вычисляю текущий лефт и добавляю к нему разницу между первоначальной шириной и текущей шириной, но это не работает.
Я уверен, что что то нужно добавить в метод getLeft, но не могу допереть что

рони · #2 (**permalink**) 15.08.2016, 16:23

hujak_hujak,

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    #slider{
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.img{
    position: absolute;
    width: 100%;
    height: 400px;
    left: 100%;
}
.img:nth-of-type(1){
    background-color: green;

}
.img:nth-of-type(2){
    background-color: grey;
}
.img:nth-of-type(3){
    background-color: darkcyan;
}
.img:nth-of-type(4){
    background-color: darkkhaki;
}
.active{
    left:0;
}

#butRight,#butLeft{
    z-index: 200;
    position: absolute;
    top:200px;
    width: 40px;
    height: 40px;
    background-color: yellow;
}
#butRight{
    right: 5px;
}
#butLeft{
    left: 5px;
}
  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(window).load(function() {
    var item = $(".img"),
        i = 0,
        len = item.length;
    $("#butRight, #butLeft").on("click", function(event) {
        event.preventDefault();
        i += this.id == "butRight" ? 1 : -1;
        i == -1 && (i = len - 1);
        i == len && (i = 0);
        item.removeClass("active").eq(i).addClass("active")
    })
});
</script>


</head>

<body>

<body>
<div id="slider">
    <a href="" id="butRight"></a>
    <a href="" id="butLeft"></a>
    <div class="img active"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
</div>
</body>


</body>

</html>

hujak_hujak · #3 (**permalink**) 15.08.2016, 16:31

К сожалению это не работает

рони · #4 (**permalink**) 15.08.2016, 16:34

Сообщение от hujak_hujak

К сожалению это не работает

что не работает?

hujak_hujak · #5 (**permalink**) 15.08.2016, 16:51

http://s018.radikal.ru/i514/1608/88/e2fae2823e23.png

https://jsfiddle.net/fr50zxez/25/

рони · #6 (**permalink**) 15.08.2016, 17:11

hujak_hujak,
не понимаю

hujak_hujak · #7 (**permalink**) 15.08.2016, 17:25

Я наверно криво сформулировал вопрос.

Цель - добиться, что бы при изменении ширины экрана, видна было только 1 картинка. То есть получается, если я увеличу экран на 100px, активный слайдер остается с left: 0 и width:100%, а остальные 3 получают + 100px к left, чтобы не залезать на активный, а на скрине в прошлом ответе, там видно аж 3 картинки одновременно.

рони · #8 (**permalink**) 15.08.2016, 17:50

hujak_hujak,
именно так и работает код во втором посте, виден только один блок при любой ширине

hujak_hujak · #9 (**permalink**) 15.08.2016, 18:15

Я же выслал скрин, там сразу 3 блока видно. Как он может работать?

hujak_hujak · #10 (**permalink**) 15.08.2016, 18:23

Ладно, я еще раз очень внимательно все сделаю, отпишу

Форум

Справочник

Discord чат

Курсы javascript