JSFiddle - React, Tailwind, and code Playground

by yoni sidi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">

CSS

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
  width: 80%;
}

.slick-list {
  text-align: center;
  width: 80%;
}

JavaScript

var x=[];
 x.images=["ATL","BOS","BKN","CHA","CHI","CLE"];
 x.dotImages=["SAS","DET","ORL"];
 var len = x.images.length,i = 0;
 for(; i < len; i++ ){
 x.images[i]="https://i.cdn.turner.com/nba/nba/.element/img/4.0/global/logos/512x512/bg.white/svg/"+x.images[i]+".svg"
 x.dotImages[i]="https://i.cdn.turner.com/nba/nba/.element/img/4.0/global/logos/512x512/bg.white/svg/"+x.dotImages[i]+".svg"
 }
 
 							var container= document.createElement("div");
              container.style='overflow-y:auto;overflow-x:auto;'
              document.body.appendChild(container);
                            
              var parentDiv = document.createElement("div");
              parentDiv.className = "slider-nav";
              container.appendChild(parentDiv);
              parentDiv.setAttribute('data-slick','{"dots":true,"slidesToShow": 2,"slidesToScroll": 2}');
              
              var slickOpts={
              		dots: true,
                  slidesToShow: 2,
                  slidesToSCroll: 2,
                  customPaging: function(slick,index) {return "<a><img src=" + dotImages[index] + " width=100% height=100%></a>";}
              };
              
              var dotImages=x.dotImages
              
              for(i=0; i < len; i++ ){
                var img = document.createElement("img");
                img.src = x.images[i];
                var divEl = document.createElement("div");
                divEl.appendChild(img);
                parentDiv.appendChild(divEl);
              }
              
              
              
              $('.slider-nav').slick(slickOpts);