<div class="container mt-2">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <img class="card-img-top" src="img/chevrolet_malibu.jpg" alt="">
                    <div class="card-body">
                        <h5 class="card-title">Chevrolet Malibu</h5>
                        <p class="card-text"></p>
                        <a href="#" class="card-link btn btn-outline-primary" target="_blank">Read More</a>
                    </div>
                    <div class="card-footer">
                        <i class="fas fa-chevron-circle-left fa-2x mr-2 arrow"></i>
                        <i class="fas fa-chevron-circle-right fa-2x arrow"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
        integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
        crossorigin="anonymous"></script>
    <script src="script.js"></script>
.fas{
    cursor: pointer;
}

img{
    width: 640px;
    height: 450px;
    object-fit: cover;
}
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);
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js