JSFiddle - React, Tailwind, and code Playground

by Geo George

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>


<div id="slider">
   <div id="slide1" class="slide">
       <strong>Slide 1</strong>
       <label id="a" for="text1">Name</label>
       <input type="text" name="text1" id="text1">
   </div>
   
   <div id="slide2" class="slide">
       <strong>Slide 2</strong>
   </div>

   <div id="slide3" class="slide">
       <strong>Slide 3</strong>
   </div>

</div>

CSS

.slide{
  background:#fff;
  border:1px solid #d6d6d6;
  height:200px;
  width:100%;
}
#slide2{
  background:red;
}
#slide3{
  background:green;
}

JavaScript

//incorporated example from http://jquery.malsup.com/cycle2/demo/speed.php

$(document).ready(function() {
    
    $('#slider').cycle({
        fx:     'scrollHorz',
        rev: 1,
        slides:">.slide",
        pauseOnHover:true,
        speed : 2000,
        manualSpeed : 2000
    });

   
});