JSFiddle - React, Tailwind, and code Playground

by s4ty

CSS

#left_arrow:hover, #right_arrow:hover{ cursor: pointer; }

JavaScript

var curSlide = 0;

function setSlide(num,dir){
    
    var oldSlide = curSlide,
        showDir = "",
        hideDir = "";  
    
    num = (num>5) ? 1 : (num<1) ? 5 : num;
    
    if(dir=="f"){
        showDir = "right";
        hideDir = "left";
    } else {
        showDir = "left";
        hideDir = "right";
    }
    
    if(curSlide == 0){
        $("#slide1").show();
        $('#left_arrow').hide();
        curSlide = 1;
    } else {
        curSlide = num; 
        $("#slide"+curSlide).show('slide',{direction:showDir},600);
        $("#slide"+oldSlide).hide('slide',{direction:hideDir},600);
        $('#left_arrow').show();
    }
}

 

function nextSlide(){
    setSlide(curSlide*1+1,"f");

}
function prevSlide(){
    setSlide(curSlide*1-1,"b");
}






 $(document).ready(function () { 
     if($('#staff_picks')) {
         $('#staff_picks area').each(function() {
             $(this).click(function(e) {
                 e.preventDefault();
                 setSlide($(this).attr('id'),"f");
             });
             
             $(this).mouseover(function(e) {
                 $(this).css("cursor", "pointer");
             });
             $(this).mouseout(function(e) {
                 $(this).css("cursor", "default");
             });
     
         });
     } 
     $("#left_arrow").click(function(e) {
         e.preventDefault();
         prevSlide();
     });
     $("#right_arrow").click(function(e) {
         e.preventDefault();
         nextSlide();
     });
     for(var i=1;i<6;i++){
         $("#slide"+i).hide(); 
     }
     setSlide(0,"f");
 });