How to showcase images based on window's size in rotator
In the rotator control, the displayItemsCount property allows you specify the number of rotator items that needs to be displayed. You can use this property to also display different item counts based on devices, such as desktop, mobile, and tablet, on which it is displayed. This can be achieved using the window.matchMedia() method to find the screen width in the rotator’s create event and render the rotator with items based on the screen width. The following code sample demonstrates how to showcase images based on window’s size in rotator.
<script>
$(function () {
// Rotator initialization
$("#content").ejRotator({
// Sets slide height and width
slideWidth: "200px",
slideHeight: "165px",
frameSpace: "4px",
enableResize: true,
isResponsive: true,
// Rotator create event
create: "onCreate"
});
});
function onCreate(args) {
var rotatorObj = $("#content").data("ejRotator");
// Approximate maximum screen size of mobile devices
if (window.matchMedia("(max-width: 500px)").matches) {
rotatorObj.option("displayItemsCount", 1);
} else if (window.matchMedia("(max-width: 1000px)").matches) {
// Approximate maximum screen size of tablet devices
rotatorObj.option("displayItemsCount", 2);
} else {
rotatorObj.option("displayItemsCount", 4);
}
}
</script>
In the above code, the displayItemsCount property has been set to 4 for desktop, 2 for tablet, and 1 for mobile devices.
Output
Desktop
Tablet
Mobile
