gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 13:59:39 25 4
gpt4 key购买 nike

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

<?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;高度:80px!重要; }

关于css - 滑动 slider 忽略自定义设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57942021/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com