Question

你好我想使用这个slider，但我有一个问题。

我的目标是，当我的屏幕最小宽度为768像素且仅显示来自我的 .phone类图像时，我的8张图片中仅显示 .web类图像当我的屏幕有最大宽度时，8张图像：768px。

因此，当我们看到4张图片时，我们会回到第一张图片。

使用我的css技术，我可以看到从图像5到8的白色背景，而不是从1到4看到背景图像



@media only screen and (min-width: 768px) {
li.web { display: block; }
li.phone { display: none; }
}

@media only screen and (max-width: 768px) {
li.web { display: none; }
li.phone { display: block; }
}
<ul id="cbp-bislideshow" class="cbp-bislideshow">
  <li class="web"> <img src="https://placehold.it/250x250" alt="image01" /></li>
  <li class="web"> <img src="https://placehold.it/250x250" alt="image02" /></li>
  <li class="web"> <img src="https://placehold.it/250x250" alt="image03" /></li>
  <li class="web"> <img src="https://placehold.it/250x250" alt="image04" /></li>
  <li class="phone"><img src="https://placehold.it/150x150" alt="image05" /></li>
  <li class="phone"><img src="https://placehold.it/150x150" alt="image06" /></li>
  <li class="phone"><img src="https://placehold.it/150x150" alt="image07" /></li>
  <li class="phone"><img src="https://placehold.it/150x150" alt="image08" /></li>
</ul>

感谢

更新

我修改我的HTML，JS＆amp; CSS部分，但它不起作用，这是我的修改：

CSS

@media only screen and (min-width: 768px) {
li.web { display: block; }
li.phone { display: none; }
}

@media only screen and (max-width: 768px) {
li.web { display: none; }
li.phone { display: block; }
}

JS

<ul id="cbp-bislideshow" class="cbp-bislideshow">
  <li class="web"> <img src="https://placehold.it/250x250" alt="image01" /></li>
  <li class="web"> <img src="https://placehold.it/250x250" alt="image02" /></li>
  <li class="web"> <img src="https://placehold.it/250x250" alt="image03" /></li>
  <li class="web"> <img src="https://placehold.it/250x250" alt="image04" /></li>
  <li class="phone"><img src="https://placehold.it/150x150" alt="image05" /></li>
  <li class="phone"><img src="https://placehold.it/150x150" alt="image06" /></li>
  <li class="phone"><img src="https://placehold.it/150x150" alt="image07" /></li>
  <li class="phone"><img src="https://placehold.it/150x150" alt="image08" /></li>
</ul>

HTML

/* Slider */

.cbp-bislideshow.web, 
.cbp-bislideshow.phone
{ list-style: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1; padding: 0; margin: 0; }

.cbp-bislideshow.web li,
.cbp-bislideshow.phone li
{ position: absolute; width: 101%; height: 101%; top: -0.5%; left: -0.5%; opacity: 0; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s; }


.backgroundsize .cbp-bislideshow.web li,
.backgroundsize .cbp-bislideshow.phone li
{ -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center center; }

.backgroundsize.cbp-bislideshow.web li img,
.backgroundsize.cbp-bislideshow.phone li img,
{ display: block; }

.cbp-bislideshow.web li img,
.cbp-bislideshow.phone li img
{ display: none; width: 100%; }

.no-js.no-backgroundsize .cbp-bislideshow.web li:first-child,
.no-js.no-backgroundsize .cbp-bislideshow.phone li:first-child
{ opacity: 1; }

.no-js.backgroundsize .cbp-bislideshow.web li:first-child img,
.no-js.backgroundsize .cbp-bislideshow.phone li:first-child img
{ display: block; }

@media only screen and (min-width: 768px) { .cbp-bislideshow.web   { display:block; } .cbp-bislideshow.phone { display:none; } }

@media only screen and (max-width: 768px) { .cbp-bislideshow.web   { display:none; } .cbp-bislideshow.phone { display:block; } }

Answer 1

大多数滑块都会在加载时渲染其内容，之后不会更改。因此，当您用css隐藏它们时，您将没有带有4个图像的滑块。

我建议使用2个滑块。一个用于电话，一个用于网络：

<ul id="cbp-bislideshow-web" class="cbp-bislideshow web">
 <li>  <img src="index/img/1.jpg" alt="image01"/></li>
 <li>  <img src="index/img/2.jpg" alt="image02"/></li>
 <li>  <img src="index/img/3.jpg" alt="image03"/></li>
 <li>  <img src="index/img/4.jpg" alt="image04"/></li>
</ul>

<ul id="cbp-bislideshow-phone" class="cbp-bislideshow phone">
 <li>  <img src="index/img/1.jpg" alt="image01"/></li>
 <li>  <img src="index/img/2.jpg" alt="image02"/></li>
 <li>  <img src="index/img/3.jpg" alt="image03"/></li>
 <li>  <img src="index/img/4.jpg" alt="image04"/></li>
</ul> 

@media only screen and (min-width: 768px) {
 .cbp-bislideshow.web   { display:block; }
 .cbp-bislideshow.phone { display:none; }
}


@media only screen and (max-width: 768px) {
 .cbp-bislideshow.web   { display:none; }
 .cbp-bislideshow.phone { display:block; }  
}

编辑：您的插件没有循环滑块元素（l = $（“＃cbp-bislideshow-web，＃cbp-bislideshow-phone”）= 2个元素）（l.imagesLoaded（function（）{=初始化一个滑块的功能）并且只创建一个滑块。

我认为有两种解决方案： 1.在一个页面上更改多个滑块的滑块代码 2.寻找另一个在一页上支持多个滑块的滑块

Answer 2

尝试构建两个不同的滑块：

＆＃13;

<arg value="...">

＆＃13;

@media only screen and (min-width: 768px) {
.web   { display:block; }
.phone { display:none; }
}


@media only screen and (max-width: 768px) {
.web   { display:none; }
.phone { display:block; }  
}

＆＃13;

根据屏幕大小使用不同的js规则

2 个答案: