滑动滑块忽略自定义设置
Swiper slider ignore custom settings
我想创建一个小的滑动滑块,它会旋转一些带有可滚动水平条的徽标图像。我已经毫无问题地做了类似的事情,但现在我面临着滑块集成的问题。我使用的图像有不同的尺寸,但我想给它们一个固定的宽度和高度 80px。我试图从 css 设置此值,但设置将被忽略,图像将被拉伸到 1280 像素宽度,并且它会在图像之间淡入淡出,我不想要这种行为。我在同一页面上有多个滑动器实例,但我认为这不是问题,因为我已经为出现问题的滑块设置了另一个 class。
这是我正在使用的代码:
<?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;
}
尝试.swiper-slide img { width: 80px!important; height: 80px!important; }
我想创建一个小的滑动滑块,它会旋转一些带有可滚动水平条的徽标图像。我已经毫无问题地做了类似的事情,但现在我面临着滑块集成的问题。我使用的图像有不同的尺寸,但我想给它们一个固定的宽度和高度 80px。我试图从 css 设置此值,但设置将被忽略,图像将被拉伸到 1280 像素宽度,并且它会在图像之间淡入淡出,我不想要这种行为。我在同一页面上有多个滑动器实例,但我认为这不是问题,因为我已经为出现问题的滑块设置了另一个 class。 这是我正在使用的代码:
<?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;
}
尝试.swiper-slide img { width: 80px!important; height: 80px!important; }