Swiper.js

Makale İçerik Listesi

Kurulum - CDN

Swiper.js kullanmak için ilk olarak CDN üzerinden kaynak dosyalarını sayfaya ekle

<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

Sayfada Swiper.js kullanacağın yere layout ekle

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

Kaynak dosyayı ekledik, template'i kurduk... son olarak yapmamız gereken Javascript ile Swiper.js'in nerede çalışacağını belirtip çalıştırmak.

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

Ör. Sayfa içerisinde Foto Swiper

Sayfanın <head> kısmında stili CDN'den al.

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>

<body>nin altında CDN üzerinden JS kaynağını al.

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Sayfa içerisinde template'ini kur

<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="{{ '/IMG_9486.jpg' }}" class="rounded" alt="Hafsa Şapka - Sagalassos Kırmızısı">
        </div>
        <div class="swiper-slide">
            <img src="{{ '/IMG_9487.jpg' }}" class="rounded" alt="Hafsa Şapka - Sagalassos Kırmızısı">
        </div>
        <div class="swiper-slide">
            <img src="{{ '/IMG_9489.jpg' }}" class="rounded" alt="Hafsa Şapka - Sagalassos Kırmızısı">
        </div>
        <div class="swiper-slide">
            <img src="{{ '/IMG_9498.jpg' }}" class="rounded" alt="Hafsa Şapka - Sagalassos Kırmızısı">
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>

JS üzerinden çalıştır

var swiper = new Swiper(".mySwiper", {
    spaceBetween: 20,
    pagination: {
        el: ".swiper-pagination",
    },
});

Ör. Fullscreen Modal with Captions

Sayfanın <head> kısmında stili CDN'den al.

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>

<body>nin altında CDN üzerinden JS kaynağını al.

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Sayfa içerisinde thumbnail olacak görselleri sırala. (Hepsinin aynı container içerisinde olması da gerekmez.)

<div class="grid grid-cols-3 gap-2">
    <img src="/IMG_9486.jpg" class="swiper-thumb" alt="Hafsa Şapka - Sagalassos 1">
    <img src="/IMG_9487.jpg" class="swiper-thumb" alt="Hafsa Şapka - Sagalassos 2">
    <img src="/IMG_9489.jpg" class="swiper-thumb" alt="Hafsa Şapka - Sagalassos 3">
    <img src="/IMG_9498.jpg" class="swiper-thumb" alt="Hafsa Şapka - Sagalassos 4">
</div>

Image gallery template'ini yap

<section id="swiper-section" class="swiper">
    <div id="close-btn" class="close-btn">
        <span class="arrow a1"></span>
        <span class="arrow a2"></span>
    </div>
    <div class="swiper-container h-screen">
        <div class="swiper-wrapper">
            {{-- SAGALASSOS KIRMIZISI --}}
            <div class="swiper-slide flex flex-col items-center justify-center">
                <img src="/IMG_9486.jpg"
                     class="mx-2" style="max-height:90vh;" alt="Sagalassos Kırmızısı 1">
                <p class="mt-3 text-center text-sm text-gray-500">Sagalassos Kırmızısı 1</p>
            </div>
            <div class="swiper-slide flex flex-col items-center justify-center">
                <img src="/IMG_9487.jpg"
                     class="mx-2" style="max-height:90vh;" alt="Sagalassos Kırmızısı 2">
                <p class="mt-3 text-center text-sm text-gray-500">Sagalassos Kırmızısı 2</p>
            </div>
            <div class="swiper-slide flex flex-col items-center justify-center">
                <img src="/IMG_9489.jpg"
                     class="mx-2" style="max-height:90vh;" alt="Sagalassos Kırmızısı 3">
                <p class="mt-3 text-center text-sm text-gray-500">Sagalassos Kırmızısı 3</p>
            </div>
            <div class="swiper-slide flex flex-col items-center justify-center">
                <img src="/IMG_9498.jpg"
                     class="mx-2" style="max-height:90vh;" alt="Sagalassos Kırmızısı - 4">
                <p class="mt-3 text-center text-sm text-gray-500">Sagalassos Kırmızısı - 4</p>
            </div>
        </div>

        <div class="swiper-button swiper-button-prev"></div>
        <div class="swiper-button swiper-button-next"></div>
    </div>
</section>

Swiper.js kaynak kodundan sonra swiper container alanında Swiper.js'i başlat

let swiperObject = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    loop: true,
    keyboard: {
        enabled: true,
        onlyInViewport: false,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

let swiper = document.getElementById('swiper-section');
let swiperCloseBtn = document.getElementById('close-btn');
let aSlideThumbs = document.querySelectorAll('.swiper-thumb');

function toggleSwiper() {
    swiper.classList.toggle('is-active');
}

for (let i = 0; i < aSlideThumbs.length; i++) {
    aSlideThumbs[i].addEventListener('click', () => {
        swiper.classList.toggle('is-active');
        swiperObject.slideTo(i + 1, 500, false);
    });
}

swiperCloseBtn.addEventListener('click', toggleSwiper);

Gerekli CSS stillerini ver

.swiper { display: none; }

.close-btn {
    display: block;
    position: absolute;
    right: 0;
    width: 48px;
    height: 48px;
    background-color: transparent;
    z-index: 1000;
}
.arrow {
    position: absolute;
    height: 3px;
    width: 25px;
    background-color: rgba(255,255,255,1);
    top: 24px;
    left: 11px;
}

.a1 { transform: rotate(45deg); }
.a2 { transform: rotate(-45deg); }

.swiper.is-active {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42);
    z-index: 1000000;
}
.swiper-container {
    width: calc(100vw - 100px);
}

@media screen and (max-width:1023px) {
    .swiper-container {
        width: 100vw;
    }
}
.swiper-lazy {
    display: none;
}
.swiper-lazy.swiper-lazy-loaded {
    display: block;
}
.swiper-button.swiper-button-prev,
.swiper-button.swiper-button-next{
    color: rgba(255,255,255,0.5);
}

Referanslar

Swiper.js sayfası - link
Lazy Loading - link