JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<div class="slider1">
    <div class="slide">
        <img src="http://placehold.it/350x150&text=FooBar1">
    </div>
    <div class="slide">
        <img src="http://placehold.it/350x150&text=FooBar2">
    </div>
    <div class="slide">
        <img src="http://placehold.it/350x150&text=FooBar3">
    </div>
    <div class="slide">
        <img src="http://placehold.it/350x150&text=FooBar4">
    </div>
    <div class="slide">
        <img src="http://placehold.it/350x150&text=FooBar5">
    </div>
    <div class="slide">
        <img src="http://placehold.it/350x150&text=FooBar6">
    </div>
    <div class="slide">
        <img src="http://placehold.it/350x150&text=FooBar7">
    </div>
    <div class="slide">
        <img src="http://placehold.it/350x150&text=FooBar8">
    </div>
    <div class="slide">
        <img src="http://placehold.it/350x150&text=FooBar9">
    </div>
    <div class="slide">
        <img src="http://placehold.it/350x150&text=FooBar10">
    </div>
    <div class="slide">
        <img src="http://placehold.it/350x150&text=FooBar11">
    </div>
    <div class="slide">
        <img src="http://placehold.it/350x150&text=FooBar12">
    </div>
    <div class="slide">
        <img src="http://placehold.it/350x150&text=FooBar13">
    </div>
 <div class="slide">
        <img src="http://placehold.it/350x150&text=FooBar14">                             
</div>
      <div class="slide">
        <img src="http://placehold.it/350x150&text=FooBar15">
            </div>
      <div class="slide">
        <img src="http://placehold.it/350x150&text=FooBar16">
</div>
<div class="slide">
        <img src="http://placehold.it/350x150&text=FooBar17">

</div>

JavaScript

$(document).ready(function()
{
  var slideobj1=$('.slider1').bxSlider(
  {
    mode: 'horizontal',
    slideWidth: 50,
    minSlides: 17, //nr min de slides que ele mostra qdo n tem espaço
    maxSlides: 13, //visiveis
    moveSlides: 1,
    slideMargin: 0,
    pager: false,
    controls:true,
    hideControlOnEnd: true,
    infiniteLoop: false,
    //autoHover: true,
    //touchEnabled: true,
    //swipeThreshold: 50,
    //oneToOneTouch: true,
    //preventDefaultSwipeX: false,
    //preventDefaultSwipeY: true,
  });
});