Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 31.05.2019, 19:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Malleys,
Ответить с цитированием
  #22 (permalink)  
Старый 31.05.2019, 19:55
Интересующийся
Отправить личное сообщение для DenKuzmin17 Посмотреть профиль Найти все сообщения от DenKuzmin17
 
Регистрация: 31.05.2019
Сообщений: 22

Сообщение от Malleys Посмотреть сообщение
А вам принципиально важно использовать ту библиотеку или можно заменить
Не принципиально. Просто начал уже на этом делать. Мне чем проще тем лучше, желательно вообще без плагинов. Попробую потом то, что Вы предлагает выше.

PS transition в процентах с текущим плагином можно реализовать?
Ответить с цитированием
  #23 (permalink)  
Старый 31.05.2019, 20:32
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от DenKuzmin17
PS transition в процентах с текущим плагином можно реализовать?
Да, можно! https://codepen.io/Malleys/pen/byQjOM?editors=0010
Ответить с цитированием
  #24 (permalink)  
Старый 31.05.2019, 21:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064


зачем это
var value = (distance < 0 ? "" : "-") + Math.abs(distance).toString();

вариант без этой строки
scrollImages(distance, duration) {
        this.slider.css("transition-duration", (duration / 1000).toFixed(1) + "s");
        this.slider.css("transform", "translate(" + (100 * -distance / this.maxImages) + "%,0)");
    }
Ответить с цитированием
  #25 (permalink)  
Старый 31.05.2019, 23:45
Интересующийся
Отправить личное сообщение для DenKuzmin17 Посмотреть профиль Найти все сообщения от DenKuzmin17
 
Регистрация: 31.05.2019
Сообщений: 22

this.currentImg + 0.0025 * distance,
          duration
"0.0025" это что?
Ответить с цитированием
  #26 (permalink)  
Старый 01.06.2019, 00:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

вариант ...
if (direction == "left") {
                this.scrollImages(
                    this.currentImg + distance / this.IMG_WIDTH ,
                    duration
                );
            } else if (direction == "right") {
                this.scrollImages(
                    this.currentImg - distance / this.IMG_WIDTH ,
                    duration
                );
            }
Ответить с цитированием
  #27 (permalink)  
Старый 01.06.2019, 00:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

всё в сборе ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Malleys JQuery Touch Slider</title>
<style>
            * {
    margin: 0;
    padding: 0;
}
section {
    width: 100%;
    height: 100vh;
    background: #ececec;
}
.block {
    width: 500px;
    height: 100px;
    margin: 10px auto;
}
.slider-box {
    display: flex;
    overflow: hidden;
    border: 1px solid #909090;
}
.slider {
    display: flex;
    transition: 0.5s;
}
.slide {
    display: flex;
    width: 500px;
    height: 100px;
    align-items: center;
    justify-content: center;
}

/* :focus:hover {
    outline: none;
} */
        </style>

</head>
<body translate="no">
<section>
<div class="block 1">
<div class="slider-box">
<div class="slider">
<div class="slide">1 / 3</div>
<div class="slide">2 / 3</div>
<div class="slide">3 / 3</div>
</div>
</div>
</div>
<hr>
<div class="block 2">
<div class="slider-box">
<div class="slider">
<div class="slide">1 / 4</div>
<div class="slide">2 / 4</div>
<div class="slide">3 / 4</div>
<div class="slide">4 / 4</div>
</div>
</div>
</div>
<hr>
<div class="block 3">
<div class="slider-box">
<div class="slider">
<div class="slide">1 / 2</div>
<div class="slide">2 / 2</div>
</div>
</div>
</div>
<hr>
</section>
<script src='https://profforma.store/assets/js/jquery.min.js'></script>
<script src='https://profforma.store/assets/js/jquery.touchSwipe.min.js'></script>
<script>



class Slider {
    constructor(slider) {
        this.IMG_WIDTH = 500;
        this.currentImg = 0;
        this.speed = 500;

        this.swipeStatus = this.swipeStatus.bind(this);
        this.keyboardHandler = this.keyboardHandler.bind(this);

        this.slider = $(slider);
        this.slider
            .parent()
            .attr("tabIndex", 0)
            .on("blur focus click", this.keyboardHandler)
            .swipe({
                triggerOnTouchEnd: true,
                triggerOnTouchLeave: true,
                swipeStatus: this.swipeStatus,
                allowPageScroll: "vertical",
                threshold: 75
            });
        this.maxImages = this.slider.find(">*").length;
    }

    keyboardHandler(event) {
        if (event.type === "focus") {
            document.addEventListener("keydown", this.keyboardHandler);
            this.constructor.activeInstance = this;
        } else if (event.type === "blur") {
            document.removeEventListener("keydown", this.keyboardHandler);
            this.constructor.activeInstance = null;
        } else if (event.type === "keydown") {
            if (event.keyCode === 37) this.previousImage();
            if (event.keyCode === 39) this.nextImage();
        } else {
            this.slider.parent().focus();
        }

        return true;
    }

    swipeStatus(event, phase, direction, distance) {
        //If we are moving before swipe, and we are going L or R in X mode, or U or D in Y mode then drag.
        if (phase == "move" && (direction == "left" || direction == "right")) {
            var duration = 0;

            if (direction == "left") {
                this.scrollImages(
                    this.currentImg + distance / this.IMG_WIDTH ,
                    duration
                );
            } else if (direction == "right") {
                this.scrollImages(
                    this.currentImg - distance / this.IMG_WIDTH ,
                    duration
                );
            }
        } else if (phase == "cancel") {
            this.scrollImages(this.currentImg, this.speed);
        } else if (phase == "end") {
            if (direction == "right") {
                this.previousImage();
            } else if (direction == "left") {
                this.nextImage();
            }
        }
    }

    scrollImages(distance, duration) {
        this.slider.css({"transition-duration" : (duration / 1000).toFixed(1) + "s",
                         "transform" : "translate(" + (100 * -distance / this.maxImages) + "%,0)"});
    }

    previousImage() {
        this.currentImg = Math.max(this.currentImg - 1, 0);
        this.scrollImages(this.currentImg, this.speed);
    }

    nextImage() {
        this.currentImg = Math.min(this.currentImg + 1, this.maxImages - 1);
        this.scrollImages(this.currentImg, this.speed);
    }
}

$(() => {
    for (const element of $(".slider")) {
        new Slider(element);
    }
});

    </script>
</body>
</html>
Ответить с цитированием
  #28 (permalink)  
Старый 01.06.2019, 15:07
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от DenKuzmin17
"0.0025" это что?
Коэффициент, пропорционально которому сдвигается слайд.

Вот, написал собственную реализацию слайдера без той сторонней библиотеки. https://codepen.io/Malleys/pen/byQjOM?editors=0010 Теперь можно начать перетаскивать слайд и курсор мыши вывести за рамки окна браузера и оно правильно обрабатывается! Что-то не нашёл ни одной библиотеки, которые бы это учитывали.
Ответить с цитированием
  #29 (permalink)  
Старый 01.06.2019, 15:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Malleys,
зачем эта строка?
this.slider[Symbol.for("slider")] = this;

или как это работает?
pointer.addEventListener("start", ({ target }) => {
    Slider.activeElement = (
    target.matches(".slider") && target ||
    target.closest(".slider") ||
    {})[
    Symbol.for("slider")];
});

не понимаю что тут происходит, зачем нужно использовать Symbol.for("slider")?

Последний раз редактировалось рони, 01.06.2019 в 15:57.
Ответить с цитированием
  #30 (permalink)  
Старый 01.06.2019, 16:02
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Цитата:
*Malleys*,
зачем эта строка?
<pre class="source brush:js;light:true">
this.slider[Symbol.for("slider")] = this;
</pre>
Чтобы можно было обратиться к представителю класса Slider через элемент, к которому он привязан. Поскольку я определил только одного представителя SinglePointer, и на нём прослушиваются события start, move, end... то через него можно узнать, на каком элементе типа HTMLElement началось перетаскивание... а свойство Symbol.for("slider") помогает получить ссылку на такой слайдер (объект типа Slider), который был инициализирован тем самым элементом, над которым началось перетаскивание.

Сообщение от рони
не понимаю что тут происходит, зачем нужно использовать Symbol.for("slider")?
Сначала находится ближайший элемент с селектором .slider, а затем берётся ссылка на представителя класса Slider, которым этот элемент был инициализирован!

Последний раз редактировалось Malleys, 01.06.2019 в 16:07.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Handlebars + React.js: как заставить работать? The_Nobody Библиотеки/Тулкиты/Фреймворки 4 29.09.2015 12:24
Как заставить JS обрабатывать функции для всех блоков с заданным классом? GTX14 Общие вопросы Javascript 1 04.04.2015 16:12
Как загрузить и заставить работать скрипт после загрузки frame? Chifu Общие вопросы Javascript 3 13.04.2013 14:18
Как таймер заставить работать поочерёдно вызываю одну и ту же функцию два раза? JavaScriptProgrammer Events/DOM/Window 12 08.11.2012 23:41
Как заставить работать оперу и мозилу? SDone AJAX и COMET 6 25.02.2009 16:05