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>

Is there CSS on the ul? display none should not leave whitespace. My guess is the slideshow is calculating the width of all the images when it loads. You might need to have it do a recalc when you change it. It is not possible to really help you more than that without knowing more details. — epascarello
– epascarello, Commented Apr 5, 2017 at 13:24
Build two completely separate sliders, and hide one or the other instead of hiding the individual images. — Blazemonger
– Blazemonger, Commented Apr 5, 2017 at 13:27
i tried to duplicate the sliders and hide one by one, but no luck, perhaps i did it wrong ? — faty fatoumata
– faty fatoumata, Commented Apr 5, 2017 at 13:28
@fatyfatoumata I moved your code into a snippet so you can demonstrate the issue. I replaced the images with linked images so you can see the results. It looks like it is doing what is expected though. You can show the snippet in full screen and change the width to trigger the CSS. — Nope
– Nope, Commented Apr 5, 2017 at 13:30
Some slider plugins fail to load two sliders on one page, because they use the same ID. — Der Vampyr
– Der Vampyr, Commented Apr 5, 2017 at 13:31

Der Vampyr · Accepted Answer · 2017-04-06 06:48:40Z

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

Blazemonger · Accepted Answer · 2017-04-05 13:29:05Z

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>

@Blazemonger i did it but it doesn't work for me, can you read my update question at the end and tell me if i did something wrong
The real problem is we don't have the plugin code, so we can't fix what's wrong when you call it.
what do you want, a link to the page, a jsfiddle or i can copy all the code if you want ? I update my question and add all the html, css & jscode of the slider, hope it can help and may be the problem come from this line <script>$(function() { cbpBGSlideshow.init(); });</script> because we change the ID and Class of the slider @Blazemonger

Collectives™ on Stack Overflow

Use different js rules based on screen size

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related