CODEWITHSUNDEEP
csswordpressswiper.js
jihuuNI
jihuuNI

Reputation: 561

Swiper slider ignore custom settings

I want to create a small swiper slider that will rotate some logo images with a scrollable horizontal bar. I have already done something similar without problems, but now I'm facing a problem with the integration of the slider. The images I'm using have different sizes, but I want to give them a fixed width and height of 80px. I've tried to setup this value from the css but the settings will be ignored, images will be stretched to 1280px width and it will fade in between the images and I don't want this beahviour. I have more than one swiper instance on the same page, but I don't think that this can be a problem because I've setted another class for the slider who are giving me the problem. Here is the code I'm using:

<?php
$args = array(
'post_type' => 'post',
'name' => 'partners'
);
$logo_img = new WP_Query( $args );
?>
<div class="container" id="">
<div 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 ): ?>
<div class="swiper-container partners-slider" id="partners-slider">
  <div class="swiper-wrapper" id="partners-logo-wrapper">
<?php  foreach($logo_gallery as $logo ): ?>
    <img class="swiper-slide partner-logo" src="<?php echo $logo; ?>" alt="" width="80" id="partner-logo"/>
<?php endforeach; ?>
<?php endif; ?>
  </div>
  <div class="swiper-scrollbar"></div>
</div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
</div>

<script type="text/javascript">
    const swiperLogos = new Swiper('.partners-slider',{
      autoplay: {
      delay: 5000,
      },
      slidesPerView: 'auto',
      slidesPerColumnFill: 'row',
      scrollbar: {
        el: '.swiper-scrollbar',
        draggable: true,
      },
    });
</script>

</div>

CSS

#partners-slider{
  height: 80px;
  width: 100%;
  background-color: transparent;
}
.partner-logo{
  height: 80px;
  width: 80px;
}

Upvotes: 1

Views: 1555

Answers (1)

Andrey
Andrey

Reputation: 702

Try .swiper-slide img { width: 80px!important; height: 80px!important; }

Upvotes: 1

Related Questions