Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 31.05.2019, 18:55
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от рони
а как же это https://idangero.us/swiper/api/#keyboard?
О, спасибо за такую прекрасную ссылку, а то тот плагин для jQuery с кучей проблем.
Что, это очень сложно построить слайдер, который бы не ломался, когда мышь уводят за его пределы и отпускают? Сотни настроек предлагают, а основной функционал слайдера не могут нормально сделать!

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

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

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

Сообщение от Malleys Посмотреть сообщение
О, спасибо за такую прекрасную ссылку, а то тот плагин для jQuery с кучей проблем. Что, это очень сложно построить слайдер, который бы не ломался, когда мышь уводят за его пределы и отпускают?
для меня, к сожалению, пока что, сложно. Разбираюсь с Вашей помощью. Спасибо большое.
Ответить с цитированием
  #15 (permalink)  
Старый 31.05.2019, 19:08
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от DenKuzmin17
для меня, к сожалению, пока что, сложно.
Я имел в виду про авторов этих плагинов...
Ответить с цитированием
  #16 (permalink)  
Старый 31.05.2019, 19:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

Сообщение от Malleys
а основной функционал слайдера не могут нормально сделать!
а что там не так?
Ответить с цитированием
  #18 (permalink)  
Старый 31.05.2019, 19:21
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Давайте по порядку...

Я использовал этот плагин, поскольку он был указан в скрипте автора, в котором поддержки клавиатуры нет! http://labs.rampinteractive.co.uk/to...mos/index.html

Вы, рони, предложили это https://idangero.us/swiper/demos/

В обоих вариантах если нажать мышкой на слайд и увести нажатую мышь вне рамок слайдера, и затем отпустить, то потом когда поводить курсором отпущенной мыши
по слайдеру, то он начнёт вести себя так, как будто мышь зажата.

И позвольте уж тогда мне предложить... вот готовый слайдер, в котором нет таких багов... https://flickity.metafizzy.co/options.html

Сообщение от DenKuzmin17
как задать translateX через проценты? Если вместо value записываю новую переменную percent, перелистывание работает, а перетаскивание нет.
А вам принципиально важно использовать ту библиотеку или можно заменить, а то я ковырялся там 2 часа, но мне таки не удалось добиться желаемого результата из-за того, что библиотека отменяет в слайдере события focus и mousedown

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

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

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<style>
* {
  margin: 0;
  padding: 0;
}
section {
  width: 100%;
  height: 100vh;
  background: #ececec;
}
.block {
  width: 500px;
  height: 100px;
  margin: 10px auto;
}
.slider-box {
  border: 1px solid #909090;
}
.slider {
  transition: 0.5s;
}
.slide {
  display: flex;
  width: 500px;
  height: 100px;
  align-items: center;
  justify-content: center;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
	$(function() {
		$('.slider').flickity({
			prevNextButtons: false,
			pageDots: false
		});
	});
</script>

<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>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
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