How to change the number of items displayed for different screen sizes

Question

I'm trying to find a way to change the number of carouselVisible items for different screen sizes. I want in a screen resolution of 768px to show 3 items and when you scale down in 360 to have 1 item.

Is that possible?

Demo

jquery

$('#carousel').cycle({
allowWrap: true,
carouselVisible: 5,
prev: '#prev',
next: '#next',
carouselFluid: true,
timeout: 0,
slides: 'article',
fx: 'carousel'
});

var slideshows1 = $('#carousel').on('cycle-next cycle-prev', function (e, opts) {
slideshows1.not(this).cycle('goto', opts.currSlide);
});
var slideshows2 = $('#carousel1').on('cycle-next cycle-prev', function (e, opts) {
slideshows2.not(this).cycle('goto', opts.currSlide);
});
$('#carousel article').click(function () {
var count = $("#carousel1 .readmore").length - 1;
var selectedIndex = $('#carousel').data('cycle.API').getSlideIndex(this);
var index = selectedIndex<count ? selectedIndex: (selectedIndex-count)%count;
slideshows1.cycle('goto', index);
slideshows2.cycle('goto', index);
});

Html

        <div class="service">
         <h1>Lead1</h1>
    </div>
</article>
<article>
    <div class="service">
         <h1>Lead2</h1>
    </div>
</article>
</div>
<div id="carousel1" data-allow-wrap="true" data-cycle-prev="#prev" data-cycle-next="#next" class="cycle-slideshow" data-cycle-timeout="0" data-cycle-manual-fx="scrollHorz" data-cycle-slides=".readmore">
<div class="readmore">
     <h2 class="lead">Lead</h2>

    <p>Testing some text right here</p> <a class="cta" href="#">Läs mer</a>

</div>
<div class="readmore">
     <h2 class="lead">Lead1</h2>

    <p>Testing some text right here</p> <a class="cta" href="#">Läs mer</a>

</div>
<div class="readmore">
     <h2 class="lead">Lead2</h2>

    <p>Testing some text right here</p> <a class="cta" href="#">Läs mer</a>

</div>
</div>
<div id="next">next</div>
<div id="prev">prev</div>

you can do that by writing different code for different window size :) `if ( $(window).width() > 739) { //Add your javascript for large screens here } else { //Add your javascript for small screens here }` — RRR, Mar 23 '16 at 05:38
check the following screenshot when width>739(you give your own width) http://picpaste.com/screencapture-jsfiddle-net-r29A9-16-1458712714667-OBB3KIsf.png when width < 739 http://picpaste.com/screencapture-jsfiddle-net-r29A9-16-1458712748839-erx40nY5.png — RRR, Mar 23 '16 at 06:04
**Thank you @ RRR, this is what I was looking for... And it works** — ub_303, Mar 23 '16 at 06:15
** HI @RRR, Can I change 5 different sizes, 768, 1000, 1400, 1600, etc. So it need just copy paste from the existing code ? Sorry for asking I am just beginner for jquery. :) ** — ub_303, Mar 23 '16 at 07:07

Eihwaz · Accepted Answer · 2016-03-23T06:04:24.347

Depends, if you need to adjust dynamically, when your user resizes a page, you would do something like this:

var properties = {
    allowWrap: true,
    carouselVisible: 5,
    prev: '#prev',
    next: '#next',
    carouselFluid: true,
    timeout: 0,
    slides: 'article',
    fx: 'carousel'
}

$(window).resize(function() {
    var width = $(window).width();
    var height = $(window).height();
    var slideAmount;

    if (width >= 768) {
        slideAmount = 3;
    } else if (width <= 360) {
        slideAmount = 1;
    } else {
        slideAmount = 2;
    }

    if (properties.carouselVisible != slideAmount) {
        $('#carousel').cycle('reinit');
    }
});

If you only want to do it once, then, obviously, you would just get initial screen size:

var width = $(window).width();
var height = $(window).height();

// Instantiate your carousel with parameters based on screen size

Just store your carousel options in a separate object, then check for if (width <= 360) {properties.carouselVisible = 3; $('#carousel').cycle('reinit');} — Eihwaz, Mar 23 '16 at 05:56

score 0 · Answer 2 · answered Aug 21 '21 at 10:16

you can use easily swiperjs and you can set breakpoints. from example

    <Swiper
    slidesPerView={1}
    spaceBetween={10}
    pagination={{
      clickable: true
    }}
    breakpoints={{
      "640": {
        slidesPerView: 2,
        spaceBetween: 20
      },
      "768": {
        slidesPerView: 4,
        spaceBetween: 40
      },
      "1024": {
        slidesPerView: 5,
        spaceBetween: 50
      }
    }}
    className="mySwiper"
  >
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
    <SwiperSlide>Slide 4</SwiperSlide>
    <SwiperSlide>Slide 5</SwiperSlide>
    <SwiperSlide>Slide 6</SwiperSlide>
    <SwiperSlide>Slide 7</SwiperSlide>
    <SwiperSlide>Slide 8</SwiperSlide>
    <SwiperSlide>Slide 9</SwiperSlide>
  </Swiper>

How to change the number of items displayed for different screen sizes

2 Answers2