swiper如何在PC端和手机端上使用不同的显示效果？
时间：2019-09-07 来源：日喀则市网站建设
醉近在做一个项目，要做一个响应式的网站的时候。
使用了SWIPERR插件来做图片左右滚动的图片，在PC端上显示一行四个。
但是切换到手机的时候，发现显示还是四个。非常别扭。图片变得很窄。
我们先来看一下原始代码：
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background: url(1.jpg) center;"></div> <div class="swiper-slide" style="background: url(1.jpg) center;"></div> <div class="swiper-slide" style="background: url(1.jpg) center;"></div> <div class="swiper-slide" style="background: url(1.jpg) center;"></div> <div class="swiper-slide" style="background: url(1.jpg) center;"></div> <div class="swiper-slide" style="background: url(1.jpg) center;"></div> <div class="swiper-slide" style="background: url(1.jpg) center;"></div> <div class="swiper-slide" style="background: url(1.jpg) center;"></div> <div class="swiper-slide" style="background: url(1.jpg) center;"></div> <div class="swiper-slide" style="background: url(1.jpg) center;"></div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <!-- Initialize Swiper --> <script>
js部分：
<script>
var swiper = new Swiper('.swiper-container', {
autoplay:true,
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
slidesPerView: 4,
spaceBetween: 8,
slidesPerGroup: 1,
loop: true,
loopFillGroupWithBlank: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>这是官方的标准代码。基本上就是这样了。但是出现以上冲突如何解决呢？
我想到的方案是PC端一段代码，手机端一段代码，在PC端上将手机部分隐藏，在手机上将PC端隐藏。分别给它不同的属性。醉后玩美解决了SWIPER在同一页面下使用多个不同的DEMO引起的冲突样式问题。
<div class="pc">
<div class="swiper-container ">
<div class="swiper-wrapper">
{pboot:list scode=21 num=10}
<div class="swiper-slide" style="background: url([list:ico]) center;"></div>
{/pboot:list}
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- Initialize Swiper -->
</div>
</div>
<script>
var swiper = new Swiper('.pc .swiper-container', {
autoplay:true,
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
slidesPerView: 4,
spaceBetween: 8,
slidesPerGroup: 1,
loop: true,
loopFillGroupWithBlank: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
<div class="wap">
<div class="swiper-container">
<div class="swiper-wrapper">
{pboot:list scode=21 num=10}
<div class="swiper-slide" style="background: url([list:ico]) center;"></div>
{/pboot:list}
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.wap .swiper-container', {
autoplay:true,
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
slidesPerView: 1,
spaceBetween: 1,
slidesPerGroup: 1,
loop: true,
loopFillGroupWithBlank: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</div>
</div>
