Как реализовать слайдер с миниатюрами в owlСarousel 2?

341
26 февраля 2018, 00:48

Подскажите примеры, как реализовать слайдер на owlСarousel 2, а к нему миниатюры карусели owlСarousel 2

Answer 1

Можно сделать примерно вот так

$(document).ready(function() { 
  dotcount = 1; 
 
  $(".owl-carousel").owlCarousel({ 
    items: 1, 
    margin: 10, 
    nav: false, 
    autoHeight: true 
  }); 
   
  $('.owl-dot').each(function() { 
    $(this).addClass('dotnumber' + dotcount); 
    $(this).attr('data-info', dotcount); 
    dotcount = dotcount + 1; 
  }); 
 
  slidecount = 1; 
 
  $('.owl-item').not('.cloned').each(function() { 
    $(this).addClass('slidenumber' + slidecount); 
    slidecount = slidecount + 1; 
  }); 
 
  $('.owl-dot').each(function() { 
    grab = $(this).data('info'); 
    slidegrab = $('.slidenumber' + grab + ' img').attr('src'); 
    var slide = '<img src="' + slidegrab + '">'; 
    $(this).append(slide) 
  }); 
 
  amount = jQuery('.owl-dot').length; 
  gotowidth = 100 / amount; 
 
  $('.owl-dot').css("width", gotowidth + "%"); 
  newwidth = $('.owl-dot').width(); 
  $('.owl-dot').css("height", newwidth + "px"); 
 
});
.owl-carousel { 
  width: 100%; 
} 
 
img { 
  width: 100%; 
} 
 
.owl-stage-outer { 
  border: 5px solid; 
} 
 
.owl-dots { 
  display: flex; 
} 
 
.owl-dot { 
  padding: 0 10px; 
  margin: 10px; 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script> 
 
<div class="owl-carousel"> 
  <div class="item"><img src="https://www.floridagulfbeachrealty.com/wp-content/uploads/2017/11/cropped-Tom-Slaughter-Header-Media-Image-.jpeg"></div> 
  <div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZvHgi67sLw1WfE7vNMx7JF1sr50bfU4mHTFG8nyPy1b3zXYec"></div> 
  <div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSAkXIOqHoHPOattE5Taft-Sr7McgV9jLE-n-Jx_Mv3OtyHidsD"></div> 
  <div class="item"><img src="http://cdn.newsapi.com.au/image/v1/06e4a0f5221e045e88ba3c707e1e7949"></div> 
</div>

READ ALSO
Не работает форма на php Ajax Bootstrap

Не работает форма на php Ajax Bootstrap

Здравствуйте, я по инструкции собрал Ajax форму которая обрабатывает данные в БД (удаляет редактирует и тд), после того как я собрал эту форму...

238
Ширина окна браузера вместе с полосой прокрутки

Ширина окна браузера вместе с полосой прокрутки

Почему скрипт выдает не ту ширину браузера что нужно? Добавляю к классу body значение max-width соответствующее ширине окна браузера, но выдается...

172
Как не обновлять страницу при нажатии на input[type=submit]?

Как не обновлять страницу при нажатии на input[type=submit]?

У меня имеется indexphp, а в нём php+html код

222
Пошаговая загрузка файлов в форму

Пошаговая загрузка файлов в форму

Нужно реализовать загрузку фотоальбома на сервер через формуПроблема возникла тогда, когда встал вопрос о том, как реализовать загрузку...

223