Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Owl carousel на мобилках. (https://javascript.ru/forum/events/70851-owl-carousel-na-mobilkakh.html)

breeze125 07.10.2017 12:37

Цитата:

Сообщение от рони (Сообщение 466780)
$(function() {
$(".main-list").on("click","a", function (event) {
 event.preventDefault();
 if($(window).width() > 767){
   var id = $(this).attr('href'),
 top = $(id).offset().top;
 $('body,html').animate({scrollTop: top-50}, 2000);
 }
 else {
   // что вы тут хотите закрыть одному вам известно
 }
 });

});

Я извиняюсь, это немного не то. Тот скрипт, что я привел, работает на dekstope, его трогать не нужно. Мне просто нужно дописать, что если экран меньше 767 и мы кликаем на ссылку меню, то меню slideToggle();. Я просто не могу понять, какое событие отследить, после которого мне нужно сворачивать меню.

Вот я пытаюсь написать, но пока не то

if ($(window).width() > 767) {
            if($(".main-list").on("click", "a", function(event)){
              $('.page-header-contact').slideToggle();
            })
        }

рони 07.10.2017 14:24

breeze125,
:-? что не так?
$(function() {
$(".main-list").on("click","a", function (event) {
 event.preventDefault();
 if($(window).width() > 767){
   var id = $(this).attr('href'),
 top = $(id).offset().top;
 $('body,html').animate({scrollTop: top-50}, 2000);
 }
 else {
   $('.page-header-contact').slideToggle();
 }
 });

});

rikitiki 12.01.2018 17:18

Здравствуйте!
Не могу найти найти карусель похожую на те что используются на главной странице мобильной версии Яндекса. Там информация сплошь построена на этих каруселях. То-есть происходит подгрузка изображений с помощью lazy load и отстствует подгонка изображений к краям блока при остановке, после окончания действия свапа примерно как по ссылкам:
Example 4
Example 2
Здесь край изображения останавливаются не по краю блока, а произвольно, в сответствии с замедлением.
В Owl Carousel Lazy Load используется, но при остановке край изображения совпадает с краем блока:
https://owlcarousel2.github.io/OwlCa.../lazyLoad.html
Можно ли Owl carousel отключить это выравнивание?

рони 12.01.2018 17:32

rikitiki,
не совсем понятно что вам нужно, может
autoWidth:true,
center: true,
loop:true,

rikitiki 12.01.2018 21:20

Благодарю за ответ!
Вот скрины c моего смарта в альбомной и портретной ориентации карусели Яндекса после горизонтального свапа по ним:

--------------------------------------------------------------------------------



После остановки карусели какая-либо симметрия группы изображений относительно центра блока отсутствует. После короткого свапа изображение не "отпружинивает" назад, а при более размашистом свапе не перепрыгивает к краю блока. Если очень медленно передвинуть, то то изображение так остаётся под пальцем, создавая иллюзию, что двигаешь некую бумажную ленту с картинками.
В Owl же карусели, даже если не свапить, а тащить мышкой при коротком, медленном перемещении отпружинивает, при более длительном, перескакивает к краю, но не остаётся на месте при отпускании кнопки. Опять таки, край одной из картинок в конце перемещения или прижимется к краю блока, либо, если задано центрирование, одна из картинок обязательно маячит по центру. Других вариантов в карусели нет.
https://owlcarousel2.github.io/OwlCa...os/center.html
Для сравнения приведу опять ссылку TouchCarousel:
http://dimsemenov.com/plugins/touchc...image-and-text
Она похожа на Яндевскую, но в ней нет lazy load. В ней я очень медленно тащу карусель кнопкой мыши , останавливаюсь, отпускаю кнопку мыши и карусель остаётся на месте, где была остановлена и никуда не прыгает.
Собственно такое поведение TouchCarousel обусловлено (из документации) в настройках этим:

$("#yourCarouselId").touchCarousel({
itemsPerMove: 1, // The number of items to move per arrow click.

snapToItems: false, // Snap to items, based on itemsPerMove.

pagingNav: false, // Enable paging nav. Overrides snapToItems.
// Snap to first item of every group, based on itemsPerMove.

Если их поменять то она станет похожа на Owl carousel:
http://dimsemenov.com/plugins/touchcarousel/

Извините, не знаю как здесь прячутся изображения под спойлер. Сейчас пытаюсь это сделать. Тег spoiler не работает.

рони 12.01.2018 23:04

rikitiki,
попробуйте без center,оставьте только autoWidth:true,

https://owlcarousel2.github.io/OwlCa...autowidth.html

больше пока добавить нечего

рони 12.01.2018 23:15

Цитата:

Сообщение от rikitiki
не знаю как здесь прячутся изображение под спойлер

никак
спрятать можно html и js
https://javascript.ru/formatting

j0hnik 13.01.2018 02:03

Глянул сейчас в апи второй карусели, там не нашел такой опции отключения прилипания, будет либо центр липнуть либо край айтема.
Может взять карусель из ваших примеров и пользоваться ей?


Часовой пояс GMT +3, время: 01:28.