Çoğu zaman web sayfalarımıza slider eklemek istediğimizde hazır eklentiler bulmaya çalışırız. Aslında bu konuda çok güzel eklentiler olsada birçoğu bir slider için gereğinden büyük boyutta dosyalar içeriyor. İster istemez bunlar da web sayfanızın açılış hızını olumsuz yönde etkiliyor. Bunun önüne geçmek adına bu yazımda Html, Css ve Jquery kodlarıyla slider yapımı konusunu anlatacağım.
Slider yapımı düşünüldüğü kadar zor bir hadise değildir. Yazacağımız kodları kendi bilgisayarınızda uygulayıp bazı yerlerini değiştirerek tarayıcıdaki değişimleri incelemeye çalışın. Böylece kodları çok daha hızlı kavramış olursunuz.
Kodları mümkün olabildiğince geniş tutacağım.
Yani, kimisi slider kullanırken üzerinde caption dediğimiz yazıları kullanmak isterken kimisi de kullanmak istemez. Yada sliderın altındaki dot dediğimiz yuvarlak noktaları.
Bu yüzden kullanmak isteyenler olur diye kodların içerisinde tüm bunları bulundurdum. Bu kısımları çıkarmak isteyenler ilgili Html, Css ve Jquery kodlarını çıkararak projelerine ekleyebilirler.
Kodlarımızı yazdıktan sonra uygulamamız şu şekilde olacak.
Not : Resimlerin boyutunu 800×380 px olarak ayarladım.
Gördüğünüz gibi bir sliderda olması gereken tüm özellikler bulunuyor.
Yazacağımız kodlar üzerinde istediğiniz değişiklikleri yaparak kendi web sayfalarınıza uygun hale getirebilirsiniz.
Son olarak bir slider da olabilecek alanları resim üzerinde göstermek istiyorum.
⇒ Sliderın sağında ve solunda bulunan ok işaretleriyle sliderın resimleri arasında geçişleri sağlayabiliriz.
⇒ Sliderın altında bulunan yuvarlaklar ile sliderın resimleri arasında geçişleri sağlayabiliriz.
⇒ Resmin üzerinde bulunan Caption alanıyla da resim hakkında kısa bilgiler verebiliriz.
Konuyu daha fazla uzatmadan slider kodlarına geçelim.
Slider Yapımı Html Kodları
|
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 |
<!--carousel start--> <div class="carousel-one"> <div class="mySlides fade-In"> <div class="number-text">1/3</div> <img src="slider-1.jpg" /> <div class="caption-text">Caption Text1</div> </div> <div class="mySlides fade-In"> <div class="number-text">2/3</div> <img src="slider-2.jpg" /> <div class="caption-text">Caption Text2</div> </div> <div class="mySlides fade-In"> <div class="number-text">3/3</div> <img src="slider-3.jpg" /> <div class="caption-text">Caption Text3</div> </div> <!--Next and previous buttons start--> <a class="prev-slide">❮</a> <a class="next-slide">❯</a> <!--Next and previous buttons end--> </div> <br /> <!--dots start--> <div class="dots"> <span class="dot dot1"></span> <span class="dot dot2"></span> <span class="dot dot3"></span> </div> <!--dots end--> <!--carousel end--> |
⇒ img etiketlerinin src niteliklerine kullanmak istediğiniz resimlerin Url‘lerini yazmalısınız.
Slider Yapımı Css Kodları
|
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 |
<style> /*carousel start*/ .carousel-one { max-width: 1000px; margin: auto; position: relative; } .carousel-one .mySlides { display: none; } .carousel-one .mySlides img { width: 100%; } .carousel-one .mySlides .caption-text { color: #fff; font-weight: 900; font-size: 30px; padding: 8px 12px; position: absolute; bottom: 38px; width: 100%; text-align: center; } .carousel-one .mySlides .number-text { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0px; } .carousel-one .fade-In { animation-name: fade; animation-duration: 1.5s; } .carousel-one .prev-slide, .carousel-one .next-slide { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: #9A9ABA; font-weight: bold; font-size: 18px; border-radius: 0px 3px 3px 0px; transition: 0.6s ease; } .carousel-one .prev-slide:hover, .carousel-one .next-slide:hover { background-color: rgba(0, 0, 0, 0.8); text-decoration: none; } .carousel-one .next-slide { right: 0px; border-radius: 3px 0px 0px 3px; } .dots{ text-align: center; } .dot { cursor: pointer; height: 15px; width: 15px; margin: 0px 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .dot:hover { background-color: #717171; } .active { background-color: #717171; } @keyframes fade { from { /*IE8*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /*IE 5-7*/ filter: alpha(opacity=40); /*Modern Browsers*/ opacity: 0.4; } to { /*IE8*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*IE 5-7*/ filter: alpha(opacity=100); /*Modern Browsers*/ opacity: 1; } } /*carousel end*/ </style> |
Slider Yapımı Jquery Kodları
|
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 |
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script> //carousel start var slideIndex = 1; showSlides(slideIndex); //Next and previous buttons start $(".prev-slide").click(function() { plusSlides(-1); }); $(".next-slide").click(function() { plusSlides(1); }); function plusSlides(n) { showSlides(slideIndex += n); } //Next and previous buttons end //dots start $(".dot1").click(function() { currentSlide(1); }); $(".dot2").click(function() { currentSlide(2); }); $(".dot3").click(function() { currentSlide(3); }); function currentSlide(n) { showSlides(slideIndex = n); } //dots end function showSlides(n) { var i; var slides = $(".mySlides"); var dots = $(".dot"); if (n > slides.length) { slideIndex = 1; } if (n < 1) { slideIndex = slides.length; } for (var i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (var i = 0; i < dots.length; i++) { dots[i].className.replace("active", ""); dots[i].classList.remove("active"); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; } //auto slides start /* var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = $(".mySlides"); for (var i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) { slideIndex = 1; } slides[slideIndex - 1].style.display = "block"; setTimeout(showSlides, 5000); // 5 saniyede bir resim değişecek } */ //auto slides end //carousel end </script> |
Jquery kodları içerisinde son kısımda bulunan kodları yorum satırları haline getirdim. Bu kodları aktif ederseniz sliderda bulunan resimler otomatik olarak belli bir saniyede kendiliğinden değişecektir.
Örneğin resimlerin 3 saniyede bir değişmesini istiyorsanız 3000 olarak yazmalısınız. Bu kısmı da kullanmak isteyen olur diye eklemek istedim.
Html, Css ve Jquery kodları yazarak sliderların yapımı bu şekilde.
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
Yeni bir yazımda görüşmek üzere.
dots active eklememişsiniz auto ya eklemeye çalıştım fakat beceremedim yardımcı olurmusunuz?