JSFiddle - React, Tailwind, and code Playground

by phoenix_suresh

HTML

<div class="slider-container">
			<div class="slider-left-arrow" data-value="4"> &lt;</div>
			<div class="slider-right-arrow" data-value="28"> &gt;</div>
			<div class="slider-products-container"><div class="slider-product"><a target="_blank" class="slider-a" href="p.htm?product_id=16196291"><img style="height:215px;width:215px;" src="http://img.23rd.com/p/?id=16196291.0-dcd10db156b9da0bfe150f09efc472d8&amp;size=470x470"><span class="name"><p>BUY NOW <strong>$17.45</strong> USD</p></span></a></div><div class="slider-product"><a target="_blank" class="slider-a" href="p.htm?product_id=16196269"><img style="height:215px;width:215px;" src="http://img.23rd.com/p/?id=16196269.0-ea1ad06b69cdbaf4e79046a5a9a601bb&amp;size=470x470"><span class="name"><p>BUY NOW <strong>$30.05</strong> USD</p></span></a></div><div class="slider-product"><a target="_blank" class="slider-a" href="p.htm?product_id=16196265"><img style="height:215px;width:215px;" src="http://img.23rd.com/p/?id=16196265.0-37fa1f3cd0b8b8746c2798d5ec37c3b3&amp;size=470x470"><span class="name"><p>BUY NOW <strong>$25.45</strong> USD</p></span></a></div><div class="slider-product"><a target="_blank" class="slider-a" href="p.htm?product_id=16196308"><img style="height:215px;width:215px;" src="http://img.23rd.com/p/?id=16196308.0-fd5083230623b62a970b46da61fec0fb&amp;size=470x470"><span class="name"><p>BUY NOW <strong>$14.01</strong> USD</p></span></a></div><div class="slider-product"><a target="_blank" class="slider-a" href="p.htm?product_id=16196337"><img style="height:215px;width:215px;" src="http://img.23rd.com/p/?id=16196337.0-1c19f01332bc534ef752eef51dccf56a&amp;size=470x470"><span class="name"><p>BUY NOW <strong>$68.01</strong> USD</p></span></a></div><div class="slider-product"><a target="_blank" class="slider-a" href="p.htm?product_id=16196575"><img style="height:215px;width:215px;" src="http://img.23rd.com/p/?id=16196575.0-5cb74103bb2b193571958ccf4465b13c&amp;size=470x470"><span class="name"><p>BUY NOW...

CSS

.slider-container {
    display:block;float:left;width:960px;height:248px;position: relative;margin:10px 0 0 21px;background: #000000;overflow:hidden;
}
.slider-products-container{ 
    display:block;float:left;width:7620px;height:248px;position:absolute;top:0;left: -948px;background: #F6F6F6;padding-left:954px;
}
.slider-product { 
    display:block;float:left;width:225px;height:225px;margin:10px 6px;background: #FAC;
}
.slider-left-arrow, .slider-right-arrow { display:block;position:absolute;top:105px;height:36px;width:16px; z-index:2;cursor:pointer;}
.slider-left-arrow{ left:0;  }
.slider-left-arrow:hover{ left:0;  }
.slider-right-arrow{ right: 0; }
.slider-right-arrow:hover{  }
.slider-product{ display:block;float:left;width:225px;height:225px;margin:10px 6px;background: #FFF; }
.slider-a {display:block;float:left;height:225px;width:225px;position: relative;}
.slider-a span.price {display:block;left:0;right:0;height:28px;width:225px;position: absolute;text-align: right;}
.slider-a span.price p{font:inherit;font-size:14px;font-weight:300;padding:8px;color:#000;}

.slider-a span.name {display:block;left:0;bottom:0;height:28px;width:225px;position: absolute;}
.slider-a span.name p {font:inherit;font-size:13px;font-weight:300;padding:8px;color:#FFF;text-align: center;}
.slider-a span.name p strong{font:inherit;font-size:13px;font-weight:700;}

JavaScript

$(".slider-right-arrow").live("click", function() {
				//alert($(this).attr("data-value"));
				var scrollRightValue = $(this).attr("data-value");
				var scrollLeftValue = $(".slider-left-arrow").attr("data-value");
				if (scrollRightValue > 4)
				{
					$(".slider-products-container").animate({"left": "-=948px"}, {queue: true}, "fast");
					$(this).attr("data-value", parseInt(scrollRightValue-4));
					$(".slider-left-arrow").attr("data-value", parseInt(scrollLeftValue)+4);
				}
				else if(scrollRightValue == 4)
				{
					$(".slider-products-container").css({"left": "-948px"});
					$(".slider-products-container").animate({"left": "-=948px"}, {queue: true}, "fast");
					$(this).attr("data-value", parseInt(scrollRightValue)+20);
					$(".slider-left-arrow").attr("data-value", parseInt(scrollLeftValue)-20);
				}
				console.log("Scroll Right value: "+$(this).attr("data-value"));
				console.log("Scroll Left value: "+ $(".slider-left-arrow").attr("data-value"));
				return false;
			});
			$(".slider-left-arrow").live("click", function() {
				var scrollLeftValue = $(this).attr("data-value");
				var scrollRightValue = $(".slider-right-arrow").attr("data-value");
				if (scrollLeftValue > 4)
				{
					$(".slider-products-container").animate({"left": "+=948px"}, {queue: true}, "fast");
					$(this).attr("data-value", parseInt(scrollLeftValue)-4)
					$(".slider-right-arrow").attr("data-value", parseInt(scrollRightValue)+4);
				}
				else if(scrollLeftValue == 4)
				{
					$(".slider-products-container").css({"left": "-6636px"});
					$(".slider-products-container").animate({"left": "+=948px"}, {queue: true}, "fast");
					//$(".slider-products-container").css("left", "-=4740px");
					$(this).attr("data-value", parseInt(scrollLeftValue)+20);
					$(".slider-right-arrow").attr("data-value", parseInt(scrollRightValue)-20);
				}
				return false;
			});