Nuxt•2mo ago

Nuxt Swiper Example - 4 Visible Slides per view

Hey all, I'm having some trouble with the demo found on https://stackblitz.com/github/cpreston321/nuxt-swiper/tree/main/examples/swiper-basic?file=app.vue,components%2FSwiperControls.vue I'm trying to make the upper example (with controls) show 4 slides at a time. I've tried using the slides-per-view parameter, as well as changing width and some CSS to see if maybe it's getting cropped out. I have been able to determine that it's not an overflow issue and I don't think the creativeEffect is causing the problem. What am I doing wrong? How do I get this thing to show 4 slides? I've checked out the documentation on https://github.com/cpreston321/nuxt-swiper?tab=readme-ov-file#usage and https://swiperjs.com/swiper-api at https://swiperjs.com/swiper-api#param-slidesPerView Here's the code involved:

<template>
  <div>
    <h1>Nuxt Swiper Basic Example</h1>
    <hr>
    <h2>Swiper Creative Effect</h2>
    <Swiper
      :height="300"
      :modules="[SwiperAutoplay, SwiperEffectCreative]"
      :slides-per-view="4"
      :loop="true"
      :effect="'creative'"
      :autoplay="{
        delay: 8000,
        disableOnInteraction: true
      }"
      :creative-effect="{
        prev: {
          shadow: false,
          translate: ['-20%', 0, -1]
        },
        next: {
          translate: ['100%', 0, 0]
        }
      }"
    >
      <SwiperSlide
        v-for="(slide, idx) in slides"
        :key="idx"
        :style="`background-color: ${slide.bg}; color: ${slide.color}`"
      >
        {{ idx }}
      </SwiperSlide>

      <!-- useSwiper() within a swiper instance -->
      <SwiperControls />
    </Swiper>
  </div>
</template>

<template>
  <div>
    <h1>Nuxt Swiper Basic Example</h1>
    <hr>
    <h2>Swiper Creative Effect</h2>
    <Swiper
      :height="300"
      :modules="[SwiperAutoplay, SwiperEffectCreative]"
      :slides-per-view="4"
      :loop="true"
      :effect="'creative'"
      :autoplay="{
        delay: 8000,
        disableOnInteraction: true
      }"
      :creative-effect="{
        prev: {
          shadow: false,
          translate: ['-20%', 0, -1]
        },
        next: {
          translate: ['100%', 0, 0]
        }
      }"
    >
      <SwiperSlide
        v-for="(slide, idx) in slides"
        :key="idx"
        :style="`background-color: ${slide.bg}; color: ${slide.color}`"
      >
        {{ idx }}
      </SwiperSlide>

      <!-- useSwiper() within a swiper instance -->
      <SwiperControls />
    </Swiper>
  </div>
</template>

The problem is that when I use anything greater than "2" on line 10 of the above code sample, it stops working and only shows 2 slides at a time. "1" and "2" both work as expected, but "3", "4", and more do not. My goal is 4.

6 Replies

kapa.ai•2mo ago

Hi @MassDebates. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the available knowledge sources, I can offer some insights and suggestions for your Nuxt Swiper issue. 1. Swiper Configuration: The issue you're experiencing with slidesPerView not working as expected for values greater than 2 could be related to the Swiper configuration or CSS styling. 2. Client-side Rendering: One potential solution is to ensure that the Swiper component is only rendered on the client-side. As suggested in a similar Swiper issue with Nuxt, you can try wrapping your Swiper component in a client-only tag Stack Overflow - Swiper in Nuxt3 i18n (https://stackoverflow.com/questions/78655194):

   <client-only>
     <Swiper
       :height="300"
       :modules="[SwiperAutoplay, SwiperEffectCreative]"
       :slides-per-view="4"
       :loop="true"
       :effect="'creative'"
       ...
     >
       ...
     </Swiper>
   </client-only>

   <client-only>
     <Swiper
       :height="300"
       :modules="[SwiperAutoplay, SwiperEffectCreative]"
       :slides-per-view="4"
       :loop="true"
       :effect="'creative'"
       ...
     >
       ...
     </Swiper>
   </client-only>

3. Responsive Breakpoints: If you want to ensure that 4 slides are shown on larger screens while adapting to smaller screens, you can use the breakpoints property. Here's an example of how you might modify your code Stack Overflow - Swiper in Nuxt.js (https://stackoverflow.com/questions/77974730):

   <Swiper
     :modules="[SwiperAutoplay, SwiperEffectCreative]"
     :slides-per-view="1"
     :loop="true"
     :effect="'creative'"
     :breakpoints="{
       1200: { slidesPerView: 4 }, 
       768: { slidesPerView: 3 },
       320: { slidesPerView: 2 } 
     }"
     ...
   >
     ...
   </Swiper>

   <Swiper
     :modules="[SwiperAutoplay, SwiperEffectCreative]"
     :slides-per-view="1"
     :loop="true"
     :effect="'creative'"
     :breakpoints="{
       1200: { slidesPerView: 4 }, 
       768: { slidesPerView: 3 },
       320: { slidesPerView: 2 } 
     }"
     ...
   >
     ...
   </Swiper>

4. CSS Styling: Ensure that your CSS is not limiting the width of the Swiper container or slides. You might need to adjust the width of the Swiper container to accommodate 4 slides. 5. Swiper Modules: Make sure you've imported and included all necessary Swiper modules, especially if you're using special effects or autoplay. If these suggestions don't resolve your issue, you might need to provide more details about your setup, including any custom CSS you're using and the full component code. Additionally, creating a minimal reproducible example in a sandbox environment could help in diagnosing the problem more accurately. Remember, when working with Swiper in Nuxt, it's important to consider both client-side and server-side rendering implications, which can sometimes cause unexpected behavior with dynamic components like carousels. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@205499759241330688> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

MassDebatesOP•2mo ago

the minimum, reproducible sample would be here: https://stackblitz.com/github/cpreston321/nuxt-swiper/tree/main/examples/swiper-basic?file=app.vue,components%2FSwiperControls.vue and changing the value on line 21 from 1 to 4 would demonstrate the issue that I'm seeing now. I did try some CSS to see what's going on with it, but I think there's an issue with the swiper configuration. I just don't know what the issue is

StackBlitz

Nuxt-swiper Swiper Basic Example - StackBlitz

Run official live example code for Nuxt-swiper Swiper Basic, created by Cpreston321 on StackBlitz

MassDebatesOP•2mo ago

I'm at a loss here. I don't know what I'm doing wrong. What am I missing? Does anyone know the answer? It looks like the documentation example was silently changed last night. I don't know why it wasn't working before, which is concerning. It now provides 4 examples. The template code has changed and the new version of the documentation example works with 4 slides per view.

MassDebatesOP•2mo ago

https://github.com/cpreston321/nuxt-swiper/commit/ed8652f369d2212899891f79603765bbdc8debdc

GitHub

chore: update deps and README · cpreston321/nuxt-swiper@ed8652f

leamsigc•2mo ago

I think the reason is beacuse swiper js is droping support for React,Vuejs and moving to WebComponents I try to get the StackBlitz runing but it returned 500 error and body not usable. so it must be some kind of breaking changes for the package it self

Gaming

Programming

Nuxt Swiper Example - 4 Visible Slides per view