JSFiddle - React, Tailwind, and code Playground

by Sachin Patel

HTML

<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>

<table class="js-table-slider table-responsive">
<tr class="table-slider-row">
    <th class="table-slider-head">Top</th>
    <th class="table-slider-head">Zimmer</th>
    <th class="table-slider-head">Wohnfläche</th>
    <th class="table-slider-head">Geschoss</th>
    <th class="table-slider-head">Preis</th>
    <th class="table-slider-head">Grundriss</th>
</tr>
<tr class="table-slider-row">
    <td class="table-slider-cell">1</td>
    <td class="table-slider-cell">4</td>
    <td class="table-slider-cell">93,50 m2</td>
    <td class="table-slider-cell">EG</td>
    <td class="table-slider-cell">€ 195.000</td>
    <td class="table-slider-cell"><i class="far fa-image"></i></td>
</tr>
<tr class="table-slider-row">
    <td class="table-slider-cell">1</td>
    <td class="table-slider-cell">4</td>
    <td class="table-slider-cell">93,50 m2</td>
    <td class="table-slider-cell">EG</td>
    <td class="table-slider-cell">€ 195.000</td>
    <td class="table-slider-cell"><i class="far fa-image"></i></td>
</tr>
<tr class="table-slider-row">
    <td class="table-slider-cell">1</td>
    <td class="table-slider-cell">4</td>
    <td class="table-slider-cell">93,50 m2</td>
    <td class="table-slider-cell">EG</td>
    <td class="table-slider-cell">€ 195.000</td>
    <td class="table-slider-cell"><i class="far fa-image"></i></td>
</tr>
</table>

CSS

.js-table-slider{
  width : 200px;
}

JavaScript

$(function (){
$('.js-table-slider').slick({
    dots: false,
    pauseOnHover: false,
    autoplay: false,
    dots: true,
    prevArrow: "<div class='table-slider-arrow left'> < </div>",
    nextArrow: "<div class='table-slider-arrow right'> > </div>"
});
});