JSFiddle - React, Tailwind, and code Playground

by mufeedahmad

HTML

<div class="myslider-wrapper">
      <div class="thumb-adjust">
        <div class="thumbSlide-wrap">
          <ul class="thumbSlide">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
            <li>07</li>
            <li>08</li>
            <li>09</li>
            <li>10</li>
          </ul>
          <div class="thumbSlide-controls"><a href="#" class="thumbSlide-prev" title="Previous">&lt;</a><a href="#" class="thumbSlide-next" title="Next">&gt;</a></div>
        </div>
    </div>
    </div>
    
    
    <!--slider ends-->
    <div class="myslider-wrapper">
      <div class="thumb-adjust">
        <div class="thumbSlide-wrap">
          <ul class="thumbSlide">
            <li>01</li>
            <li>02</li>
            <li>03</li>
          </ul>
          <div class="thumbSlide-controls"><a href="#" class="thumbSlide-prev" title="Previous">&lt;</a><a href="#" class="thumbSlide-next" title="Next">&gt;</a></div>
        </div>
    </div>
    </div>
    
    <!--slider ends-->
    <div class="myslider-wrapper">
      <div class="thumb-adjust">
        <div class="thumbSlide-wrap">
          <ul class="thumbSlide">
            <li>01</li>
          </ul>
          <div class="thumbSlide-controls"><a href="#" class="thumbSlide-prev" title="Previous">&lt;</a><a href="#" class="thumbSlide-next" title="Next">&gt;</a></div>
        </div>
    </div>
    </div>
    
    <!--slider ends-->

CSS

.thumb-adjust{position: relative;margin-bottom:20px;margin-right: 9px;padding:12px 40px 0 40px;background:#666666}
.thumbSlide-wrap{margin: 0; overflow: hidden; height:76px; width: 321px; }
.thumbSlide{position: relative; left: 0; top: 0;margin:0;padding:0 0 0 0;}
.thumbSlide li{width:70px;height:61px;cursor:pointer;float: left; list-style: none;color:#fff;border: 2px solid #ccc; height: 61px; width: 70px;font-size:24px;padding:0; margin: 0 7px 0px 0;}
.thumbSlide li:hover{border-color:#303030}
.thumbSlide li.slideActive,  .thumbSlide li.slideActive:hover{border-color:#aa1133}
.thumbSlide-controls{margin: 0; width: 528px; height:21px; }
.thumbSlide-prev, .thumbSlide-next{float: left;background:#ccc url(images/slider-controls.png) no-repeat 0 0; height:61px;width:21px; position:absolute;top:15%;z-index:1000;}
.thumbSlide-prev{left:10px;}
.thumbSlide-prev:hover{background-position:-31px 0}
.thumbSlide-next{float: right;right:10px;background-position:0 -119px;}
.thumbSlide-next:hover{background-position:-31px -119px;}

JavaScript

$(document).ready(function(){ 	
	$('.myslider-wrapper').each(function(){
		
    // thumbSlide
		var countSlider = $('.thumbSlide').length;
		if((".thumbSlide").length){        
			// Declare variables
			var totalImages = $(".thumbSlide > li").length, 
				imageWidth = $(".thumbSlide > li:first").outerWidth(true),
				totalWidth = imageWidth * totalImages,
				visibleImages = Math.round($(".thumbSlide-wrap").width() / imageWidth),
				visibleWidth = visibleImages * imageWidth,
				stopPosition = (visibleWidth - totalWidth/countSlider);  
			$(".thumbSlide").width(totalWidth+10);
			$(".thumbSlide-prev").click(function(){
				var parentMove = $(this).parent().prev('.thumbSlide');
				if(parentMove.position().left < 0 && !$(".thumbSlide").is(":animated")){
					parentMove.animate({left : "+=" + imageWidth + "px"});
				}				
				return false;
			});        
			$(".thumbSlide-next").click(function(){
				var parentMove = $(this).parent().prev('.thumbSlide');
				if(parentMove.position().left > stopPosition && !$(".thumbSlide").is(":animated")){
					parentMove.animate({left : "-=" + imageWidth + "px"});					
				}				
				return false;
			});
		}
	 
	 });
});