Rixxo Sliders

Owned by Former user (Deleted)
Oct 09, 2020
1 min read

Full width slider

<div class="lmrx-carousel lmrx-carousel--full-window-width"> <div class="lmrx-carousel__items"> <!-- Start Slide Items --> <! -- Start Slide Item --> <div class="lmrx-carousel__items__item"> <div class="lmrx-carousel__items__item__image"><picture><source srcset="MOBILE_IMG_SRC" media="(max-width: 767px)"><img src="TABLET_AND_ABOVE_IMG_SRC" alt="Welcome to Nationwide Partitioning Supplies Ltd"></picture></div> </div> <! -- End Slide Item --> <!-- End Slide Items --> </div> <div class="lmrx-carousel__controls"> <div class="lmrx-carousel__controls__control lmrx-carousel__controls__control--prev">&nbsp;</div> <div class="lmrx-carousel__controls__control lmrx-carousel__controls__control--next">&nbsp;</div> <div class="lmrx-carousel__controls__control lmrx-carousel__controls__control--grid">&nbsp;</div> </div> </div>

You can have as many items as you want simply copy the code between <! -- Start Slide Item --> and <! -- End Slide Item --> before the <!-- End Slide Items --> and replacing the image urls

Four Item Slider

For the 4 showing on desktop going to 1 on mobile use the following similarly copying the code between <!-- Start Slide Item --> and <!-- End Slide Item -->  the <!-- End Slide Items --> and replacing the image urls. Unlike the full width slider there is no different image for viewports

<div class="lmrx-carousel lmrx-carousel--desktop-4 lmrx-carousel--mobile-2-2 lmrx-carousel--desktop-hide-grid"> <div class="lmrx-carousel__items"> <!-- Start Slide Items --> <!-- Start Slide Item --> <div class="lmrx-carousel__items__item"> <div class="lmrx-carousel__items__item__image"><img src="IMG_SRC" alt="Long Sleeve"></div> <div class="lmrx-carousel__items__item__text">Long Sleeve</div> </div> <!-- End Slide Item --> <!-- End Slide Items --> <div class="lmrx-carousel__controls"> <div class="lmrx-carousel__controls__control lmrx-carousel__controls__control--prev">&nbsp;</div> <div class="lmrx-carousel__controls__control lmrx-carousel__controls__control--next">&nbsp;</div> <div class="lmrx-carousel__controls__control lmrx-carousel__controls__control--grid">&nbsp;</div> </div> </div> </div>

Â