JSFiddle - React, Tailwind, and code Playground

by otinanaipali

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<div class="row w-100">
  <div class="col-lg">
    <div class="normal-txt mx-auto">
      <h2>Ximple advantage</h2>
      <h1>Ximple grows with your business</h1>
      <p>Our ERP system transforms distributors and wholesale business that will grow along with them, keep pace and help them face challenges of today and tomorrow.</p>
      <div class="cta">
        <a href="#" class="btn btn-primary btn-lg">Book a demo</a>
        <a href="#" class="btn btn-secondary btn-lg">Ximple features</a>
      </div>
    </div>
  </div>
  <div class="col-lg">
    <div class="row customer-logos">
      <div class="col-6 slide"><img src="https://www.solodev.com/assets/carousel/image1.png"></div>
      <div class="col-6 slide"><img src="https://www.solodev.com/assets/carousel/image2.png"></div>
      <div class="col-6 slide"><img src="https://www.solodev.com/assets/carousel/image3.png"></div>
      <div class="col-6 slide"><img src="https://www.solodev.com/assets/carousel/image4.png"></div>
      <div class="col-6 slide"><img src="https://www.solodev.com/assets/carousel/image5.png"></div>
      <div class="col-6 slide"><img src="https://www.solodev.com/assets/carousel/image6.png"></div>
      <div class="col-6 slide"><img src="https://www.solodev.com/assets/carousel/image7.png"></div>
      <div class="col-6 slide"><img src="https://www.solodev.com/assets/carousel/image8.png"></div>
    </div>
  </div>
</div>

CSS

/* Slider */

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

JavaScript

settings = {
  slidesToShow: 4,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 1000,
  arrows: false,
  dots: false,
  pauseOnHover: false,
  mobileFirst: true,
  responsive: [{
    breakpoint: 768,
    settings: {
      slidesToShow: 3
    }
  }, {
    breakpoint: 520,
    settings: {
      slidesToShow: 2
    }
  }, {
    breakpoint: 320,
    settings: {
      slidesToShow: 1
    }
  }]
}
$slick_slider = $('.customer-logos');

$slick_slider.slick(settings);
// reslick only if it's not slick()
$(window).on('resize', function() {
  if ($(window).width() > 992) {
    if ($slick_slider.hasClass('slick-initialized')) {
      $slick_slider.slick('unslick');
    }
    return
  }
  if (!$slick_slider.hasClass('slick-initialized')) {
    return $slick_slider.slick(settings);
  }
});