Vuejs Kullanarak Slider Yapımı (detaylı Anlatım, Demo Ve Github Link)

19.05.2019

2722 Okunma

0 Favori

1 Yorum

Merhabalar uzun bir aradan sonra yeni içeriğimle karşınızdayım. Son zamanlarda sıklıkla karşılaştığım JS Framework'leri web dünyasını büyük ölçüde etkilemeye ve geliştirmeye devam ediyor. Javascript kodlarının kullanılabilirliği ve yetenekleri karşısında şaşırıp kalıyorum. Üniversite eğitim içerisinde deneyimleme fırsatı bulduğum ReactJS'in yanı sıra o sıralarda en büyük rakibi olan AngularJS'de front-end geliştiricileri piyasa ön plana çıkarmaya başladı. Bu framework'lerin yanı sıra son zamanlarda hızlı bir ivme yakalayan VueJS beni en çok kendine çeken javascript framework'ü oldu. Kullanıcı deneyimlerini sentezlemiş ve bunları çok iyi koordine etmiş. Hiç bir kurulum yapmadan bir link üzerinden dahi kullanabileceğiniz VueJS framework'ü zamanında Jquery'nin Javascript'te yapmış olduğu devrimi tekrarlayacak görüşündeyim. VueJS'i farklı bir yazımızda inceleyelim ve bu yazımızda da konudan çok sapmayalım.

Daha önceden yazmış olduğum Jquery Kullanarak Slider Yapımı içeriği büyük ilgi topladı. Bu yazımızı geliştirmek ve yeni teknolojilerle sizleride tanıştırmak adına aynı konu üzerinden ilerlemeyi düşündüm. İlk adım olarak basit bir HTML dosyası açalım ve VueJS'i dahil edelim.

<!doctype html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VueJS Kullanarak Slider Yapımı  (Detaylı Anlatım, Demo ve Github Link)</title>
    
    <!--VueJS'i projeye dahil ettik-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

</body>
</html>

Javascript dosyamızı projeye dahil ettikten sonra VueJS yapılandırmasını yapabiliriz. VueJS, işleyiş mantığında öncelikle etki edeceği bir eleman arar. Bu eleman üzerinde javascript işlemlerini gerçekleştirir ve kullanıcıya sunar. Hızlıca bunuda kod ile gösterelim. Body etiketlerine arasına kodlarımı ekliyorum.

<body>
<div id="app">
    {{ message }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>

VueJS dökümantasyonu içerisinde yer alan örnek kod bu şekildedir. Kodu ineceleyecek olursak app adında bir id'miz bulunmakta ve bu id'li "div" elamınımız VueJS tarafından "el" isimli parametre ile yönetilmektedir. Yani VueJS içerisinde yapacağımız tüm işlemler artık "app" id'sine sahip "div" içerisinde yer alacaktır. Buna örnek olarak VueJS içerisinde tanımlanmış "message" isimli veri "app" içerisine basılacaktır. VueJS'e basit girişimizi yaptıktan sonra Slider yapma işlemlerime başlayabiliriz.

<body>
<div id="app">
   <ul>
       <li v-for="item in sliderData"><a :href="item.url"><img :src="item.image" :alt="item.title"></a></li>
   </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            sliderData: [
                {title:"Slider 1.resim",image:"./img/2072092606531.jpg",url:"http://emirhanpervanlar.com"},
                {title:"Slider 2.resim",image:"./img/vVC0de.jpg",url:"http://emirhanpervanlar.com"},
                {title:"Slider 3.resim",image:"./img/wallpaper-500x500.jpg",url:"http://emirhanpervanlar.com"},
                ]
        }
    })
</script>
</body>

İnternetten üç adet resim indirip img klasörü altına aldım ve dosya yollarını sliderData değişkeni içerisine aldım. JSON veri kullanan arkadaşlar bu yapıya aşinadır çünkü bildiğiniz JSON yönetiyoruz. Verilerimizi aldıktan sonra geliyoruz işin en güzel ve keyifli yerlerine. VueJS'in farkını yarattığı belki de en büyük özelliği HTML kodlarının kolaylıkla yönetilebilmesidir. Örnek kodumuzda yer alan v-for komutu bir döngü yaratmamızı sağlamaktadır. Foreach döngüsüne aşina kişiler kodun çalışma mantığını bilirler. v-for komutu belirtilen verinin içerisinde yer alan elamanları grup halinde ele almayı sağlamaktadır. Yani bir listede yer alan elemanları sırayla bir elemana atar ve bu elamanı kullanmanızı sağlar. Bizde kodumuzda sliderData içerisinde yer alam verileri tek tek "item" değişkenine attık. Daha sonra VueJS'in nimetlerinden olan v-bind özelliğini kullanarak HTML değerlerine attık. Kodumuzda v-bind ifadesini göremiyebilirsiniz çünkü kısa yolu olan iki nokta üstüsteyi kullandık. Daha iyi anlamak için VueJS dökümanını inceleyebilirsiniz. Verilerimizde hazır olduğuna göre hadi son rütüşları yapalım.

<!doctype html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VueJS Kullanarak Slider Yapımı  (Detaylı Anlatım, Demo ve Github Link)</title>

    <!--VueJS'i projeye dahil ettik-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
   <ul :style="{marginTop:'-'+sliderIndex*sliderMargin+'px'}">
       <li v-for="item in sliderData"><a :href="item.url"><img :src="item.image" :alt="item.title"></a></li>
   </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            sliderIndex:0,
            sliderMargin:500,
            sliderData: [
                {title:"Slider 1.resim",image:"./img/vVC0de.jpg",url:"http://emirhanpervanlar.com"},
                {title:"Slider 2.resim",image:"./img/wallpaper-500x500.jpg",url:"http://emirhanpervanlar.com"},
                {title:"Slider 3.resim",image:"./img/2072092606531.jpg",url:"http://emirhanpervanlar.com"}
                ]
        },
        created(){
            this.startSlider();
        },
        methods:{
            startSlider(){
                const vue = this;
                setInterval(function(){
                    if(vue.sliderIndex === vue.sliderData.length-1)
                        vue.sliderIndex = 0;
                    else
                        vue.sliderIndex = vue.sliderIndex + 1;

                }, 5000);
            }
        }
    })
</script>
<style>
    #app{float:left;width:100%;margin: 50px 0;height:500px;overflow: hidden;}
    #app ul{margin:0 auto;position: relative;width:500px;height:500px;transition: margin-top .9s;}
    #app li{list-style:none;float:left;width:100%;height:500px;}
    #app li img{float:left;width:100%;height:500px;}
</style>
</body>
</html>

Kodlarımızı genel olarak inceleyecek olursak farklı olarak gördüğümüz "created", "methods" ve ":style" komutları bulunuyor. "created" komutu VueJS içerisinde yer alan bir özellik olup DOM'un oluşma anını yani sayfanın oluşma anını yakalamaktadır. "methods" özelliği VueJS içerisinde kullancağımız fonksiyonları barındırdığımız alandır. ":style" komutu VueJS içerisinde yer alan "v-bind" özelliğini kullanarak HTML nesnesinin style özelliğini değiştirmeye yaramaktadır.

Data'mız içerisine sliderIndex ve sliderMargin değişkenlerini ekledik. Bu değişkenler slider'ın o anki indexini ve ne kadar margin alacağını kontrol etmektedır. "setInterval" komutu ile zamanlı işlem yaparak sliderIndex değerimizi artırıyoruz ve slider akış özelliğini kazanmış oluyor. Geçişlerin daha gözükmesi için style'mız içerisine "transtion" özelliğini ekliyoruz. Bu örneğimizde resimlerimizin 500px olmasını ve yukarıdan aşağı doğru akmasını tercih ettik. Dilerseniz iki buton koyarak "methods" içersine fonksiyonları oluşturup slider'ın kontrolünü özelleştirebilirsiniz. Javascript kodlarından ne kadar kısa ve kolay olduğunu gördünüz. VueJS paylaşımlarının devamını getirmeye çalışacağım. İyi çalışmalar.