JSFiddle - React, Tailwind, and code Playground

by shriek

HTML

<li id="Standards" class="standards clear">
      	<div class="clear">
      		<h2 class="title clear">Standards <a href="#" class="view-all"><g:message code="featurecards.standards.viewall.text"/></a></h2>

      		<article class="listed">
      		<div id="slider-nav">
      			<nav class="card-header clear">
      				<ul class="standards-links clear">
      					<li><a href="#">New Configuration</a></li>
      					<li><a href="#">New Configuration 2 with a longer name Lorem Ipsum est dolor nim, u` speaki?</a></li>
      					<li><a href="#" class="selected">Petrox Configuration</a></li>
      					<li><a href="#">Petrox Laptops</a></li>
      					<li><a href="#">Petrox Mobile</a></li>
      					<li><a href="#">Petrox Tablets</a></li>
      					<li><a href="#">Petrox Hardware</a></li>
      					<li><a href="#">Petrox Software</a></li>
      	
      				</ul>
                </nav>
                </div>
                <ul>
                    <li class="standards-gradient-left slider-prev">
                        <a href="#" class="prev">Prev</a>
                    </li>
                    <li class="standards-gradient-right slider-next">
                        <a href="#" class="next">Next</a>
                    </li>
                </ul>

      				<div class="arrow-container follower">
      					<span class="arrow-down-gray"></span>
      					<span class="arrow-down-white"></span>
      				</div>
      			<div class="slider-body">
      				<table class="slider-item active">
      					<thead>
      						<tr>
      							<th>Petrox Configuration <span>(12)</span></th>
      							<th class="table-price"></th>
      							<th class="table-buttons"></th>
      						</tr>
      					</thead>
      					<tbody>
      						<tr>
      							<td>
      								<g:img dir="images" file="computer01.png" alt="Product" />
      								<a href="#">This is a long product description <span>(77777777)</span></a>
      							</td>
      							<td...

CSS

.slider-body .slider-item{
    position:absolute;
    top:50;
    opacity: 0;
    -webkit-transition: opacity .2s ease-out
  }
  .slider-item.active{
    opacity : 1.0;
    -webkit-transition: opacity 1s ease-in;
  }
  .slider-body-inactive{
    opacity : 0;    
  }
  .slider-custom-style{
    font-weight:bold;

JavaScript

//Standards Carousel --slider
      (function($){
      	var slider = {
      		"counter" : 0,
      		"size" : (function(){
      			return $("#slider-nav ul").children().size();
      		})(),
      		"position" : 0,
      		"switch" : function(index){
      			if($("#slider-nav ul>li").eq(slider.position).hasClass("slider-custom-style"))
      				$("#slider-nav ul>li").eq(slider.position).removeClass("slider-custom-style");

      			this.position = index;

      			$(".slider-body .slider-item.active").removeClass("active");
      			$(".slider-body .slider-item").eq(this.position).addClass("active");

      			$("#slider-nav ul>li").eq(this.position).addClass("slider-custom-style");

      		}

      	};

      	$("#slider-nav").on("click", "li", function(){
      		slider.switch($(this).index());
      	});

      	$(".slider-next, .slider-prev").click(function(){
      		if($(this).hasClass('slider-next')){
      			slider.counter+=1;
      		}
      		else if( $(this).hasClass('slider-prev')){
      			slider.counter-=1;
      		}
      		slider.switch(slider.counter % slider.size);
      		slider.position = slider.counter % slider.size;

      	});
      })($);