Responsive Slider Örneği

SanalData’yı Google’da tercih edilen kaynak olarak ekleyin

Merhaba arkadaşlar, web tarafından yazılım yaparken responsive slider gerekebiliyor.İşte böyle durumlarda swiper slider imdadımıza yetişiyor.Slider’ın responsive olması ise ayrı bir güzel.Responsive slider BURADAN indirirebilirsiniz.Slider’ın çalışan bir örneği.

Eğer slider sagdan sola değilde yönün yukardan aşağı yapmak isterseniz config kısmına aşağıdaki kodu eklemeniz yeterlidir.

Eğer ki slider sonsuz döngü gibi olsun yani en başa geldiğinde tekrar en başa dönsün diyorsanız aşağıdaki kodu ekleyiniz.

Eğerki slider’da thumnail kullanmak istiyorsanız aşağıdaki kodları kullanabilirsiniz.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

    <!-- Demo styles -->
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #000;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 300px;
            margin-left: auto;
            margin-right: auto;
        }

        .swiper-slide {
            background-size: cover;
            background-position: center;
        }

        .gallery-top {
            height: 80%;
            width: 100%;
        }

        .gallery-thumbs {
            height: 20%;
            box-sizing: border-box;
            padding: 10px 0;
        }

            .gallery-thumbs .swiper-slide {
                height: 100%;
                opacity: 0.4;
            }

            .gallery-thumbs .swiper-slide-thumb-active {
                opacity: 1;
            }
    </style>
</head>

<body>
    <!-- Swiper -->
    <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(/uploads/banner/banner1.1.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(/uploads/banner/banner2.2.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(/uploads/banner/banner3.3.jpg)"></div>
          
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(/uploads/banner/thum_1.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(/uploads/banner/thum_2.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(/uploads/banner/thum_3.jpg)"></div>
   
        </div>
    </div>


    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
    var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      slidesPerView: 4,
      loop: true,
      freeMode: true,
      loopedSlides: 5, //looped slides should be the same
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
    });
    var galleryTop = new Swiper('.gallery-top', {
      spaceBetween: 10,
      loop: true,
      loopedSlides: 5, //looped slides should be the same
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      thumbs: {
        swiper: galleryThumbs,
      },
    });
    </script>
</body>

</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

<!DOCTYPE html>

<head>

<title>Swiper demo</title>

<style>

html,

body {

position: relative;

height: 100%;

}

body {

background: #000;

font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

font-size: 14px;

color: #000;

margin: 0;

padding: 0;

}

.swiper-container {

width: 100%;

height: 300px;

margin-left: auto;

margin-right: auto;

}

.swiper-slide {

background-size: cover;

background-position: center;

}

.gallery-top {

height: 80%;

width: 100%;

}

.gallery-thumbs {

height: 20%;

box-sizing: border-box;

padding: 10px 0;

}

.gallery-thumbs .swiper-slide {

height: 100%;

opacity: 0.4;

}

.gallery-thumbs .swiper-slide-thumb-active {

opacity: 1;

}

</style>

</head>

<body>

</div>

</div>

</div>

var galleryThumbs = new Swiper('.gallery-thumbs', {

spaceBetween: 10,

slidesPerView: 4,

loop: true,

freeMode: true,

loopedSlides: 5, //looped slides should be the same

watchSlidesVisibility: true,

watchSlidesProgress: true,

});

var galleryTop = new Swiper('.gallery-top', {

spaceBetween: 10,

loop: true,

loopedSlides: 5, //looped slides should be the same

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

thumbs: {

swiper: galleryThumbs,

});

</script>

</body>

</html>

Yazar

Harun Kılıçlar

Kurucu / Teknoloji Editörü

Harun, yazılım geliştirme, web teknolojileri, mobil uygulamalar, veritabanı sistemleri ve yapay zekâ üzerine çalışan bir teknoloji editörüdür. SanalData’nın kurucusu olarak yazılım, yapay zekâ, mobil teknolojiler ve teknoloji sektöründeki gelişmeleri izler ve değerlendirir.

Harun Kılıçlar’ın tüm yazıları