Takip Edin

JAVASCRIPT

Slider Uygulaması

Javascript Slider Uygulaması - Öne Çıkan Görsel

Bu uygulamada, resimler random olarak 2 saniye aralıklarla değişmektedir. Mouse ile ok tuşlarının üzerine geldiğimizde otomatik değişim durmakta ve resimlerin değişimi bu tuşlarla halledilmektedir. Ok tuşlarının üzerinden mouse’u ayırdığımızda ise resimlerin otomatik değişimi tekrar devam etmektedir.

Read More butonunun üzerine geldiğimizde ise resimlerin değişimi tekrar durmakta ve butona tıkladığımızda o anki resmin asıl görüntüsü yeni bir sekmede açılmaktadır.

var models = [
    {
        name: 'Chevrolet Malibu',
        image: 'https://bit.ly/39WY2fi',
        link: 'https://bit.ly/37Ed2Mk'
    },

    {
        name: 'GMC Yukon Spor',
        image: 'https://bit.ly/3712Q1p',
        link: 'https://bit.ly/3ozfKKa'
    },

    {
        name: 'Hpi Baja',
        image: 'https://bit.ly/3gs0Tyi',
        link: 'https://bit.ly/2LixY4e'
    },

    {
        name: 'Mercedes Bağbozumu',
        image: 'https://bit.ly/3n2l604',
        link: 'https://bit.ly/37MlHwh'
    },

    {
        name: 'Tesla Cabrio',
        image: 'https://bit.ly/3gv8lbJ',
        link: 'https://bit.ly/37FXDeE'
    },
];

var index = 0;
var slideCount = models.length;
var interval;
var settings = {
    duration: '2000',
    random: true 
};
const btn = document.querySelector('.btn');

init(settings);

document.querySelector('.fa-chevron-circle-left').addEventListener('click', function () {
    index--;
    showSlide(index);
    console.log(index);
});

document.querySelector('.fa-chevron-circle-right').addEventListener('click', function () {
    index++;
    showSlide(index);
    console.log(index);    
});

document.querySelectorAll('.arrow').forEach(function (item) {
    item.addEventListener('mouseenter', function () {
        clearInterval(interval); // mouse ile okların üzerine geldiğimiz anda slide'ların otomatik geçişini durdurur.
    })
});

document.querySelectorAll('.arrow').forEach(function (item) {
    item.addEventListener('mouseleave', function () {
        init(settings);
    })
});

btn.addEventListener('mouseenter', function () {
    clearInterval(interval); 
}) 

btn.addEventListener('mouseleave',function() {
    init(settings);
})

function init(settings) {
    var prev;
    interval = setInterval(function () {
        // index değeri random olarak atanır.
        do {
            index = Math.floor(Math.random() * slideCount);
        }
        while (index == prev) // index, bir önceki değeri temsil eden prev değişkenine eşit olduğunda, tekrar do döngüsüne girerek random değer ataması gerçekleştirir. Böylelikle aynı resmin arka arkaya random olarak gelme ihtimali ortadan kalkmış olur.
        prev = index;
        console.log(index);
        showSlide(index); 
        
    }, settings.duration);
}

function showSlide(i) {

    index = i;

    if (i < 0) {
        index = slideCount - 1;
    }

    if (i >= slideCount) {
        index = 0;
    }

    document.querySelector('.card-title').textContent = models[index].name;

    document.querySelector('.card-img-top').setAttribute('src', models[index].image);

    document.querySelector('.card-link').setAttribute('href', models[index].link);
}

Devamını oku

Popüler

error: Content is protected !!