There are several sliders on the page that are connected with this code with a basic set of options common to all sliders:

var swiperSlider = $('.swiper-container'); swiperSlider.each(function() { var mySwiper = new Swiper(this, { loop: true, nextButton: $(this).parent().find('.swiper-button-next')[0], prevButton: $(this).parent().find('.swiper-button-prev')[0], }) });

Some sliders should have a custom design and elements, such as pagination or a certain number of slides. if you store data about these necessary additional options in date-attributes, for example, how to add them to the objects when iterating?

  • var mydata = data ('param') || 'default_value'; - Jean-Claude

3 answers 3

As a result, there was such a solution:

 var swiperSlider = $('.swiper-container'); swiperSlider.each(function() { var options = $(this).data('options') || {}, $parent = $(this).parent(), swiperDefaults = { loop: true, nextButton: $parent.find('.swiper-button-next')[0], prevButton: $parent.find('.swiper-button-prev')[0], }; var swiperOptions = $.extend(swiperDefaults, options), mySwiper = new Swiper(this, swiperOptions); });

Accordingly, an object with additional options is stored in the date attribute of the slider.

    On php, you can do this:

    Create the file incswiper.php (from the words "include swiper", but it is possible with a different name). In this file we will have the "building blocks" to build different versions of Swiper.

      <?php function GetSwiper($pagename) // вариант с Pagination { echo '<div class="swiper-container">'; GetSwiperContent1($pagename); GetSwiperPagination1($pagename); GetSwiperInit1($pagename); echo '</div>'; } function GetSwiper2($pagename) // вариант без Pagination, например (можно компоновать разные варианты, составные части тоже можно добавить любые, пользуясь Swiper API). { echo '<div class="swiper-container">'; GetSwiperContent2($pagename); // функцию с контентом для Swiper2 по аналогии с первой не составит труда составить, как и функцию инициализации и др. GetSwiperInit2($pagename); echo '</div>'; } function GetSwiperContent1($pagename) { echo '<div class="swiper-wrapper"> <div class="swiper-slide"> <a href="#"> <img src="images/img1.jpg" alt="ALT1"> </a> </div> <div class="swiper-slide"> <a href="#"> <img src="images/img2.jpg" alt="ALT2"> </a> </div> <div class="swiper-slide"> <a href="#"> <img src="images/img3.jpg" alt="ALT3"> </a> </div> <div class="swiper-slide"> <a href="#"> <img src="images/img4" alt="ALT4"> </a> </div> </div>'; } function GetSwiperPagination1($pagename) { echo '<div class="swiper-pagination"></div>'; } function GetSwiperInit1($pagename) { echo '<script src="js/swiper.min.js"></script> <script> var Swiper = new Swiper(\'.swiper-container\', { loop: true, speed: 1200, pagination: \'.swiper-pagination\', paginationClickable: true, effect: \'fade\', // Could be "slide", "fade", "cube", "coverflow" or "flip" autoplay: 6000, autoplayDisableOnInteraction: false }); </script>'; }

    And then in the file where we will connect Swiper, we write the line `include 'inc / incswiper.php';

    And then in the right place we "spit out" the necessary variant of Swiper (Swiper1, 2, 3 ... n - you can assemble these variants as a constructor from bricks). In general, there are a few "nuances" here (for example, a file handler and in the right place to enter the variable pagename), but I didn’t want to post the whole project, but suggest a method. I hope the idea is clear!

    The GetSwiper1 and GetSwiper2 functions are versions of the Swiper assembly, but all other functions are the “building blocks” for them. Swiper options can be collected as many as you want, and you can use your own “building blocks” for each one, but nobody forbids to reuse the same ones, in this case you need to invent a meaningful namespace, otherwise there will be confusion.

    • "We spit", naturally, like this: <? Php function Example () {GetSwiper1 (); echo 'some code ...'; GetSwiper2; echo 'some code ...'; etc. - Alexander K

    You can create a universal slider, with animation and design. Zakopipastit as much as necessary, assigning a unique ID, and then customize.