HTML, CSS, javascript, PHP

Удобная карусель. Можно настроить количество элементов в зависимости от размера экрана. 

Масштабируется так, чтобы уместилось заданное количество элементов.

Подключение

<link rel="stylesheet" href="/owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="/owlcarousel/owl.theme.default.min.css">

Файл стилей должен быть раньше .js файла карусели

<script src="/owlcarousel/owl.carousel.min.js"></script>

И, к примеру, такой вариант инициализации карусели

jQuery( document ).ready(function() {
 var opts = {
  items:5,
  dots:true,
  nav:true,
  navText:['<','>'],
  margin:10,
  loop:false,
  autoplay:true,

  responsive:{
   0:{
    items:2
   },
   600:{
    items:3
   },
   1000:{
    items:5
   }
  },
  margin:20
 }
 jQuery('.owl-carousel').owlCarousel(opts);
});

HTML карусели

<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

Анимационный эффект задается так:

animateOut: 'slideOutDown',
animateIn: 'slideInDown'	

еще для примера

animateOut: 'slideOutDown',
animateIn: 'flipInX',