JSFiddle - React, Tailwind, and code Playground

by Can

HTML

<a href="#" id="prevProduct">geri</a>
<a href="#" id="nextProduct">ileri</a>
    
    <div id="slideWrapper">


        <div id="yuzdeyuz" class="product-slide active" style="background:red;">
            <div class="product-wrapper">
              <div class="product-main-title">
                <img src="http://placehold.it/100x100">
              </div>
              <div class="product-img">
                  <img src="http://placehold.it/100x100">
              </div>
            </div>
        </div><!--/product-slide-->


        <div id="marmelatlar" class="product-slide" style="background:yellow;">
            <div class="product-wrapper">
              <div class="product-main-title dn">
                <img src="http://placehold.it/200x200">
              </div>
              <div class="product-img dn">
                 <img src="http://placehold.it/200x200">
              </div>
            </div>
        </div><!--/product-slide-->


       <div id="tameksefim" class="product-slide" style="background:green;">
            <div class="product-wrapper">
              <div class="product-main-title dn">
                <img src="http://placehold.it/300x300">
              </div>
              <div class="product-img dn">
                <img src="http://placehold.it/300x300">
              </div>
            </div>
        </div><!--/product-slide-->

    </div>

CSS

#slideWrapper {  }
.product-slide { width: 100%; display: none; position: absolute; left: 0; top: 0; height: 500px; }
.product-wrapper { width: 960px; margin: 0 auto; position: relative; }
.dn { display: none; } 
#prevProduct,
#nextProduct { position: absolute; top: 350px; left: 0; color: brown; z-index: 333; }
#nextProduct { left: 100px; }
.product-main-title { position: absolute; top: 0; left: 10px; z-index: 2; }
.product-img { right: 100px; top: 0; position: absolute; }
.product-slide.active { display: block; }

JavaScript

$("#prevProduct").on('click', function(){
              var activeSlide = $("#slideWrapper .active");
              var prevSlide = $(activeSlide).prev();
                  if (prevSlide.length == 0){
                      prevSlide = $(".product-slide").last();

                  };

              $(activeSlide).find(".product-main-title, .product-img").fadeOut(1000).addClass("dn");
              $(activeSlide).fadeOut(1000).removeClass("active");
              $(prevSlide).addClass("active").fadeIn(1000);
              $(prevSlide).find(".product-main-title, .product-img").fadeIn(1000).removeClass("dn");

            return false;
        });


        $("#nextProduct").on('click', function(){
              var activeSlide = $("#slideWrapper .active");
              var nextSlide = $(activeSlide).next();
                  if (nextSlide.length == 0){
                      nextSlide = $(".product-slide").first();

                  };

              $(activeSlide).find(".product-main-title, .product-img").fadeOut(1000).addClass("dn");
              $(activeSlide).fadeOut(1000).removeClass("active");
              $(nextSlide).addClass("active").fadeIn(1000);
              $(nextSlide).find(".product-main-title, .product-img").fadeIn(1000).removeClass("dn");

            return false;
        });