画面サイズに応じて異なるjsルールを使用してください

Question

こんにちは私はこれを使用したいsliderしかし、私はそれに1つの問題があります。

私の目標は、私の画面がMAX-を持っているとき、私の画面が768pxの最小幅を持っていると私の8枚の画像からのみドットフォンクラス画像を表示したときにのみ.webクラスに私の8枚の画像からの画像を表示することです幅：768ピクセル。

私たちが4枚の画像を見ると、最初のものに戻ります。私が代わりに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>
 
   
 
  
 
 

 

に1から背景画像を見ての画像5から8に白の背景を見ることができ、私のCSSの技術では

おかげ

UPDATES

私は私のHTMLを変更します、JS & CSSの部分は動作しませんが、ここに私の変更があります：

CSS

/* 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; } } 

JS

var cbpBGSlideshow=(function(){var l=$("#cbp-bislideshow-web, #cbp-bislideshow-phone"),g=l.children("li"),n=g.length,f=$("#cbp-bicontrols"),c={$navPrev:f.find("span.cbp-biprev"),$navNext:f.find("span.cbp-binext"),$navPlayPause:f.find("span.cbp-bipause")},h=0,e,k=true,b=3500;function m(o){l.imagesLoaded(function(){if(Modernizr.backgroundsize){g.each(function(){var p=$(this);p.css("background-image","url("+p.find("img").attr("src")+")")})}else{l.find("img").show()}g.eq(h).css("opacity",1);j();a()})}function j(){c.$navPlayPause.on("click",function(){var o=$(this);if(o.hasClass("cbp-biplay")){o.removeClass("cbp-biplay").addClass("cbp-bipause");a()}else{o.removeClass("cbp-bipause").addClass("cbp-biplay");i()}});c.$navPrev.on("click",function(){d("prev");if(k){a()}});c.$navNext.on("click",function(){d("next");if(k){a()}})}function d(q){var p=g.eq(h);if(q==="next"){h=h<n-1?++h:0}else{if(q==="prev"){h=h>0?--h:n-1}}var o=g.eq(h);p.css("opacity",0);o.css("opacity",1)}function a(){k=true;clearTimeout(e);e=setTimeout(function(){d("next");a()},b)}function i(){k=false;clearTimeout(e)}return{init:m}})(); 

HTML

<div class="container"> 


<div class="main"> 
<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/5.jpg" alt="image05"/></li> 
<li><img src="index/img/6.jpg" alt="image06"/></li> 
<li><img src="index/img/7.jpg" alt="image07"/></li> 
<li><img src="index/img/8.jpg" alt="image08"/></li> 
</ul> 

<div id="cbp-bicontrols" class="cbp-bicontrols"> 
<span class="cbp-binext"></span> 
</div> 

</div> 



</div> 

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 

<script src="index/js/jquery.imagesloaded.min.js"></script> 

<script src="index/js/cbpBGSlideshow.min.js"></script> 

<script>$(function() { cbpBGSlideshow.init(); });</script> 

Answer 1

まあ、ほとんどのスライダーが負荷に自分のコンテンツをレンダリングし、その後、それを変更するドント。だからあなたはCSSでそれらを隠すときに4つの画像を持つスライダを持たないでしょう。

私は2つのスライダーを提案します。携帯電話用とWeb用の1：

<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ウェブ、＃のCBP-bislideshow電話"）= 。 1.変更スライダーコード一方に複数のスライダ用：2つの（1つのスライダをinitalizeするl.imagesLoaded（関数（）{=機能）要素） のみつのスライダを作成

は、私は2つの解決策があると思いますページ 2. 1つのページに複数のスライダをサポートする別のスライダを探します。

Answer 2

代わりに、二つの異なるスライダーを構築してみてください。

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

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

 
<ul id="cbp-bislideshow-phone" class="cbp-bislideshow phone"> 
 
<li class=""><img src="index/img/5.jpg" alt="image05"/></li> 
 
<li class=""><img src="index/img/6.jpg" alt="image06"/></li> 
 
<li class=""><img src="index/img/7.jpg" alt="image07"/></li> 
 
<li class=""><img src="index/img/8.jpg" alt="image08"/></li> 
 
</ul>