<div class="carousel">
  <div class="box1">テキスト1</div>
  <div class="box2">テキスト2</div>
  <div class="box3">テキスト3</div>
</div>
body {
  background-color: #333;
}

.carousel {
  width: 500px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

.carousel div {
  height: 100px;
}

.box1 {
  background-color: #f00;
}

.box2 {
  background-color: #0f0;
}

.box3 {
  background-color: #00f;
}
$(function() {
  $('.carousel').slick({
    dots: true,
    autoplay: true,
    centerMode: true,
    centerPadding: '50px',
    responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
      }
    }, {
      breakpoint: 480,
      settings: {
        centerMode: false
      }
    }]
  });
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css
  2. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/js/jquery-1.8.3.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js