Slider Carousel

Carousel tactil y responsive con la libreria Slick. Div/textareas

by Luis Martin

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css">
<body>

  <div class="your-class">
    <div class="item">
      <div class="textarea" contentEditable=true placeholder="Tu texto aqui"></div>
      <div class="title">Titular 1</div>
    </div>
    <div class="item">
      <div class="textarea" contentEditable=true placeholder="Tu texto aqui"></div>
      <div class="title">Titular 2</div>
    </div>
    <div class="item">
      <div class="textarea" contentEditable=true placeholder="Tu texto aqui"></div>
      <div class="title">Titular 3</div>
    </div>
    <div class="item">
      <div class="textarea" contentEditable=true placeholder="Tu texto aqui"></div>
      <div class="title">Titular 4</div>
    </div>
  </div>
</body>

CSS

div .textarea{
  width: 300px;
  height: 100px;
  border: 1px solid #ccc;
  padding: 5px;
  overflow: auto;
}

JavaScript

$('.your-class').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: false
});