CODEWITHSUNDEEP
javascriptvue.jsswiper.jsvue3-carousel
Leonardo Basso
Leonardo Basso

Reputation: 109

How to use swiper breakpoints in Vue Js

Good morning, I'm making a site using VueJS for the frontend, I have installed SwiperJS via npm for Vue to make sliders. It works fine but i'm not able to make functioning breakpoints to have a responsive number of slides. I used this code to make a responsive post section that has all 4 posts showed in the PC view and only one at a time on the mobile view (and you can also scroll to the posts on mobile view )

This is my code:

slider.vue

<template>
  <swiper
    :slides-per-view="4"
    :space-between="20"

    >
    <swiper-slide v-for="posts in APIData" :key="posts.slug">
      <img class="card-img-top" v-bind:src=posts.image alt="Card image cap">
      <hgroup class="text">
        <router-link to="/single"> <h3>{{posts.title}}</h3> </router-link>
        <p>{{posts.desc.substring(0,80)+".." }}</p>
     </hgroup>
    </swiper-slide>
  </swiper>
</template>

<script>
  // Import Swiper Vue.js components
  import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper';
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/swiper.scss';
  import 'swiper/components/pagination/pagination.scss';
  import 'swiper/components/navigation/navigation.scss';
  import { getAPI } from '../../api'
  // Swiper Plugins
  SwiperCore.use([Navigation, Pagination, Autoplay]);

  export default {
    data () {
      return { // Retourn the API Dates
        APIData: [],
        swiperOptions: {
          breakpoints: {       
      320: {       
         slidesPerView: 1,
         spaceBetween: 10     
      },          
      770: {       
         slidesPerView: 2,       
         spaceBetween: 50     
      },   
  
      771: {       
         slidesPerView: 4,       
         spaceBetween: 30     
      } 
   }   
        }
      }
    },

    components: {
      Swiper,
      SwiperSlide,
    },
    
    methods: {
      onSwiper(swiper) {
        console.log(swiper);
      },
      onSlideChange() {
        console.log('slide change');
      },
    },
  // Connect to API
   created () {
      getAPI.get('blog/api/list/last',)
        .then(response => {
          console.log('Post API has recieved data')
          this.APIData = response.data
        })
        .catch(err => {
          console.log(err)
        })
    },
  };
</script>

<style lang="sass" scoped>

.swiper-container
    background: linear-gradient(to top left, #BF092D, #8D0923)
    height: 80vh
    padding: 3rem
    .read-more
        padding: 20px
        color: #fff
        float: right
    .swiper-wrapper
        .swiper-slide
            background-color: #fff
            border-radius: 5px
            .text
                padding: 1rem
                h3
                    background: linear-gradient(to top left, #BF092D, #8D0923)
                    -webkit-background-clip: text
                    -webkit-text-fill-color: transparent
            img
                margin: auto
                display: block
                width: 100%
                height: 45% 
                border-radius: 5px 5px 0px 0px
</style>

Upvotes: 6

Views: 13368

Answers (3)

Adnan 2Shiro
Adnan 2Shiro

Reputation: 61

Just add this inside of "Swiper" element :breakpoints="{ 600:{ slidesPerView:3 }, 900:{ slidesPerView:4, } }"

Upvotes: 1

Davidos
Davidos

Reputation: 598

Solution from mark is working but with using flexbox when manually resizing window (or after flipping mobile phone) it doesn't update. Just on first load, some bug of vue-swiper?

I'm using:

<swiper
    :breakpoints="swiperOptions.breakpoints">

But I also added if somebody need:

 <script setup>   
   ...swiper loadings...
    const swiperUpdate = () => {
        swiperInstance.value.update();
        console.log('swiperInstanceUpdate')
    };
    onMounted(() => {
        window.addEventListener('resize', swiperUpdate);
    })
    onBeforeUnmount(() => {
        window.removeEventListener('resize', swiperUpdate);
    })
 </script>

Upvotes: 0

mark nikolsky
mark nikolsky

Reputation: 66

You need to pass the options object to the Swiper like this:

<swiper
    :breakpoints="swiperOptions.breakpoints"
>

Also for other properties: https://swiperjs.com/vue. Vue component takes properties one at a time. This can also be checked using devtools: enter image description here

Upvotes: 4

Related Questions