2020-12-31

How to make an icon slideshow with jQuery

Hi I am building a small slideshow of icons and also want to have data inside the icons like its speed and color. I've loaded jQuery from the top of my page.

<body>
<div class="main-container">
    <div class="object-container">

    <div class="icon-container">
        <i class="fa fa-car" id="active"></i>
        <i class="fa fa-bicycle" id="not-active"></i>
        <i class="fa fa-plane" id="not-active"></i>
        <i class="fa fa-ship" id="not-active"></i>
        <i class="fa fa-fighter-jet" id="not-active"></i>
        <i class="fa fa-space-shuttle" id="not-active"></i>
    </div>
    <div class="arrow-buttons">
        <a href="" class="right-arrow"></a>
        <a href="" class="left-arrow"></a>
    </div>
    </div>
</div>
Here is the jquery to press the right arrow button to change slide across the icons but it doesnt seem to be working?
$(document).ready(function(){
$('.right-arrow').on('click', function(){
    let currentImg = $('#active');
    let nextImg = currentImg.next();

    if(currentImg.length){
        currentImg.removeAttr('#active').css('z-inex', -10)
        nextImg.attr('#active').css('z-index', 10);
    }
})

})



from Recent Questions - Stack Overflow https://ift.tt/37YPbIE
https://ift.tt/eA8V8J

No comments:

Post a Comment