Swiper Custom Slide Layout

December 30, 2024 ยท AI Conversations

User
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9

<script>

</script>
<script>
var swiper = new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
</script>

display 1 and 3rd 80% show and middle one full

Assistant
To achieve a layout where the first and third slides are partially visible (80% width), and the middle slide is fully visible, you can use Swiper's `centeredSlides` option and adjust the `slidesPerView` and `spaceBetween` settings. Here's the updated code:

### HTML and JS Code:

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-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>

<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 1.5, // Show 1.5 slides initially
    spaceBetween: 20,  // Adjust the gap between slides
    centeredSlides: true, // Center the active slide
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    breakpoints: {
      // Responsive settings
      768: {
        slidesPerView: 2.8, // Show almost 3 slides on larger screens
      },
    },
  });
</script>

### Explanation:
1. **`slidesPerView: 1.5`**: This shows one full slide and half of another by default.
2. **`centeredSlides: true`**: Ensures the active slide is centered.
3. **`breakpoints`**: Adjusts the layout for larger screens. In this case, nearly 3 slides are shown with the middle one fully visible.
4. **`spaceBetween`**: Adjusts the spacing between slides.

### Adjustments:
You can tweak the `slidesPerView` and `spaceBetween` values further to fine-tune the design. The breakpoints ensure a responsive layout for different screen sizes.

User
display middle on full and left and right 70%
Assistant
To display the middle slide at full width while having the left and right slides partially visible at 70% width, you can achieve this by customizing `slidesPerView`, `centeredSlides`, and adding CSS to scale the left and right slides dynamically. Here's the implementation:

### Updated HTML and JS Code:

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-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>

<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 3, // View three slides at a time
    centeredSlides: true, // Center the active slide
    spaceBetween: 30, // Space between slides
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    on: {
      slideChangeTransitionEnd: function () {
        scaleSlides();
      },
      init: function () {
        scaleSlides();
      },
    },
  });

  function scaleSlides() {
    const slides = document.querySelectorAll(".swiper-slide");
    slides.forEach((slide, index) => {
      slide.style.transform = "scale(0.7)"; // Default scale for left/right slides
    });
    const activeSlide = document.querySelector(".swiper-slide.swiper-slide-active");
    if (activeSlide) {
      activeSlide.style.transform = "scale(1)"; // Full scale for the middle slide
    }
  }
</script>

<!-- CSS for Custom Scaling -->
<style>
  .swiper-slide {
    transition: transform 0.3s ease; /* Smooth scaling effect */
  }
</style>

### Explanation:
1. **JavaScript:**
– `slidesPerView: 3`: Displays three slides at a time (center + left + right).
– `centeredSlides: true`: Ensures the active slide is in the center.
– The `on` events (`slideChangeTransitionEnd` and `init`) dynamically adjust the scale of the slides.
– The `scaleSlides` function applies a smaller scale (`0.7`) to the left and right slides, while the center slide gets full scale (`1`).

2. **CSS:**
– `transition: transform 0.3s ease`: Ensures smooth scaling of slides during transitions.

### Adjustments:
– Change the `scale(0.7)` value to adjust the size of the left and right slides.
– Modify the `spaceBetween` value to control the spacing between the slides.

This approach provides a smooth and visually appealing carousel with the desired layout.

User
still showing 2 we want to show always 3 with left and right 70%
Assistant
To ensure that the Swiper carousel always displays **exactly three slides** with the middle one fully visible (100% scale) and the left and right slides at **70% scale**, we can achieve this with the following setup:

### Complete Code:

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-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>

<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 3, // Always display 3 slides
    centeredSlides: true, // Center the active slide
    spaceBetween: 10, // Small gap between slides
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    on: {
      slideChangeTransitionEnd: function () {
        scaleSlides();
      },
      init: function () {
        scaleSlides();
      },
    },
  });

  function scaleSlides() {
    const slides = document.querySelectorAll(".swiper-slide");
    slides.forEach((slide, index) => {
      slide.style.transform = "scale(0.7)"; // Scale down all slides
    });
    const activeSlide = document.querySelector(".swiper-slide.swiper-slide-active");
    if (activeSlide) {
      activeSlide.style.transform = "scale(1)"; // Scale up the center slide
    }
    // Scale the adjacent slides (left and right)
    const prevSlide = activeSlide.previousElementSibling;
    const nextSlide = activeSlide.nextElementSibling;
    if (prevSlide) prevSlide.style.transform = "scale(0.7)";
    if (nextSlide) nextSlide.style.transform = "scale(0.7)";
  }
</script>

<!-- CSS for Custom Scaling -->
<style>
  .swiper-slide {
    transition: transform 0.3s ease; /* Smooth scaling effect */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    background: #ddd;
    height: 200px; /* Adjust height as needed */
  }
</style>

### Key Features:
1. **`slidesPerView: 3`:**
– Ensures that exactly three slides are visible at all times.

2. **`scaleSlides` Function:**
– Scales the center slide to `scale(1)` (full size).
– Scales the left and right slides to `scale(0.7)` (70% size).
– This function runs both on initialization and after every slide change.

3. **CSS:**
– `transition: transform 0.3s ease`: Ensures smooth scaling animations.

4. **Centered Active Slide:**
– The `centeredSlides: true` option makes the active slide always centered.

### Adjustments:
– Modify `spaceBetween` to control the gap between slides.
– Change `scale(0.7)` for the left and right slides to adjust their size further.

This setup ensures exactly three slides are always visible, with the middle one fully displayed and the left and right ones scaled down to 70%.

User
its creating gap from left side when click its creating gap left side I want always show slide
Assistant
To ensure the carousel **always shows three slides** without gaps (i.e., the center slide fully visible and the left and right slides scaled at 70%), we need to adjust the Swiper configuration and ensure proper alignment using CSS and JavaScript.

Here's the updated code to solve the issue:

### Complete Solution

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-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>

<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: "auto", // Allows flexible slide widths
    centeredSlides: true, // Always center the active slide
    spaceBetween: 0, // No gap between slides
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    on: {
      slideChangeTransitionEnd: function () {
        scaleSlides();
      },
      init: function () {
        scaleSlides();
      },
    },
  });

  function scaleSlides() {
    const slides = document.querySelectorAll(".swiper-slide");
    slides.forEach((slide) => {
      slide.style.transform = "scale(0.7)"; // Scale down all slides by default
    });
    const activeSlide = document.querySelector(".swiper-slide.swiper-slide-active");
    if (activeSlide) {
      activeSlide.style.transform = "scale(1)"; // Scale up the active slide
    }
  }
</script>

<!-- CSS for Custom Scaling -->
<style>
  .swiper {
    width: 100%;
    padding: 20px 0;
  }

  .swiper-slide {
    width: 30%; /* Ensures three slides are visible at all times */
    transition: transform 0.3s ease; /* Smooth scaling effect */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    background: #ddd;
    height: 200px; /* Adjust height as needed */
  }
</style>

### Changes and Fixes:
1. **`slidesPerView: 'auto'`:**
– This ensures the slides are flexible in size but maintains visible portions for left and right slides.

2. **CSS `width: 30%` for `.swiper-slide`:**
– Each slide takes up exactly 30% of the container, ensuring three slides are visible at all times.

3. **`spaceBetween: 0`:**
– Removes unnecessary gaps between slides.

4. **`scaleSlides` Function:**
– Dynamically scales the active slide (`scale(1)`) while scaling the left and right slides (`scale(0.7)`).

5. **Transition Fix:**
– The smooth scaling effect is maintained using `transition: transform 0.3s ease`.

### Result:
– Three slides are always visible, with the center slide fully displayed and the left/right slides scaled down to 70%.
– There are no gaps on the left or right sides, even when navigating between slides.

Leave a Comment

Your email address will not be published. Required fields are marked *