JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<ul id="slider" class="slider items">
  <li class="slider-item">
    <div class="slider-item-content">
      <img class="slider-image" src="http://lorempixel.com/750/422?random=1" width="750" height="422" alt="">

      <ul class="slider-navigation items">
        <li class="slider-navigation-item"><a href="#" class="slider-navigation-link">Home</a></li>
        <li class="slider-navigation-item"><a href="#" class="slider-navigation-link">Booking</a></li>
        <li class="slider-navigation-item"><a href="#" class="slider-navigation-link">Gallary</a></li>
        <li class="slider-navigation-item"><a href="#" class="slider-navigation-link">About</a></li>
        <li class="slider-navigation-item"><a href="#" class="slider-navigation-link">Contact Us</a></li>
      </ul>
    </div>
  </li>
  <li class="slider-item">
    <div class="slider-item-content">
      <img class="slider-image" src="http://lorempixel.com/750/422?random=2" width="750" height="422" alt="">

      <ul class="slider-navigation items">
        <li class="slider-navigation-item"><a href="#" class="slider-navigation-link">Home</a></li>
        <li class="slider-navigation-item"><a href="#" class="slider-navigation-link">Booking</a></li>
        <li class="slider-navigation-item"><a href="#" class="slider-navigation-link">Gallary</a></li>
        <li class="slider-navigation-item"><a href="#" class="slider-navigation-link">About</a></li>
        <li class="slider-navigation-item"><a href="#" class="slider-navigation-link">Contact Us</a></li>
     ...

SCSS

body {
  padding: 2%;
}

.items {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.slider {
  &-item-content {
    position: relative;
    z-index: 1;
  }
  
  &-image {
    max-width: 100%;
    display: block;
  }
}

.slider-navigation {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 24px;
  left: -15px;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 2;
  width: 50%;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: all 200ms ease;
  
  &-item {
    padding: 0 30px;
  }
  
  &-link {
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    transition: padding-left 200ms ease;
    
    &:hover {
      padding-left: 15px;
    }
  }
  
  .slider-item:hover & {
    left: 0;
    opacity: 1;
  }
}

JavaScript

$('.slider').slick({
	arrows: false,
  dots: true,
});