OwlCarousel responsive items setup
if (window.innerWidth
jQuery(document).ready(function($) {
if (window.innerWidth <= 767) {
$('#mobile-steps-carousel').owlCarousel({
loop: true,
margin: 20,
nav: false,
dots: true,
responsive: {
0: {
items: 1
},
500: {
items: 2
}
}
});
}
});### Explanation:
– `0` to `499px`: `items: 1`
– `500px` to `767px`: `items: 2`
Let me know if you also want autoplay or swipe/touch adjustments.
—
### ✅ **1. Ensure Owl Carousel CSS is Included**
You **must include** the Owl Carousel CSS file. Without it, the dots will exist in HTML but not be visible.
Make sure these lines are in your “:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />—
### ✅ **2. Confirm HTML Structure**
Your carousel element should have proper structure:
<div id="mobile-steps-carousel" class="owl-carousel">
<div class="item">Slide 1</div>
<div class="item">Slide 2</div>
<div class="item">Slide 3</div>
</div>Make sure `owl-carousel` class is on the container.
—
### ✅ **3. No CSS Override Hiding Dots**
Check if any CSS is **hiding** `.owl-dots`, like:
.owl-dots {
display: none !important;
}Fix by explicitly showing:
.owl-dots {
display: block !important;
text-align: center;
margin-top: 15px;
}—
### ✅ **4. Correct JS with Responsive**
Here’s the **final working JS** with responsive and dots enabled:
jQuery(document).ready(function($) {
if (window.innerWidth <= 767) {
$('#mobile-steps-carousel').addClass('owl-carousel').owlCarousel({
loop: true,
margin: 20,
nav: false,
dots: true,
responsive: {
0: {
items: 1
},
500: {
items: 2
}
}
});
}
});—
Would you like me to check your specific HTML structure or generate a working demo?
width: 10px;
height: 10px;
margin: 5px 7px;
background: black;
display: block;
-webkit-backface-visibility: visible;
transition: opacity .2s ease;
border-radius: 30px;
above is the css
—
### ✅ **Checklist Based on Your CSS**
#### 1. **Missing `.owl-theme` class**
Make sure your carousel **container** includes both `owl-carousel` **and** `owl-theme` classes:
<div id="mobile-steps-carousel" class="owl-carousel owl-theme">Without `.owl-theme`, the styles in your rule:
.owl-theme .owl-dots .owl-dot span { ... }won’t apply.
—
#### 2. **Make Sure `.owl-dots` Is Not Hidden**
If you're still not seeing dots, add this CSS to force visibility:
.owl-dots {
display: block !important;
text-align: center;
margin-top: 15px;
}—
#### 3. **Active Dot Visibility**
If you want the active dot to have a visible state, add:
.owl-theme .owl-dots .owl-dot.active span {
background: pink; /* or any color to indicate it's active */
opacity: 1;
}—
### ✅ Final JS (Make sure you’re adding the right classes dynamically if needed):
jQuery(document).ready(function($) {
if (window.innerWidth <= 767) {
$('#mobile-steps-carousel').addClass('owl-carousel owl-theme').owlCarousel({
loop: true,
margin: 20,
nav: false,
dots: true,
responsive: {
0: {
items: 1
},
500: {
items: 2
}
}
});
}
});—
Would you like me to inspect the entire CSS + HTML setup for you to ensure nothing else is missing?
<script>
</script><style>
@media (max-width: 767px) {
.mobile-steps-slider-wrapper {
padding: 40px 0;
}
.step-item {
position: relative;
text-align: center;
}
.step-outer::before
{
content: "";
position: absolute;
top: -8.5px;
left: 50%;
transform: translateX(-50%);
background-color: #e9204f !important;
}
.step-outer {
width: 218px;
height: 224px;
border-radius: 50%;
position: relative;
margin: auto;
border: 4px solid #E9204F80;
display: flex;
align-items: center;
justify-content: center;
}
.step-outer:hover
{
border-color: rgba(233, 32, 79, 1);
}
.step-outer::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
border-radius: 50%;
border: 2px dashed #E9204F80;
top: -50%;
left: -50%;
z-index: 0;
}
.step-inner {
width: 166px;
height: 168px;
border-radius: 50%;
background-color: #e9205a;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
position: relative;
}
.step-outer:hover .step-inner
{
background-color: #0f0f0f
}
.step-inner img {
max-width: 88px;
max-height: 94px;
filter: brightness(0) invert(1);
}
.step-label {
margin-top: 20px;
font-size: 14px;
font-weight: 600;
color: #1a1a1a;
text-align: center;
}
.dot-circle {
width: 12px;
height: 12px;
background-color: #e9205a;
border-radius: 50%;
position: absolute;
z-index: 2;
}
.dot-top {
top: -6px;
left: 50%;
transform: translateX(-50%);
}
.dot-left {
left: -6px;
top: 50%;
transform: translateY(-50%);
}
.dot-bottom {
bottom: -6px;
left: 50%;
transform: translateX(-50%);
}
.owl-carousel .item:last-child .step-outer::before {
display: none;
}
}
</style><script>
jQuery(document).ready(function($) {
if (window.innerWidth <= 767) {
$('#mobile-steps-carousel').owlCarousel({
loop: true,
margin: 20,
nav: false,
dots: true,
responsive: {
0: {
items: 1
},
500: {
items: 2
}
}
});
}
});
</script>Here’s what you need to do:
—
### ✅ **Add This CSS Fix Below Your Style Section**
@media (max-width: 767px) {
.mobile-steps-slider-wrapper {
overflow-x: hidden;
width: 100%;
box-sizing: border-box;
padding: 0 15px; /* optional padding for spacing */
}
#mobile-steps-carousel .owl-stage-outer {
overflow: visible; /* or hidden if you want to strictly clip */
}
#mobile-steps-carousel .owl-item {
box-sizing: border-box;
}
}—
### ✅ Optional: Prevent Global Overflow
If the carousel is still breaking layout, you can also **add this globally**:
html, body {
overflow-x: hidden;
}—
This ensures that no part of the carousel leaks outside the viewport, especially when `margin` is used between items.
Let me know if you'd like to limit the padding or make items center-aligned properly.