JSFiddle - React, Tailwind, and code Playground

by Nirav Mehta

JavaScript

var count = 1;
var number = 1;

$("#number").text("0"+number+"/04");
$("#down").click(function(){
    if(count==1){
        $("#gallery img").attr("src", "http://lorempixel.com/306/306/abstract/1/cc/");
        $("#2").hide();
        count = 2;
        number = 2;
        $("#number").text("0"+number+"/04");
    }
    else if(count==2){
        $("#gallery img").attr("src", "http://lorempixel.com/306/306/abstract/2/cc/");
        $("#3").hide();
        count = 3;
        number = 3;
        $("#number").text("0"+number+"/04");
    }
    else if(count==3){
        $("#gallery img").attr("src", "http://lorempixel.com/306/306/abstract/3/cc/");
        $("#4").hide();
        count = 4;
        number = 4;
        $("#number").text("0"+number+"/04");
    }
})

$("#up").click(function(){

    if(count==2){
        $("#gallery img").attr("src", "http://lorempixel.com/306/306/abstract/4/cc/");
        $("#2").show();
        count = count - 1;
        number = 1;
        $("#number").text("0"+number+"/04");
    }
    else if(count==3){
        $("#gallery img").attr("src", "http://lorempixel.com/306/306/abstract/1/cc/");
        $("#3").show();
        count = count - 1;
        number = 2;
        $("#number").text("0"+number+"/04");
    }
    else if(count==4){
        $("#gallery img").attr("src", "http://lorempixel.com/306/306/abstract/2/cc/");
        $("#4").show();
        count = count - 1;
        number = 3;
        $("#number").text("0"+number+"/04");
    }
})