script.js

$(document).ready(function() {

    $(".model-description").hover(
        function() {
            $(this).stop().animate({
                height: "200px"
            }, 300);
        },
        function() {
            $(this).stop().animate({
                height: "30px"
            }, 300);
        }
    );

    // Initialize the Slick Carousel
    $(".slider-container").slick({
        slidesToShow: 3,
        infinite: true,
        slidesToScroll: 3,
        autoplay: true,
        autoplaySpeed: 300,
        arrows: false,
        dots: true,
    });

    });



    const previous = document.querySelector('.previous');
    const next = document.querySelector('.next');
    const images = document.querySelector('.slider-carousel').children;
    const totalImages = images.length;
    let currentIndex = 0;


    // Event Listeners to previous and next buttons
    previous.addEventListener('click', () => {
    previousImage()
    })

    next.addEventListener('click', () => {
    nextImage();
    })


    // Function to go to next Image
    function nextImage(){

    images[currentIndex].classList.remove('main');
    if(currentIndex == totalImages-1){
        currentIndex = 0;
        }
        else{
        currentIndex++;
        }

    images[currentIndex].classList.add('main');

    }

    // Function to go to previous Image
    function previousImage(){

    images[currentIndex].classList.remove('main');
    if(currentIndex == 0){
        currentIndex = totalImages-1;
        }
        else{
        currentIndex--;
        }

    images[currentIndex].classList.add('main');

    }