JSFiddle - React, Tailwind, and code Playground

by letanure

HTML

<script src=" //cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130801/jquery.cycle2.min.js"></script>
<link rel="stylesheet" href="http://jquery.malsup.com/cycle2/demo/demo-slideshow.css">
 <div class="bl6-conteudo">teste</div>

CSS

.bl6-conteudo{
    border: 1px solid red;
    padding: 10px;
}

JavaScript

$( '.bl6-conteudo' ).html([ 
  '<div class=center>',
  '  <span class="prev"><a href=#><< Prev</a></span>',
  '  <span class="next" style="margin-left:20px"><a href=#>Next >></a></span>',
  '</div>',
  '<div class="cycle-slideshow"',
  '  data-cycle-prev=".prev"',
  '  data-cycle-next=".next"',
  '  data-cycle-fx="scrollHorz"',
  '  data-cycle-timeout=0',
  '  >',
  '  <img src="http://malsup.github.io/images/p1.jpg" data-cycle-hash="spring">',
  '  <img src="http://malsup.github.io/images/p2.jpg" data-cycle-hash="trees">',
  '  <img src="http://malsup.github.io/images/p3.jpg" data-cycle-hash="water">',
  '  <img src="http://malsup.github.io/images/p4.jpg" data-cycle-hash="sunset">',
  '</div>'
].join(''));
console.log( $( '.cycle-slideshow' ) )
$( '.cycle-slideshow' ).cycle();