Owl Carousel Mobile Settings
User
$("#uncode-custom-post-grid-owl").owlCarousel({
loop: false,
margin: 30,
responsive: {
0: {
items: 1.2, // 1 column for mobile
nav: false, // Hide nav arrows on tablets
dots: true
},
768: {
items: 1.2, // 2 columns for tablets
nav: false, // Hide nav arrows on tablets
dots: true
},
1024: {
items: 3 // 3 columns for desktop
}
},
autoplay: false,
autoplayTimeout: 3000,
autoplayHoverPause: true,
nav: false,
dots: true
});
1.2 dots sroll on mobile slider 2 items onc
loop: false,
margin: 30,
responsive: {
0: {
items: 1.2, // 1 column for mobile
nav: false, // Hide nav arrows on tablets
dots: true
},
768: {
items: 1.2, // 2 columns for tablets
nav: false, // Hide nav arrows on tablets
dots: true
},
1024: {
items: 3 // 3 columns for desktop
}
},
autoplay: false,
autoplayTimeout: 3000,
autoplayHoverPause: true,
nav: false,
dots: true
});
1.2 dots sroll on mobile slider 2 items onc
Assistant
To make the Owl Carousel on mobile scroll two items at a time (i.e., adjust the number of items to scroll per swipe or dot click), you need to use the `slideBy` property. Here's the updated code:
$("#uncode-custom-post-grid-owl").owlCarousel({
loop: false,
margin: 30,
responsive: {
0: {
items: 1.2, // 1.2 items for mobile
nav: false, // Hide nav arrows on mobile
dots: true,
slideBy: 2 // Scroll 2 items per swipe or dot click on mobile
},
768: {
items: 1.2, // 1.2 items for tablets
nav: false, // Hide nav arrows on tablets
dots: true,
slideBy: 2 // Scroll 2 items per swipe or dot click on tablets
},
1024: {
items: 3, // 3 items for desktop
slideBy: 1 // Default behavior for desktop
}
},
autoplay: false,
autoplayTimeout: 3000,
autoplayHoverPause: true,
nav: false,
dots: true
});### Explanation of Changes:
1. **`slideBy: 2`**
This property ensures that the carousel scrolls 2 items at a time when navigating using dots or swipes.
2. **Placement of `slideBy` in Responsive Breakpoints**
The `slideBy` property is set in the `responsive` settings for both the 0px and 768px breakpoints (mobile and tablet). Desktop retains the default behavior of scrolling one item.
3. **Syntax Correction**
Fixed the syntax errors in the `dots` property placement.
Let me know if you need further adjustments!