Сделать слайдер на Owl Carousel c текстом справа

1. В html добавляем внутрь блока item блоки для img и для текста

<hr />
<div class="wrapper-with-margin">
<div id="owl-reviews" class="owl-carousel owl-theme">
  <div class="item">
<div class="left-part">
<img src="assets/img/i244.png" style="width:165px;" />
</div>
<div class="right-part">
<span>Светлана. Очень переживала, как пройдет мероприятие, но все было просто супер! Вы сумели заразить всех позитивом и активностью, подарив нам массу положительных эмоций! Босс остался очень доволен, и коллеги тоже! Спасибо Вам огромное!</span>
</div>
</div>

  <div class="item">
<div class="left-part">
<img src="assets/img/i537.png" style="width:165px;" />
</div>
<div class="right-part">
<span>Евгений. Заказывали проведение корпоратива на природе – получилось прикольно и необычно! От некоторых задумок мы были в приятном шоке! Решили, что будем обращаться к вам еще не раз!</span>
</div>
</div>

  <div class="item">
<div class="left-part">
<img src="assets/img/317.png" style="width:165px;" />
</div>
<div class="right-part">
<span>Антон. Спасибо за креатив и за талантливое проведение! Искрометный сценарий, задор, импровизация  и профессионализм ведущих – лучшее, что можно только придумать для корпоратива! Все в восторге!</span>
</div>
</div>
</div>
</div>
<hr />

2. Подключаем в head (или js скрипты можно вниз страницы) скрипты и стили от Owl Carousel (саму библиотеку надо скачать с официального сайта)

<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl.carousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl.carousel/owl-carousel/owl.transitions.css">

<!-- Default Theme -->
<link rel="stylesheet" href="owl.carousel/owl-carousel/owl.theme.css">

<!--  jQuery 1.7+  -->
<script src="owl.carousel/assets/js/jquery-1.9.1.min.js"></script>

<!-- Include js plugin -->
<script src="owl.carousel/owl-carousel/owl.carousel.js"></script>

owl.transitions.css - подключаем только, если используете эффеты переходов, отличные от стандартного.

3. Перед закрывающим body подключаем сами вызовы скриптов с настройками.

<script>
 $(document).ready(function() {

//Sort random function
 function random(owlSelector){
   owlSelector.children().sort(function(){
       return Math.round(Math.random()) - 0.5;
   }).each(function(){
     $(this).appendTo(owlSelector);
   });
 }

$("#owl-reviews").owlCarousel({
     //items : 1,
singleItem: true,
     //itemsScaleUp : true,
navigation : true,
//responsive:false,
//paginationNumbers: true,
slideSpeed : 800,
autoPlay : 6000,
//stopOnHover: true,
navigationText : [
"<i class='icon-chevron-left icon-white'></i>",
     "<i class='icon-chevron-right icon-white'></i>"
],
   beforeInit : function(elem){
     //Parameter elem pointing to $("#owl-demo")
     random(elem);
   }
   });
// Custom Navigation Events
 $(".next").click(function(){
   owl.trigger('owl.next');
 })
 $(".prev").click(function(){
   owl.trigger('owl.prev');
 })

 });
 </script>

4. Остались css стили добавить

#owl-reviews .item img{
float:left;
}
#owl-reviews .right-part{
padding:30px 0 30px 30px;
text-align:left;
font-family:'trebuchet ms', sans-serif; font-style:normal; font-size:16px; line-height:18px; color:#4c4c4c;
display: table-cell;
vertical-align: middle;
height: 140px;
overflow: hidden;
width: 100%;
}
.owl-pagination {
margin:0;
padding:0;
}
.owl-controls {
margin:0 !important;
padding:0 !important;
}

.wrapper-with-margin{
  margin:0px 50px;
}
#owl-reviews { 
text-align:center;
display: block;height: 176px;z-index: 155;
padding: 0 20px;
}
#owl-reviews .owl-prev{
    background: url(../img/strelki.png) 0 0 no-repeat;
    width: 62px;
    height: 60px;
    margin-top:0px;
    margin-left: -8px;
}

#owl-reviews .owl-next{
    background: url(../img/strelki.png) -62px 0 no-repeat;
    width: 62px;
    height: 60px;
    margin-top:0px;
    margin-right: 0px;
}
#owl-reviews .item{
  display: block;
  padding: 0px 20px;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}
#owl-reviews .owl-controls .owl-buttons div {
  padding: 5px 9px;
}

#owl-reviews .owl-buttons i{
  margin-top: 2px;
}

#owl-reviews .owl-controls .owl-buttons div,
{
  position: absolute;
}

#owl-reviews .owl-controls .owl-buttons .owl-prev,
{
  left: -55px;
  top: 55px; 
}
#owl-reviews .owl-controls .owl-buttons .owl-next{
  right: -60px;
  top: 55px;
}