Swiper.js

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.

    <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

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