giriiş
Kaydırıcılar, her karenin sırayla kaydırılabildiği bir dizi çerçevedir. Kaydırıcıdaki çerçeveler resim, video veya hatta HTML öğeleri (açıklamalar veya yorumlar gibi) olabilir. Kaydırıcılar birçok modern web sitesinde bulunur. Geliştiriciler, web sitesi hakkında bilgi iletmek istediklerinde ancak çok fazla yer kaplamasını istemedikleri durumlarda kaydırıcıları kullanırlar.
Örneğin, bir geliştirici bir ürün web sitesi geliştiriyorsa, kullanıcıya güvenip ürününü satın alabilmesi için referans veya incelemeler göstermek isteyebilir. Geliştirici, kullanıcıların her incelemeye kolayca göz atıp okuyabileceği bir kaydırıcı oluşturabilir. Aynı şey ürün görselleri için de yapılabilir; geliştirici, kullanıcının ürünü 360 derece görebilmesi için ürün görsellerinden oluşan bir kaydırıcı oluşturabilir.
Ön koşullar
HTML, CSS ve JavaScript kullanarak temel bir CSS resim kaydırıcısı oluşturmayı öğreneceğiz. Neler olup bittiğini ve ne yaptığımızı tam olarak anlamak için önceden bilmeniz gereken bazı kavramlar var. Şimdi bunlara bir göz atalım.
- HTML: Öğeler ve etiketler gibi temel HTML bilgisine sahip olmanız gerekir. Bir kaydırıcı oluşturmak için çeşitli etiket ve öğeler kullanacağız, bu nedenle kaydırıcımızdaki her etiketin veya öğenin rolünü bilmelisiniz.
- CSS: Kaydırıcıyı oluşturmak için CSS'i yoğun bir şekilde kullanacağız. Yığınlama, Z-indeksi, konum ve animasyonlar gibi birkaç orta düzey CSS kavramını bilmeniz gerekir. Kaydırıcıyı oluştururken bunların hepsine ihtiyacınız olacak.
- JavaScript: Değişken tanımlama, for döngüsü kullanımı ve DOM manipülasyonu gibi temel JavaScript dillerine hakim olmalısınız. Bunlar, kaydırıcıyı manipüle etmek ve efektler oluşturmak için kullanılır.
Tüm bu kavramlara aşina olduktan sonra, bir kaydırıcı oluşturalım. Her kavramı adım adım ele alacağız ve neden böyle yaptığımızı açıklayacağız.
Adım 1: HTML kodunu kullanarak temel bir resim kaydırıcı düzeni oluşturun
Kaydırıcımızın temel iskeletini oluşturalım. Yukarıda da belirttiğimiz gibi, kaydırıcılar bir dizi çerçeveden oluşur. Bir CSS resim kaydırıcısı oluşturacağız.
Öncelikle, kaydırıcı görsellerini ve işlevlerini içeren ana div'i oluşturuyoruz. Ayrıca, arka plan rengini değiştirmek ve ana div'in yüksekliğini ve genişliğini ayarlamak gibi bazı stil eklemeleri de yapıyoruz.
<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
</style>
</head>
<body>
<div id="parent-container">
<!-- This div will contain all images and buttons we will be using for Slider
-->
</div>
</body>
</html>Bunu da tamamladıktan sonra bir sonraki bölüme geçelim.
Adım 2: Önceki ve Sonraki Düğmelerini Ekleyin
Kaydırıcıların iki düğmesi vardır: önceki ve sonraki. Bunlar, kaydırıcı çerçeveleri arasında gezinmek için kullanılır. Üst bölümümüze temel düğmeler ekleyeceğiz. Bu düğmeler, kullanıcının karuseldeki görseller arasında gezinmesine yardımcı olacaktır. Basitlik açısından, düğme metni olarak sırasıyla önceki ve sonraki öğeleri temsil eden < ve > işaretlerini kullanacağız.
Temel HTML düğmelerini eklemenin yanı sıra, bunları merkez div'e göre dikey olarak hizalanacak şekilde de biraz ayarlayacağız. Bu, kaydırıcıda kaydırmayı kolaylaştırmak için yapılıyor. Düğmeleri dikey olarak hizalamak için göreceli konumlandırma kullanacağız.
<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
}
.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}
.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}
.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.navigation .nav-btn:hover {
background: white;
}
</style>
</head>
<body>
<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>
</div>
</body>
</html>Çıktı
Adım 3: Kaydırıcıya gerekli görselleri ve metni ekleyin
Düğmeleri ekledikten sonra, şimdi görselleri ekleme zamanı. Çiçek görsellerini kullanarak bir CSS görsel kaydırıcısı oluşturacağız. Görseller, konum ve Z-indeksi yardımıyla üst üste istiflenecek. Yalnızca bir görselin görünür olması gerektiği için, bir temel sınıf kullanıp görünürlüğünü "visible" olarak ayarlayacağız. Geri kalan görseller, kullanıcıya gösterilmelerini önlemek için gizlenecek.
Kaydırıcıda ayrıca kullanıcının o anda hangi görseli görüntülediğini gösteren bir metin bulunur. Bu, kullanıcının dönen görselde kaç görsel olduğunu ve bunların sırasını anlamasını sağlar.
<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
}
.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}
.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}
.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.navigation .nav-btn:hover {
background: white;
}
.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;
}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}
.images {
position: absolute;
display: none;
}
.main {
display: block;
}
.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}
</style>
</head>
<body>
<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>
<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>
</div>
</body>
</html>
Çıktı
Adım 4: JavaScript kodunu kullanarak iki düğmeyi etkinleştirin
Kaydırıcı sınıfımızı oluşturduk ve tüm görselleri ekledik. Şimdi önceki ve sonraki butonlarını etkinleştirmemiz gerekiyor. JavaScript kullanacağız.
Öncelikle, bu butonlara bir olay dinleyicisi eklememiz gerekiyor. Kullanıcı önceki veya sonraki butona her tıkladığında, o butonla ilgili bir eylem gerçekleştirilmelidir. Peki bunu nasıl yapacağız?
Kullanıcıya hangi görselin görünür olacağını belirtmek için ana sınıfı kullandık. Bu sınıfa sahip olan görseli kontrol etmemiz gerekiyor. Diğer tüm görseller gizlenecek ve kullanıcıya yalnızca ana sınıfa sahip görsel görünür olacak. Bunu başarmak için DOM manipülasyonu kullanacağız. DOM manipülasyonu, ana sınıfı mevcut bir görselden kaldırıp yeni bir görsele eklememize yardımcı olur.
Şimdi hangi resmin ana sınıfa sahip olması gerektiğini belirlemek için önceki ve sonraki düğmelerinin olay dinleyicilerini kullanıyoruz. İlk olarak kaydırıcıdaki tüm resimleri almamız gerekiyor. Üst kaydırıcı karuselinin resimlerden oluştuğunu görebiliriz. Bunu DOM'daki Sorgu Seçici'yi kullanarak elde edebiliriz. Şimdi tüm resim div'lerine sahip olduğumuzda, uygun olanı seçip ana sınıfı ona eklememiz gerekiyor. Geri kalanların ana sınıfı olmayacak ve dolayısıyla kullanıcı için görünmez olacaklar. Başlangıçta 0'ı gösteren bir değişken atayabiliriz. Bu değişken bize hangi resmin o anda kullanıcıya görünür olduğunu söyler. Kullanıcı sonraki veya önceki üzerine her tıkladığında, değişkenin değerini buna göre artırır veya azaltırız. Değer 0 ise ve kullanıcı önceki değere tıklarsa, değeri (div'deki resim sayısı - 1) olarak değiştiririz. Benzer şekilde, değişken son resimdeyse ve kullanıcı sonraki üzerine tıklarsa, değeri 0 olarak değiştiririz.
<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
}
.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}
.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}
.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.navigation .nav-btn:hover {
background: white;
}
.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;
}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}
.images {
position: absolute;
display: none;
}
.main {
display: block;
}
.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}
</style>
</head>
<body>
<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>
<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>
</div>
<script>
const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const images = document.querySelector('.slider-carousel').children;
const totalImages = images.length;
let currentIndex = 0;
// Event Listeners to previous and next buttons
previous.addEventListener('click', () => {
previousImage()
})
next.addEventListener('click', () => {
nextImage();
})
// Function to go to next Image
function nextImage(){
images[currentIndex].classList.remove('main');
if(currentIndex == totalImages-1){
currentIndex = 0;
}
else{
currentIndex++;
}
images[currentIndex].classList.add('main');
}
// Function to go to previous Image
function previousImage(){
images[currentIndex].classList.remove('main');
if(currentIndex == 0){
currentIndex = totalImages-1;
}
else{
currentIndex--;
}
images[currentIndex].classList.add('main');
}
</script>
</body>
</html>
Çıktı
Tebrikler, HTML, CSS ve JavaScript kullanarak bir CSS kaydırıcısı oluşturdunuz.
Slayt gösterisi işlevi
Kaydırıcımız şu anda manuel kontrolle çalışıyor. Yani, kullanıcı önceki veya sonraki düğmesine tıklayana kadar görsel değişmiyor. Ancak, çevrimiçi olarak sunulan kaydırıcıların çoğu bu şekilde çalışmıyor. Belirli bir süre sonra kareleri otomatik olarak değiştirmelerini sağlayan bir slayt gösterisi efektine sahipler.
Bunu kaydırıcımızda da yapabiliriz. JavaScript kullanarak, belirtilen süreden sonra bir sonraki işlevi otomatik olarak çağıran setInterval işlevini kullanabiliriz. Bu, kaydırıcının otomatik olarak çalışmasına ve belirtilen süreden sonra kaydırıcıyı değiştirmesine yardımcı olur.
<!DOCTYPE html>
<html>
<head>
<title>Slider in CSS</title>
<style>
body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
}
.navigation-buttons .previous {
position: absolute;
z-index: 10;
font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}
.navigation-buttons .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}
.navigation-buttons .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.navigation .nav-btn:hover {
background: white;
}
.slider-carousel {
margin-top: 20px;
transition: all 0.3s ease;
}
.slider-carousel img {
width: 100%;
transition: all 0.3s ease;
border:8px solid white;
}
.images {
position: absolute;
display: none;
}
.main {
display: block;
}
.image-text {
position: absolute;
bottom: 0;
width: 103%;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.3);
height: 35px;
}
</style>
</head>
<body>
<div id="parent-container">
<div class="navigation-buttons">
<div class="previous nav-btn"><</div>
<div class="next nav-btn">></div>
</div>
<div class="slider-carousel">
<div class="images main">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg" alt="flower 1" />
<div class="image-text">Image 1</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg" alt="flower 2" />
<div class="image-text">Image 2</div>
</div>
<div class="images">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="flower 3" />
<div class="image-text">Image 3</div>
</div>
</div>
</div>
<script>
const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const images = document.querySelector('.slider-carousel').children;
const totalImages = images.length;
let currentIndex = 0;
// Event Listeners to previous and next buttons
previous.addEventListener('click', () => {
previousImage()
})
next.addEventListener('click', () => {
nextImage();
})
setInterval(()=>{
nextImage();
},1000);
// Function to go to next Image
function nextImage(){
images[currentIndex].classList.remove('main');
if(currentIndex == totalImages-1){
currentIndex = 0;
}
else{
currentIndex++;
}
images[currentIndex].classList.add('main');
}
// Function to go to previous Image
function previousImage(){
images[currentIndex].classList.remove('main');
if(currentIndex == 0){
currentIndex = totalImages-1;
}
else{
currentIndex--;
}
images[currentIndex].classList.add('main');
}
</script>
</body>
</html>
Çıktı
Navigasyon noktaları
Kaydırıcınızda başlık veya resim metni kullanmanın yanı sıra, gezinme noktaları da kullanabilirsiniz. Gezinme noktaları, metin veya başlığa benzer şekilde çalışır. Kullanıcıya o anda hangi karede olduğunu gösterirler. Gezinme noktaları, kullanışlı ve kolay oluşturulabildikleri için birçok modern kaydırıcıda kullanılır. Gezinme noktaları çoğunlukla radyo düğmeleridir.
Gezinme noktalarını kullanmanın avantajı, kullanıcının kaydırıcının her karesine sorunsuz bir şekilde erişebilmesini sağlamasıdır. Kullanıcının her bir görsele tek tek erişmesi gereken geleneksel kaydırıcıların aksine, gezinme noktaları kullanıcının her bir kareyi veya görseli, ilgili görsele karşılık gelen gezinme noktasına tıklayarak ziyaret etmesini sağlar.
Gezinme noktalarının ardındaki temel prensip, kayan görsellere benzer. Mevcut görsel, etkin bir sınıfa sahip ilgili bir gezinme düğmesine sahip olacaktır. Görsel değiştikten sonra, etkin sınıf geçerli görsele ve geçerli gezinme noktasına taşınır veya eklenir.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.images {display: none}
img {
vertical-align: middle;
width:100%;
}
/* Slideshow container */
.carousel-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.previous, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit seethrough */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* The dots/bullets/indicators */
.navigation-dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .navigation-dot:hover {
background-color: #717171;
}
</style>
</head>
<body>
<div class="carousel-container">
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg">
</div>
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg">
</div>
<div class="images fade">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
</div>
<!-- Previous and Next Buttons -->
<a class="previous" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- Navigation Dots-->
<div style="text-align:center">
<span class="navigation-dot" onclick="currentSlide(1)"></span>
<span class="navigation-dot" onclick="currentSlide(2)"></span>
<span class="navigation-dot" onclick="currentSlide(3)"></span>
</div>
<script>
var currentIndex = 1;
//Show current image
showSlides(currentIndex);
//Function to move Next
function plusSlides(n) {
showSlides(currentIndex += n);
}
//Function to move back
function currentSlide(n) {
showSlides(currentIndex = n);
}
//Initiate moving of slides
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("images");
var dots = document.getElementsByClassName("navigation-dot");
if (n > slides.length) {currentIndex = 1}
if (n < 1) {currentIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[currentIndex-1].style.display = "block";
dots[currentIndex-1].className += " active";
}
</script>
</body>
</html>
Çıktı
Alternatif örnek
JavaScript kullanılarak oluşturulan kaydırıcılar, tarayıcıda JavaScript etkin olduğu sürece sorunsuz çalışır. Kullanıcı JavaScript'i kapatır kapatmaz, kaydırıcı artık çalışmaz çünkü kaydırıcının işlevselliğini sağlamak için JavaScript kullanır.
Kaydırıcı oluşturmak için JavaScript kullanmanıza gerek yok. Sadece HTML ve CSS kullanarak bile bir kaydırıcı oluşturabilirsiniz. Tek yapmanız gereken, kullanıcı önceki veya sonraki düğmesine tıkladığında nasıl çalıştığını anlamaktır. HTML ve CSS kullanılarak oluşturulan bir kaydırıcı daha az tarayıcı belleği kullanır ve tarayıcıda JavaScript devre dışı bırakılsa bile çalışır.
Aktif bir sınıf oluşturmak için özniteliklerini ve özelliklerini kullanabilirsiniz. Gezinme düğmesi için, düğmeye tıklandığında veya üzerine gelindiğinde çalışacak aktif bir sınıf oluşturabilirsiniz. Bu, JavaScript'e benzer şekilde çalışır, ancak bunu başarmak için DOM manipülasyonu yerine, hedef vb. gibi CSS fonksiyonlarını kullanacağız.
Sizin için HTML ve CSS kullanarak örnek bir kaydırıcı oluşturduk. Kullanıcının en son hangi gezinme noktasına tıkladığını belirlemek için check gibi sözde aktif sınıflar kullandık. Ardından, görseli kullanıcıya buna göre gösteriyoruz. Görselleri gizlemediğimiz için her görsel için kenar boşluğu ve dolguyu ayarladık.
<!DOCTYPE html>
<html>
<head>
<title> Slider using HTML and CSS </title>
<style>
img{
height:100%;
width:100%;
}
#frame {
margin: 0 auto;
height:400px;
width: 600px;
max-width: 100%;
}
#frame input[type=radio] {
display: none;
}
#frame label {
cursor: pointer;
text-decoration: none;
}
#slides {
padding: 10px;
background: #00F;
position: relative;
z-index: 1;
}
#overflow {
width: 100%;
overflow: hidden;
}
#frame1:checked~#slides .inner {
margin-left: 0;
}
#frame2:checked~#slides .inner {
margin-left: -100%;
}
#frame3:checked~#slides .inner {
margin-left: -200%;
}
#slides .inner {
transition: margin-left 800ms
cubic-bezier(0.770, 0.000, 0.175, 1.000);
width: 400%;
line-height: 0;
height: 300px;
}
#slides .frame {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: black;
}
#controls {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
position: relative;
}
#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}
#controls label:hover {
opacity: 1;
}
/* active class for images*/
#frame1:checked~#controls label:nth-child(2),
#frame2:checked~#controls label:nth-child(3),
#frame3:checked~#controls label:nth-child(1){
float: right;
margin: 0 -50px 0 0;
display: block;
}
/* active class for navigation button*/
#frame1:checked~#controls label:nth-last-child(2),
#frame2:checked~#controls label:nth-last-child(3),
#frame3:checked~#controls label:nth-last-child(1){
float: left;
margin: 0 0 0 -50px;
display: block;
}
#bullets {
margin: 150px 0 0;
text-align: center;
}
#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}
#frame1:checked~#bullets label:nth-child(1),
#frame2:checked~#bullets label:nth-child(2),
#frame3:checked~#bullets label:nth-child(3){
background: #444;
}
</style>
</head>
<body>
<div id="frame">
<input type="radio" name="frame" id="frame1" checked />
<input type="radio" name="frame" id="frame2" />
<input type="radio" name="frame" id="frame3" />
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__480.jpg">
</div>
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg">
</div>
<div class="frame">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg">
</div>
</div>
</div>
</div>
<div id="controls">
<label for="frame1"></label>
<label for="frame2"></label>
<label for="frame3"></label>
</div>
<div id="bullets">
<label for="frame1"></label>
<label for="frame2"></label>
<label for="frame3"></label>
</div>
</div>
</body>
</html>Çıktı
Sonuç
- Kaydırıcılar, her bir karenin sırayla kaydırılabildiği bir dizi çerçevedir.
- Bunlar günümüzde pek çok web sitesinde yorum veya referansları görüntülemek için kullanılıyor.
- Bir kaydırıcı oluşturmak için kullanıcının HTML etiketleri, yığınlama, konumlandırma gibi CSS kavramları ve değişkenler ve DOM manipülasyonu gibi temel JavaScript kavramlarının farkında olması gerekir.
- Kaydırıcılar, etkin bir sınıfın açık olarak görüntülenmesiyle çalışır. Diğer çerçeveler kapalı olarak görüntülenir. Kullanıcı bir düğme veya noktanın üzerine geldiğinde, DOM manipülasyonu kullanarak etkin sınıfa sahip öğeyi değiştiririz.
- Kullanıcının tarayıcısında JavaScript etkin değilse kaydırıcı çalışmayacaktır.
- Kaydırıcı oluşturmak için yalnızca HTML ve CSS kullanabilirsiniz. Bu, tarayıcı belleğinden ve işlem süresinden tasarruf sağlar. Ayrıca, HTML ve CSS'yi destekleyen tüm tarayıcılarda da çalışır.
