0

Всем привет .На сайте используетсья несколько слайдера (owl-carousel) и у меня на js файле owl-config дублируетсья обьекты конфигураций одного и того же типа.

Хочу использовать слияние обьектов помогите закончить пожалуйста и обьединить все обьекты компактнее если есть несколько способов покажите их тоже буду рад.Но желательно используя слияние обьектов сначала потому что я их учу и мне надо понять суть ответы если будут с комментариями буду очень рад.

Тем сложнее написанная решения тем лучще

let owl = $(".owl-carousel-one");
let owlTwo = $(".timetable_wrapper");
let owlMaster = $(".master_wrapper")
let owlThree = $(".person-wrapper");
let owlNews = $(".news-carousel");
let owlFour = $(".logo-carousel");
owl.owlCarousel({
    loop:true,
    margin:0,
    nav:true,
    items: 1,
    navigation: true,
    navText: ["<img src='../assets/img/slider-arrow-left.png'><span class='data-text'></span>","<img src='../assets/img/slider-arrow-right.png'><span class='data-text'></span>"]
});



owlTwo.owlCarousel({
    loop:true,
    margin:10,
    nav:false,
    items: 4,
    responsiveClass:true,
    responsive:{
        992: {
            items:4,
            margin:0
        },
        768:{
            items:3
        },
        568: {
            items:2
        },
        0: {
            items: 1,
            margin:0
        }
    }
});
owlMaster.owlCarousel({
    loop:true,
    margin:10,
    nav:false,
    items: 4,
    responsiveClass:true,
    responsive: {
        992: {
            items: 4
        },
        768: {
            items: 3
        },
        568: {
            items: 2
        },
        0: {
            items: 1,
            margin:0
        }
    }
});
owlThree.owlCarousel({
    loop:true,
    margin:0,
    nav:false,
    items: 1,
    dots:true,
    autoPlay: 3000, //Set AutoPlay to 3 seconds
});
owlNews.owlCarousel({
    loop:true,
    margin:50,
    nav:false,
    items: 1,
    dots:true,
    autoPlay: 3000,
})
owlFour.owlCarousel({
    loop:true,
    margin:10,
    nav:false,
    items: 4,
    responsiveClass:true,
    responsive: {
        992: {
            items: 4
        },
        768: {
            items: 3
        },
        568: {
            items: 2
        },
        0: {
            items: 1,
            margin:0
        }
    }
});

Моя попытка сделать

$(".owl-carousel-one").each(function(){
    $(this).owlCarousel({
      loop:true,
        margin:10,
        nav:true,
        navText: [&#x27;next&#x27;,&#x27;prev&#x27;],
        responsive:{
            0:{
                items:1
            },
            600:{
                items:1
            },
            1000:{
                items:1
            }
        }
    });
  });

1 ответ 1

1

Если мы уже используем jQuery, то можно использовать возможности $.each и $.extend

(function(){
  $(function(){
  // общие опции 
  var defaultOptions = {
    loop:true,
    margin:10,
    nav:true
  }

  // "набор" каруселей
  var carousels = [
    {
      // селектор элемента
      el: '.carousel-1',
      // уникальные опции для
      // данного экземпляра
      opts: {
        loop: true
      }
    },
    {
      el: '.carousel-2',
      opts: {
        items: 1,
        autoplay: true
      }
    }
  ]

  // инициализация каждой карусели
  $.each(carousels, function(idx, item){
    // console.log(item.el)
    $(item.el).owlCarousel(
        // "расширение", объединение опций
        $.extend(defaultOptions, item.opts)
      )
    })
  })
})()

Вот небольшой пример на CodePen

2
  • спасибо жаль слияние обьектов нету =(
    – Randall
    16 июл 2018 в 20:52
  • jQuery дает готовое решение, можно посмотреть его исходный код для обучения. Решение стабильное и работающее как надо.
    – diproart
    16 июл 2018 в 21:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.