Please help, the project uses the owl carousel plugin. The situation is such that on some pages it should look different in terms of adaptability. But I ran into a situation where for each 'new' carousel it is necessary to re-initialize it, as a result of which a huge amount of repeating code appears ...

var owl_index = $('#owl-index'); var owl_other = $('#owl-other'); var owl_other2 = $('#owl-other2'); owl_index.owlCarousel({ loop : false, margin : 5, nav : true, navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"], responsiveClass : true, responsive:{ 0:{ items : 1 }, 550:{ items : 2 }, 768:{ items : 3 }, 1200:{ items : 4 } } }) owl_other.owlCarousel({ loop : false, margin : 6, nav : true, navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"], responsiveClass : true, responsive:{ 0:{ items : 1 }, 550:{ items : 2 }, 992:{ items : 3 } } })

I'm afraid to imagine if there will be 10 such merry-go-rounds or even more ... I ask for your help in optimization!

    1 answer 1

    Try this method, for each carousel, write the config directly in the tag, for example:

     <div class='carousel' id='carousel2' data-params='{"loop":false,"margin":5}'></div>

    This works if you save the data correctly in the parameter. Then they can be obtained through jquery

     $('carousel').each(function(){ $(this).owlCarousel($(this).data('params')) });

    The second way. Create a variable

     var owlParams = {loop:false,'margin':5, ... };

    Then, for each carousel, before initializing, change the data in the main variable that is different:

     owlParams.margin = 10; $('.carousel').owlCarousel(owlParams);

    Or you can combine the first with the second, in the tag we write only data that is different from the variable owlParams , then the following:

     $('carousel').each(function(){ $(this).owlCarousel($.extend({}, $(this).data('params'), owlParams)) });
    • Thank! I'll try. - Hochru