JSFiddle - React, Tailwind, and code Playground

by Bilal AFSAR

HTML

<script src="//cdn.jsdelivr.net/caroufredsel/6.2.1/jquery.carouFredSel.packed.js"></script>
<div id="footxxx">
    <img src="http://lorempixel.com/113/280/" class="image_car"  />
  <img src="http://lorempixel.com/113/280/" class="image_car"  />
      <img src="http://lorempixel.com/113/280/" class="image_car" height="113" width="280" />
      <img src="http://lorempixel.com/113/280/" class="image_car" height="113" width="280" />
      <img src="http://lorempixel.com/113/280/" class="image_car" height="113" width="280" />
      <img src="http://lorempixel.com/113/280/" class="image_car" height="113" width="280" />
  <img src="http://lorempixel.com/113/280/" class="image_car" height="113" width="280" />
</div>

CSS

#footxxx img
{
margin-left:10px;
    float:left;
}

JavaScript

$(document).ready(function() {
        $("#footxxx").carouFredSel({
            items: 3,
            direction: "left",
            scroll:{
                items: 2,
             // width   : 280,
             // height  : 140,
                easing:"elastic",
                duration:1000,                          
                pauseOnHover:true
            }                   
        }); 
    });