More than 2 items on mobile

[smithead123]

Is there anyway so that I can show more than 2 items on mobile, as it looks like the code is forcing the number of items when on smaller screens even though i have set to display 4 items.

This would be really useful as i have really small icons and i want to show more than 2 items for smaller screens.

[nicped]

Yes, with a bit of CSS.

The slider item count is defined by a CSS variable, --swiffy-slider-item-count, that can be overwritten.

This is the CSS from Swiffy Slider that controls the number of slides on mobile:

@media (max-width: 62rem) {
    .swiffy-slider {
        --swiffy-slider-item-count: 1;
    }
    .slider-item-show2-sm {
        --swiffy-slider-item-count: 2;
    }
}

You can then add a custom css class to give you i.e. 4 slides on mobile:

@media (max-width: 62rem) {
    .custom-slider-item-show4-sm {
        --swiffy-slider-item-count: 4;
    }
}

And then add custom-slider-item-show4-sm class to your .swiffy-slider instance.

Merry Christmas