Слайдер со статическим текстом owl-carousel

Мне нужно сделать что-то подобное как в первом слайдере (самый верхний блок) http://www.templatemonster.com/demo/58112.html

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

Вот пример кода:

<div class="hotel">
    <div id="owl-hotel" class="owl-carousel owl-theme">
        <div class="hotel__slide hotel__slide1">1</div>
        <div class="hotel__slide hotel__slide2">2</div>
        <div class="hotel__slide hotel__slide3">3</div>
    </div>
    <div class="hotel__pres">проверка</div>
</div>
.hotel{
  position: relative;
  background-color: lightblue;
  width: 100%;
  display: block;
  overflow: hidden;
  &__slide{
    width: 100%;
    height: 100%;
    display: inline-block;
    -webkit-background-size:cover;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center 0;
  }
  &__slide1{
    background-image: url('../image/slider-1_slide01.jpg');
  }
  &__slide2{
    background-image: url('../image/slider-1_slide02.jpg');
  }
  &__slide3{
    background-image: url('../image/slider-1_slide03.jpg');
  }
  &__pres{
    width: 100%;
    height: 100%;
    position: absolute;
    color: white;
    top: 0px;
    z-index: 5;
  }
}

$("#owl-hotel").owlCarousel({
    center:false,
    items:1,
    loop: true
});

Но это не совсем удачный вариант. Не могу понять как сделать так что бы при свайпе на центральном блоке(там где текст) показывало следующий слайд. В моем же варианте hotel__pres занимает все пространство ,и свайп делать невозможно.