Use different js rules based on screen size

Question

Hello i want to use this slider but i have one problems with it.

My goal is to show only .web class images from my 8 images when my screen have a min-width of 768px and show only .phone class images from my 8 images when my screen have a max-width: 768px.

So when we see 4 images, we come back to the first one.

With my css technique i can see white background from image 5 to 8 instead of seeing background image from 1 to 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>

thanks

UPDATES

I modify my HTML, JS & CSS part but it doesn't work for, here is my modifications:

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

Well most sliders render their content on load and don´t change it afterwards. So you will not have a slider with 4 images when you hide them by css.

I suggest 2 sliders. One for phone and one for web:

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

Edit: Your plugin is not looping through the slider elements (l = $("#cbp-bislideshow-web, #cbp-bislideshow-phone") = 2 Elements) (l.imagesLoaded(function () { = function to initalize one slider) and only create one slider.

I think there are two solutions: 1. Change the slider code for multiple sliders on one page 2. Look for another slider which supports mutliple sliders on one page

Answer 2

Try building two different sliders instead:

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