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 11:04

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');

рони 07.10.2017 11:34

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

breeze125 07.10.2017 11:36

Цитата:

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

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

рони 07.10.2017 11:48

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

breeze125 07.10.2017 11:53

Цитата:

Сообщение от рони (Сообщение 466775)
breeze125,
как то так ... если не сработает, читайте документацию (алгоритм верный, возможно синтаксис иной).
$(function() {
$(window).on('resize', function(){
 if($(window).width() <= 767) {
 $('.doc-block').owlCarousel();
 }
 else {
 var owlCarousel = $('.doc-block').data('owlCarousel');
 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');

рони 07.10.2017 12:00

Цитата:

Сообщение от breeze125
буду пробовать

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

рони 07.10.2017 12:02

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

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


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

breeze125 07.10.2017 12:04

Цитата:

Сообщение от рони (Сообщение 466778)
breeze125,
Пожалуйста, отформатируйте свой код!

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


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

Поправил код

рони 07.10.2017 12:06

Цитата:

Сообщение от 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 {
   // что вы тут хотите закрыть одному вам известно
 }
 });

});

breeze125 07.10.2017 12:14

Цитата:

Сообщение от рони (Сообщение 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 {
   // что вы тут хотите закрыть одному вам известно
 }
 });

});

спасибо


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