JSFiddle - React, Tailwind, and code Playground

by Eugen Sunic

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div class="site">
	
<div class="slider" style="background-image:url('https://images.unsplash.com/photo-1470020337050-543c4e581988?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=')">

	<div class="slick-slide" >Phosfluorescently evolve impactful partnerships through alternative process improvements. Interactively morph cutting-edge niche markets for premium portals. Quickly fabricate best-of-breed paradigms for low-risk high-yield data. Appropriately disintermediate.Phosfluorescently evolve impactful partnerships through alternative process improvements. Interactively morph cutting-edge niche markets for premium portals. Quickly fabricate best-of-breed paradigms for low-risk high-yield data. Appropriately disintermediate.

	</div>


	<div class="slick-slide">Interactively communicate 2.0 markets for revolutionary supply chains. Collaboratively simplify user-centric data through innovative web-readiness. Compellingly engage plug-and-play strategic theme areas before cross functional niches. Uniquely myocardinate worldwide total linkage and backward-compatible synergy.</div>

	<div class="slick-slide">Slide Three</div>

</div>
	
</div>

SCSS

/* THEME: VARS */
$slick-btn-bg-color: #fff;
$slick-btn-txt-color: #000;

$slick-btn-txt-color__hover: #fff;
$slick-btn-bg-color__hover: #000;

$slick-opacity-on-hover: 1;

.slider {
	background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.slick-slide {
	text-align:center;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/* SLICK: ARROWS */
.slick-custom-arrow {
	position: absolute;
	transform: translateY(-50%);
	z-index:100;
	padding:20px 16px;
	
	background-color: $slick-btn-bg-color;
	color:$slick-btn-txt-color;
	
	&:hover {
			cursor:pointer;
			background-color: $slick-btn-bg-color__hover;
			color:$slick-btn-txt-color__hover;
	}
	
	&-right {
		right: 0;
  	top: 50%;
	}
	&-left {
		left: 0;
  	top: 50%;
	}
}

/* SLICK: DOTS */
.slick-dots {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	display:flex;
	align-items:center; 
	
	.slick-active {
		button {
			border: 0;
			height: 15px;
    	width: 15px;
			background-color:#ffffff;
		}
	}
	
	li {
		display:flex;
		align-items:center; 
		
		margin:0 4px;
		padding:0;
		
		height: 20px;
    width: 20px;
		
		button {
			background-color:rgba(255,255,255,0);
			border: 1px solid #fff;
			border-radius:50%;
			opacity: 1;
			display: block;
			height: 18px;
			width: 18px;
			outline: none;
			line-height: 0px;
			font-size: 0px;

			cursor: pointer;
			
			&:hover, &:focus {
      	//background-color:$slick-btn-bg-color__hover;
     	}
			
		}
	}


}

JavaScript

$(document).ready(function(){
  $('.slider').slick({
    dots: true,
    speed: 1000,
    infinite: true,
    autoplay: false,
  });
});

$('.slider').on('mouseenter', function (e) {
	$(this).slick('slickGoTo', 1);  
});
$('.slider').on('mouseleave', function (e) {
	$(this).slick('slickGoTo', 0);  
});

const arr= [{component:depositLimitCaps, jurisdictions:[DE, SE, UK]}]

function isCompvisible(compName){
arr.forEach(x=>{
  ifx.component===compName
})
}