时间戳

首页 > 解决方案 > 滑动滑块忽略自定义设置

css - 滑动滑块忽略自定义设置

问题描述

我想创建一个小的 swiper 滑块，它将使用可滚动的水平条旋转一些徽标图像。我已经做了类似的事情没有问题，但现在我面临着滑块集成的问题。我使用的图像有不同的尺寸，但我想给它们一个固定的宽度和高度 80px。我尝试从 css 设置此值，但设置将被忽略，图像将被拉伸到 1280px 宽度，并且它会在图像之间淡入淡出，我不想要这种行为。我在同一页面上有多个 swiper 实例，但我认为这不是问题，因为我已经为给我问题的滑块设置了另一个类。这是我正在使用的代码：

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

标签： csswordpressswiper

解决方案

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

推荐阅读