Multiple swiper instances

General Tech Bugs & Fixes 2 years ago

0 1 0 0 0 tuteeHUB earn credit +10 pts

5 Star Rating 1 Rating

Posted on 16 Aug 2022, this text provides information on Bugs & Fixes related to General Tech. Please note that while accuracy is prioritized, the data presented might not be entirely correct or up-to-date. This information is offered for general knowledge and informational purposes only, and should not be considered as a substitute for professional advice.

Take Quiz To Earn Credits!

Turn Your Knowledge into Earnings.

tuteehub_quiz

Answers (1)

Post Answer
profilepic.png
manpreet Tuteehub forum best answer Best Answer 2 years ago

 

I'm using swiper to create a little logos slider. I've readed the doc about how to instance multiple times swiper, the slider will be loaded, but I have a problem with a multiple group slider. It will not work as expected, I think that this is related to the face that I've two instance of swiper inside the page. Here is the code,Can anyone help me to find a fix for this issue?

php
$args = array(
'post_type' => 'post',
'name' => 'loghi clienti'
);
$logo_img = new WP_Query( $args );
?>
 class="row" style="margin-top:1em;margin-bottom:1em;">
php if( $logo_img->have_posts() ): while( $logo_img->have_posts() ): $logo_img->the_post();
$logo_gallery = get_post_gallery_images( $post->ID );
if( $logo_gallery ): ?>
 class="swiper-container logos" id="clients-logo-slider">
   class="swiper-wrapper" id="client-logo-wrapper">
php  foreach($logo_gallery as $logo ): ?>
    php echo $logo; ?>" alt="" width="100" id="client-logo"/>
php endforeach; ?>
php endif; ?>
  
php endwhile; ?> php endif; wp_reset_postdata(); ?>
<script type="text/javascript"> (function($){ $(document).ready(function(){ var swiper = new Swiper('.logos', { slidesPerView: 3, spaceBetween: 30, slidesPerGroup: 3, loop: true, loopFillGroupWithBlank: true // pagination: { // el: '.swiper-pagination', // clickable: true, // }, // navigation: { // nextEl: '.swiper-button-next', // prevEl: '.swiper-button-prev', // }, }); }); }(jQuery)); script>
0 views
0 shares

No matter what stage you're at in your education or career, TuteeHub will help you reach the next level that you're aiming for. Simply,Choose a subject/topic and get started in self-paced practice sessions to improve your knowledge and scores.

Important General Tech Links