Custom Swiper Slide Width
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
<script>
</script>var swiper = new Swiper(".mySwiper", {
slidesPerView: "auto",
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
second and third should not be 100%
Here’s how you can adjust the width of the second and third slides:
### Updated Code
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide small-slide">Slide 2</div>
<div class="swiper-slide small-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- Custom CSS -->
<style>
.swiper-slide {
width: 100%; /* Default 100% for all slides */
}
.small-slide {
width: 50%; /* Adjust width for specific slides */
}
</style>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: "auto",
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
</script>### Explanation
1. **CSS Adjustments:**
– Added a custom class `.small-slide` for slides that you want to have a different width (second and third slides in this case).
– Set `width: 50%` in `.small-slide` to make those slides occupy half the width.
2. **HTML Changes:**
– Applied the `small-slide` class to the second and third slides.
3. **Swiper Configuration:**
– The `slidesPerView: "auto"` configuration respects the custom widths of individual slides.
### Result
– Slides 2 and 3 will be smaller (50% width), while the rest will remain at 100% width.
– You can tweak the `width` value in `.small-slide` for finer control.