Jump to content
  • 0

jQuery. Бесконечная карусель


VeniVidiVici
 Share

Question

Всем привет.

Начал изучение js и jQuery, написал простенькую тестовую карусель.

Вот код:

http://jsfiddle.net/LOL1/utxmto66/

 

Возникло несколько вопросов:

 

1)  Слайдер работает если дожидаться анимации перехода, но если кликать быстро, контейнер со слайдами просто вылетает за пределы. Как это исправить?

 

2) Допустим, у меня есть функция, с помощью которой слайды периодически переключаются сами(setinterval/settimeout). При клике пользователем на слайды эта функция должна выключаться(это понятно как), но как снова её включить? Т.е. если пользователь не кликает на слайды, то включить функцию. Такого события как "не кликает" нет))) (можно сделать с помощью .mouseleave(), но всё же, это немного не то).

 

3) Как .click() работает на сенсорных мобильных устройствах? Или вообще не работает и нужно использовать дополнительные библиотеки или события из js (touchstar и т.п.).В общем, корректно ли будет работать слайдер на мобильных устройствах?

 

 

 

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Разберитесь сначала с первым пунктом и нужно исправить код.

Я бы алгоритм сделала примерно таким:

1. При клике узнать - идет ли анимация на текущий момент. Если идет, то ничего не делать. Если нет, то запускать анимацию.

2. Запуск анимации. Сообщать, что идет анимация.

3. Двигать первый слайд.

4. После завершения анимации(колбек) восстановить первый слайд в конец контейнера и сообщить что анимация завершена.

  • Like 1
Link to comment
Share on other sites

  • 0

Мда, оказывается есть методы остановки анимации :facepalmxd: .

Работает. Добавил 1 строку в коде.

http://jsfiddle.net/LOL1/utxmto66/10/

1 вопрос снят.

2 и 3 - ещё актуально.

Edited by VeniVidiVici
Link to comment
Share on other sites

  • 0
Сделала бы так: http://jsfiddle.net/wj25qv1r/1/

Ваш вариант намного круче и плавнее моего(

Вроде разобрался.(вариант с таймером пока не смотрел)

 

Честно говоря, я бы сам не смог такую конструкцию написать. Как научиться такое писать? 

Прочитал 1 книгу по js + в справочник заглядываю, 1 книга по jquery + справочник гляжу.

Вчера писал пагинацию для слайдера, но там код примерно такой же примитивный, как в моём первом слайдере(хотя времени убил на это много).

Link to comment
Share on other sites

  • 0
Честно говоря, я бы сам не смог такую конструкцию написать. Как научиться такое писать? 

Только практика.. Вот вы увидели две верии реализации карусели, свой и мой, разобрались во всем этом - это хорошо. Значит нужно дальше писать, выкладывать код и спрашивать.

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By zhuravelda
      Здравствуйте, коллеги!
      Подскажите пожалуйста как лучше реализовать карусель в данном макете. Я имею ввиду, какой самый оптимальный вариант, чистый css, jquery, js, bootstrap?
      Макет прилагаю.
      Спасибо!
       

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy