Responsive Slider Örneği
13 Mart 2017 / 10:46
Burak
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.
|
1 |
direction: 'vertical' |
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.
|
1 |
loop: true |
Eğerki slider’da thumnail kullanmak istiyorsanız aşağıdaki kodları kullanabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
<!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> |
Bu Yazılarıda Okuyabilirsiniz...
Bir yanıt yazın