Working with Swiper.js? Here's What You Need to Know

Installation Methods:

npm install swiper

Basic Stucture

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>

Core Configuration Options

Discuss frequently used options:

• loop: Enables continuous sliding.

• slidesPerView: Number of visible slides at a time.

• spaceBetween: Spacing between slides.

•   <template>
      <swiper
          loop: true,
          slides-perView: 3,
          space-between: 10,
      >
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
      </swiper>
    </template>
  

  Responsive Design with Breakpoints

  breakpoints: { 640: { slidesPerView: 1 }, 768: { slidesPerView: 2 }, 1024: { slidesPerView: 3 }, }

    <Swiper
                :pagination="{ clickable: true }"
                :space-between="30"
                class="dynamic-class"
                :modules="[Autoplay, Navigation, Pagination]"
                :navigation="{ prevEl: '.prev', nextEl: '.next' }"
                :slides-per-view="3"
                style="--swiper-pagination-bullet-size: 12px"
                :breakpoints="{
                  100: {
                    slidesPerView: 1,
                    spaceBetween: 12
                  },
                  768: {
                    slidesPerView: 2,
                    spaceBetween: 12
                  }
                }"
              >
        <swiper-slide>Slide 1</swiper-slide>
        <swiper-slide>Slide 2</swiper-slide>
        <swiper-slide>Slide 3</swiper-slide>
    </Swiper>
  

  Enhancements with Modules

    import { Navigation, Pagination } from 'swiper/modules';
  

  Advanced Use Cases

  • Dynamic Content Loading: Fetch slides dynamically using APIs.

  • Custom Animations: Implement custom effects using CSS or JavaScript.

  • Nested Swipers: How to handle multiple Swipers within a page.

Custom Navigation

    <Swiper
                :modules="[Autoplay, Navigation, Pagination]"
                :navigation="{ prevEl: '.prev', nextEl: '.next' }" // this can controll navigation
    >    
                <SwiperSlider>
                    1
                </SwiperSlider>
                <SwiperSlider>
                    2
                </SwiperSlider>
                <SwiperSlider>
                    3
                </SwiperSlider>            
    </Swiper>

    // outside of the swiper
    <button class="next">Next</button>
    <button class="prev">Previous</button>

in navigation there are properties prevEl and NextEl you can assign class names by the class name if you click the button it will custom control on the slider.

• Note: If you have two sliders on the same page you should change the class name differently for that way it won’t create a navigation problem otherwise which slider has fewer children it will work for it.

  Example

• ```typescript // slider 1

  
  1 2 3
  // slider 2
  2.1 2.2 2.3
  2.4
  

// outside of the swiper 1 Next Previous

// outside of the swiper 2 Next Previous

    ***<mark>Note: If you see the code closely both of the button class has diff name otherwise it will create a problem with navigation</mark>***


### **Classes will help you to add custom style**

```typescript
--swiper-pagination-bullet-size: 12px

  <Swiper
            style="--swiper-pagination-bullet-size: 12px"
    >
          </Swiper>

There are a lot of classes that you can access over the Swiper component

Thank you