JSFiddle - React, Tailwind, and code Playground

by andrey90vs

JavaScript

'use strict';
 $(document).ready(function() {
    var imageWidth = 750;
    var currentImage = 0;

    //set image count 
    var allImages = $('#slideshow li img').length;
    
    //setup slideshow frame width
    $('#slideshow ul').width(allImages*imageWidth);
    
    //attach click event to slideshow buttons
    $('.slideshow-next').click(function(){
        //increase image counter
        currentImage++;
        //if we are at the end let set it to 0
        if(currentImage>=allImages) currentImage = 0;
        //calcualte and set position
        setFramePosition(currentImage);
    });

    $('.slideshow-prev').click(function(){
        //decrease image counter
        currentImage--;
        //if we are at the end let set it to 0
        if(currentImage<0) currentImage = allImages-1;
        //calcualte and set position
        setFramePosition(currentImage);
    });
    

    $('.thumbnail').click(function(e) {
        e.preventDefault();

        $('.thumbnails').removeClass('active');
        $(this).addClass('active');

        setFramePosition(getThumbnailIndex(this));
    });

    //calculate the slideshow frame position and animate it to the new position
    function setFramePosition(pos){
        //calculate position
        var px = imageWidth*pos*-1;
        //set ul left position
        $('#slideshow ul').animate({
            left: px
        }, 300);
    }

    function getThumbnailIndex(thumbnail) {
        return $(thumbnail).index();
    }
    $('.thumbnail').click(function(e){
        e.preventDefault();

        var allImages = $(".thumbnails").children().length;
        var currentImage = $( ".thumbnail" ).index(this) + 1;
        var nextImage = currentImage + 1;
        var prevImage = currentImage - 1;
        if(currentImage < 2) {prevImage = allImages};
        if(currentImage > allImages - 1) {nextImage = 1};
        alert('Numar total:' + allImages);
        alert('Selectat:' + currentImage);
        alert('Next:' +...