Owl carousel на мобилках.
 

Написал скрипт, чтобы owl-carousel подключалась только на мобилках. Работает нормально, но только если заходить сразу с мобилки, если делать resize окна, то не реагирует ? подскажите почему ?

$(window).on('resize', function(){
if($(window).width() <= 767) {
$('.doc-block').addClass('owl-carousel');
}
else {
$('.doc-block').removeClass('owl-carousel');
}
}).trigger('resize');

breeze125,
потому что owl-carousel проверяет наличие класса 'owl-carousel', только при загрузке страницы, и removeClass('owl-carousel'); никак не повлияет на отмену слайдера.

Подскажите, а это можно как-то реализовать ? чтобы работало даже при resize окна ? В самом плагине не нашел возможности включать карусель только на нужных разрешениях

breeze125,
как то так ... если не сработает, читайте документацию (алгоритм верный, возможно синтаксис иной).

$(function() {
$(window).on('resize', function(){
var owlCarousel = $('.doc-block').data('owlCarousel');
 if($(window).width() <= 767) {
 !owlCarousel && $('.doc-block').owlCarousel();
 }
 else {
 owlCarousel && owlCarousel.destroy();
 }
 }).trigger('resize');
});

Спасибо, сейчас буду пробовать.

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

$(".main-list").on("click","a", function (event) {
    event.preventDefault();
    var id  = $(this).attr('href'),
        top = $(id).offset().top;
    $('body,html').animate({scrollTop: top-50}, 2000);
  });

Я написал уже скрипт по отслеживанию, ширину браузера, помогите дополнить пожалуйста ?

$(window).on('resize', function(){
      if($(window).width() <= 767) {
      $('.main-list a').
      }
      }).trigger('resize');

скопируйте снова

breeze125,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Поправил код

$(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();
            })
        }

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();
 }
 });

});

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

rikitiki,
не совсем понятно что вам нужно, может

autoWidth:true,
center: true,
loop:true,

Благодарю за ответ!
Вот скрины 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 не работает.

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

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

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

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

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