JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<script src="https://malsup.github.io/jquery.cycle2.js"></script>

<div id="parent">
  <div class="elementToClone hide">
      <img src="//malsup.github.com/images/p1.jpg">
      <img src="//malsup.github.com/images/p2.jpg">
      <img src="//malsup.github.com/images/p3.jpg">
      <button class="cycle-prev"> <i class="material-icons"> arrow_back </i></button> 
      <button class="cycle-next"> <i class="material-icons"> arrow_forward </i></button> 
  </div>
<button id="AddSlider">
Click to add new slider
</button>
</div>

CSS

.cycle-slide {
  width: 200px !important;
}

.hide {
  display: none;
}

JavaScript

var sliderToClone  = $(".elementToClone").eq(0)
$(document).ready(function() {
var sliderCount = 1
	$("#AddSlider").click(function() {
  	sliderCount = sliderCount + 1
  	var sliderId = "slider" + sliderCount
    clonedSlider = sliderToClone.clone()
  	clonedSlider.addClass(sliderId)
  	clonedSlider.removeClass("elementToClone")
  	clonedSlider.removeClass("hide")
    $("#parent").append(clonedSlider)
    $("." + sliderId).cycle()
  })
})