e
sv

HTML CSS JS ile Slider Yapımı

html css slider nasil yapılır
avatar

Yazılım Method

  • e 1

    Mutlu

  • e 0

    Eğlenmiş

  • e 1

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Slide özelliği, türü farketmeksizin her site için kullanılmakta olan ve web sitelerinin yapı taşı olarak bilinen eklentilerdir. Bu durum, 2021 yılında milyonlarca site tarafından Slider kullanılmasını da zorunluluk haline getirmiştir. Her ne kadar kişisel bloglar için de tercih edilen Slider uygulamaları, daha çok iş tabanlı kurumsal siteler, e-ticaret platformları veya haber sitelerinde görülmektedir.

Slider, web sitelerinin durağan halden çıkmasına ve kullanıcıların daha iyi bir hizmet alabilmelerine yardımcı olmaktadır. Slider özellİğinin en önemli avantajı, kullanıcıların siteye girdikleri anda can alıcı içerikleri platformun en üstünde görebilmeleridir. Üstelik Slider, içeriklerin görsel olarak sunulabilmesini de mümkün kılmaktadır. Bu sayede kullanıcılar, yazı bütünlüğü içerisinde sıkışmadan içeriklere göz atabilmektedirler.

Slider Örnekleri Nelerdir?

Sliderler, internet dünyasında yıllardır tercih edildikleri için milyonlarca farklı örnekle karşımıza çıkabilmektedir. Bu durum, eskiden kullanılan tek tip Slider özelliklerinin artık daha modern ve yenilikçi bir halde kullanılmasına da zemin hazırlamıştır. İnternet siteleri, her geçen gün daha kaliteli ve rakiplerinden daha üstün Slider örnekleri hazırlayabilmek için çoğun çaba sarf etmektedirler.

Slider özelliği, kodlama yapısına göre otomatik olarak kendiliğinden ön tanımlı şekilde çalışabilmektedir. Fakat bazı Slider örneklerinde kullanıcı aksiyonu önemlidir. Yani bazı Sliderlar, kullanıcı hareketini göze alarak çalışmaya başlamaktadır.

Kısacası Slider örnekleri için dünya üzerinden milyonlarca çeşitli farklılık gösterilebilmektedir. En çok tercih edilen Slider tipleri ise genellikle tasarımla uyumlu olan ve içerik yapısını en modern şekilde yansıtan çeşitlerdir. Ayrıca hızlı ve hafif Slider çeşitleri de milyonlarca web sitesi tarafından tercih edilmeye devam edilmektedir.

Slider Nasıl Yapılır?

Slider yapımı, günümüzde milyonlaca kişi tarafından merak edilmektedir. Bu durum, son zamanlarda Slider yapılarının daha modern ve yenilikçi olması ile açıklanmaktadır. Slider yapımı, genellikle HTML5, CSS, JS, jQuery ve PHP gibi bazı yazılım dilleri sayesinde mümkün olmaktadır. Bunların yanı sıra dönemsel olarak bazı Slider modelleri için özel framework uygulamaları da yayınlanabilmektedir.

Slider yapımı, CMS sistemleri haricinde kod bilgisine dayalı olarak gerçekleştirilmektedir. Bu nedenle Slide yapımı için programlama diline hakim olan birinden yardım almanız şarttır. Fakat WordPress benzeri bir uygulamayı tercih ediyorsanız çok az programlama bilgisiyle de Slider oluşturabilmeniz mümkündür. Bunun için WordPress üzerinden eklentiyi indirmeli ve üzerinde yoğun bir uğraş saf etmelisiniz.

html css slider nasıl yapılır ?
html css slider nasıl yapılır ?

HTML ile Slider Yapımı

Web tasarımı konusunda her kullanıcının karşısına çıkmakta olan HTML, en köklü yazılım geliştirme konusunda işaret dilleri arasında yer almaktadır. Açılım olarak Hyper Text Markup Language anlamına gelmektedir. Genel kanının aksine HTML bir programlama dili değildir. Bu nedenle HTML ile yapabilecekleriniz sınırlıdır. Fakar Slider yapmak için HTML kullanabilirsiniz.

Web sitelerinde yer alan HTML kodları, sayfalar ve uygulamalar arasında yer alan yapı dinamiklerini, blok alıntılarını, paragrafları ve başlık hiyerarşisini oluşturmak için kullanılmaktadır. Uygulamalar sırasında öğrenilen kolay HTML kodları ile web sitenizin yapı taşlarını oluşturabilirsiniz. Ayrıca HTML, son zamanlarda Slider yapımı için de sıklıkla tercih edilmektedir. Bundan ötürü sliderimizın iskeletini html ile oluştururuz.

CSS ile Slider Yapımı

CSS biçimlendirme dili de aynı HTML gibi web sitelerinde mutlaka yer alması gereken diller arasında yer almaktadır. CSS’de HTML gibi programlama dili değildir. Bu nedenle öğrenmesi nispeten daha kolaydır. Ayrıca CSS, Slider yapımı için de temel alınan diller arasında bulunmaktadır.

CSS kodları, HTML ile oluşturulan temel site yapısının görsel bir hareket kazanabilmesi için tercih edilmektedir. Bu sayede Slider bölümleri de göze hitap edecek şekilde oluşturularak kullanıcıların beğenilerine sunulabilmektedir. Yani işimizin tasarım kısmını css ile yapacağız. Sadece html,css ilede slider yapılır ama animasyonel olarak eğer javascriptide eklerseniz daha dinamik yapıya sahip olacaksınız.

JS ile Slider Yapımı

Sitelerin daha dinamik bir hal almasını sağlayan Javascript yazılım dilidir. HTML ve CSS’e göre öğrenim konusunda çok daha fazla zorluklar içermektedir. Fakat günümüzde JS kodları olmadan bir site kurabilmek neredeyse imkansızdır. Slider bölümü de JS kodları ile daha önemli bir hale gelmiştir. JS kodları, Slider yapımı için yıllardır tercih edilmektedir. HTML ve CSS ile temelleri atılan Slider bölümleri, JS kodları ile daha dinamik bir hale gelebilmektedir. Siz de sitenizi durağanlıktan kurtarmak istiyorsanız JS Slider yapımını öğrenebilirsiniz

HTML , CSS ve Javascript ile Slider Yapımı

Muhteşem 3’lüyü ve ek kütüphaneler kullanarak bir slider tasarımı yapacağız. Slider yaparken bir javascript kütüphanesi olan owlcarousel2 ve jquery kütüphane kullanmamızın temel nedeni işimizi kolaylaştırmak.

html,css ve js slider yapımı
html,css ve js slider yapımı

Owl carouselin çalışma mantığı ise html elementine bir class veririz bu classın altında kalan child elementler (çocuk) slider içeriği olur .Örnek olarak aşağıda verdim

<!-- OWL Carousel HTML İskeleti -->
<div class="owl-carousel">
  <div> Slider İçereği 1 </div>
  <div> Slider İçereği 2 </div>
  <div> Slider İçereği 3 </div>
  <div> Slider İçereği 4 </div>
  <div> Slider İçereği 5 </div>
</div>

şimdi işin css kısmına geldiğimizde ise OWL Carousel bize hazır olarak css teması sunuyor biz bunu kullanacağız. Javascript’te ise projemize jquery dahil edeceğiz . Owl corusel fonksiyonunu çalıştırıp html’deki classımızı seçiyoruz ve responsive slider için tanımlamalar yapacağız. Örnek aşağıda bıraktım

loop : kendiliğinden dönme , margin: slider dış boşluk değer , geri kalanları ise responsive’de kaç tane gözükecekleri yazmaktadır

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
})

Bütün Bu yapıları topladığımızda ise aşağıdaki gibi html çıktımız oluyor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider Ornek</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.green.min.css" integrity="sha512-C8Movfk6DU/H5PzarG0+Dv9MA9IZzvmQpO/3cIlGIflmtY3vIud07myMu4M/NTPJl8jmZtt/4mC9bAioMZBBdA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <h1>www.YazılımMethod.com Slider Örneği</h1>

    <div class="owl-carousel">
        <div> Slider İçereği 1 </div>
        <div> Slider İçereği 2 </div>
        <div> Slider İçereği 3 </div>
        <div> Slider İçereği 4 </div>
        <div> Slider İçereği 5 </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $('.owl-carousel').owlCarousel({
            loop:true,
            margin:10,
            responsiveClass:true,
            responsive:{
                0:{
                    items:1,
                    nav:true
                },
                600:{
                    items:2,
                    nav:false
                },
                1000:{
                    items:2,
                    nav:true,
                    loop:false
                }
            }
        })
    </script>
</body>
</html>

Owl Carousel dökümantasyonunu buradan inceliyebilirsiniz.

Sıradaki içerik:

HTML CSS JS ile Slider Yapımı