Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

JS Slider Uygulaması

mertefe

Selamün Aleyküm Herkese,

JS yolculuğumda yapmış olduğumuz dandik bir slider uygulaması paylaşmak istedim. 😀

Amaç : parcel.js bundler kullanarak dandik bir slider yapmak.
Github

npm run dev diyerek index.html içi dinleniyor ve scipt tagı içindeki .js ve bağımlılıklarını bundle haline getirip bize public isimli bir klasör oluşturup içine atıyor. ayrıca parcel.js içinde statik dosya kopyalama olmadığı için parcel.js için hazırlanmış bir kütüphane buldum. aşağıdaki package.json içindeki staticFiles kısmı proje klasörü içindeki storage altındaki herşeyi script'deki dev isimli komutun output ettiği yere atıyor yani public klasörümüze.

Hızlı incelemek isteyenler için kodlar aşağıdadır.
Hatamız varsa affola.
Saygılar.

package.json

{
  "name": "sliderapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "parcel src/index.html --out-dir public",
    "build": "parcel build src/index.html --out-dir public"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.5",
    "parcel-plugin-static-files-copy": "^2.6.0",
    "sass": "^1.36.0"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",
    "bootstrap": "^5.0.2"
  },
  "staticFiles": {
    "staticPath": "storage",
    "watcherGlob": "**"
  }
}

src / index.html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Slider APP</title>
</head>
<body>
<div class="container mt-2">
    <div class="row justify-content-center">
        <div class="col-md-6">
           <div class="card">
               <img id="slideImage" class="card-img-top">
               <div class="card-body">
                   <h5 id="slideName" class="card-title">Slide 1</h5>
                   <p class="card-text"></p>
                   <a id="slideLink" href="#" class="card-link">Read More</a>
               </div>
               <div class="card-footer">
                   <div class="d-flex justify-content-between">
                       <button id="slideLeft" class="btn btn-sm btn-primary"><i class="fas fa-arrow-circle-left fa-2x"></i></button>
                       <div class="form-check">
                           <input type="checkbox" class="form-check-input" id="autoSlide">
                           <label for="autoSlide" class="form-check-label">Automatic</label>
                       </div>
                       <button id="slideRight" class="btn btn-sm btn-primary"><i class="fas fa-arrow-circle-right fa-2x"></i></button>
                   </div>
               </div>
           </div>
        </div>
    </div>
</div>
<script src="js/app.js"></script>
</body>
</html>

src / js / slider.js

const slides = [
    {
        name : "Slide 1",
        image : "img/slide1.jpg",
        link : "link-1"
    },
    {
        name : "Slide 2",
        image : "img/slide2.jpg",
        link : "link-2"
    },
    {
        name : "Slide 3",
        image : "img/slide3.jpg",
        link : "link-3"
    }
]

let index = 0;
const slideCount = slides.length ;

let settings = {
    duration : '2000',
    random : false
}
let interval;

const slideLeftButton = document.getElementById("slideLeft");
const slideRightButton = document.getElementById("slideRight");
const autoSlideCheck = document.getElementById("autoSlide");


function init(settings){
    let prev;
    interval = setInterval(function (){
        if(settings.random){
            do{
                index = Math.floor(Math.random() * slideCount);
            }while (index === prev)
            prev = index;
        }else{
            if(index < slideCount - 1){
                index++;
            }else{
                index = 0;
            }
        }
        changeSlide(index);
    },settings.duration);
}


autoSlideCheck.addEventListener("change",function (){
    switch (this.checked){
        case true:
            init(settings);
            break;
        case false:
            clearInterval(interval);
            break;
    }
})


function changeSlide(index){
    const slideImage = document.getElementById("slideImage");
    const slideName = document.getElementById("slideName");
    const slideLink = document.getElementById("slideLink");
    slideImage.setAttribute('src',slides[index].image);
    slideName.textContent = slides[index].name;
    slideLink.setAttribute('href',slides[index].link)
}

document.addEventListener("DOMContentLoaded",function (){
    changeSlide(index);
});

slideLeftButton.addEventListener("click",function (){
    clearInterval(interval);
    autoSlideCheck.checked = false;
    if(index > 0){
        index--;
        changeSlide(index);
    }else{
        index = slideCount - 1;
        changeSlide(index);
    }
});

slideRightButton.addEventListener("click",function (){
    clearInterval(interval);
    autoSlideCheck.checked = false;
    if(index < slideCount - 1){
        index++;
        changeSlide(index);
    }else{
        index = 0;
        changeSlide(index);
    }
});