Hello everyone. There are several sliders on the site ( owl-carousel ) and my owl-config file on js duplicates the configuration objects of the same type.

I want to use merge objects, please help and merge all objects more compactly if there are several ways to show them, I will also be happy. But it is desirable to use merging objects first because I teach them and I need to understand the answers if they are with comments I will be very happy.

The harder the written decisions the better

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

My attempt to make

 $(".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 answer 1

    If we already use jQuery, then you can use the features of $ .each and $ .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) ) }) }) })()

    Here is a short CodePen example .

    • thanks a pity there is no merging of objects = ( - Demon __ ANT
    • jQuery gives a ready-made solution, you can see its source code for training. The solution is stable and works as it should. - diproart