JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/[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/gh/kenwheeler/[email protected]/slick/slick-theme.css"/>

<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
      <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
</head>
<body>
    
<div class="slider">
  <div class="item"><img src="https://skb44.ru/upload/medialibrary/8a3/8a3d44e9b1e3c42bc58aa13f69e1dd4f.png" alt=""></div>
  <div class="item"><img src="https://skb44.ru/upload/medialibrary/8a3/8a3d44e9b1e3c42bc58aa13f69e1dd4f.png" alt=""></div>
  <div class="item"><img src="https://skb44.ru/upload/medialibrary/8a3/8a3d44e9b1e3c42bc58aa13f69e1dd4f.png" alt=""></div>
</div>    

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>  
<script src="my.js">


В "my.js" задаёте параметры работы слайдера:


$(document).ready(function(){
  $('.slider').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
  });
});</script>