Bootstrap & SwiperJs Slider Yapımı
Merhaba değerli okuyucular, yazımızda hem Bootstrap kütüphanesi kullanılarak Slider yapımını anlatacağız hemde SwiperJS kütüphanesini kullanarak Slider yapımını anlatacağız. Dilerseniz kısaca Slider kelimesinin anlamına bir göz atalım. Slider kelimesinin Türkçe anlamı kaydırıcıdır. Özellikle web sayfalarında ve mobil uygulamalarda sıkça kullanılır. Slider hem görsel açıdan hemde kullanıcı deneyimi açısından oldukça önemli bir yere sahiptir. Şimdi dilerseniz HTML, CSS ve JavaScript ile Slider nasıl yapılır buna bir göz atalım.
Bootstrap ile Slider Yapımı
Bootstrap ile Slider yapabilmek için ilk olarak Bootstrap kütüphanesine ilişkin CSS ve JavaScript dosyalarını web sayfanıza import etmeniz yani eklemeniz gerekir. Web sayfanızın <head></head> etiketleri arasında aşağıda yer alan CSS adresini ekleyin. Daha sonra <body></body> etikleri arasına JavaScript adresini ekleyin. Örnek görünüm aşağıdaki gibi olacaktır.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ></script>
</body>
</html>
CSS ve JavaScript dosyaları web sayfanıza import edildikten sonra Slider yapımına başlayabiliriz. Bootsrap kütüphanesi içerisinde farklı tasarımlarda ve farklı özelliklerde Carousel Slides örneklerini görebilirsiniz. Örnek Slider modellerine https://getbootstrap.com/docs/5.1/components/carousel/#slides-only adresinden ulaşabilirsiniz. Bootstrap kütüphanesi sayesinde JavaScript kodları ile uğraşmanıza gerek kalmaz. Class ve ID yapılarını kullanarak kolayca Slider tasarımarı yapabilirsiniz. Herşey anlaşılabilir ve oldukça esnek başka bir deyişle özelleştirilebilir yapıdadır.
SwiperJs ile Slider Yapımı
SwiperJS oldukça gelişmiş bir slider kütüphanesidir. Çok fazla özelleştirilebilir seçeneğe sahiptir. Bunun yanında slider üzerinde ince ayarlar yapmanıza da imkan sağlar. Pek çok JavaScript projesi ile birlikte kullanılmaya uygundur. Destek verdiği Javascript frameworkleri React, Svelte, Vue ve Angular’dır. Bunun yanında HTML, CSS ve JavaScript kodları ile de web projelerinizde SwiperJs Slider’ı kullanabilirsiniz.
Demo SwiperJs Slider seçeneklerini https://swiperjs.com/demos adresinden görüntüleyebilirsiniz. Son derece profesyonel düzeyde olan Slider seçenekleri ile web projelerinizi kaliteli ve dinamik hale getirebilirsiniz.
Merak ettiğiniz hususları yazımız altına yorum bırakarak bizlere iletebilirsiniz.
