Owl Carousel 2 Thumbnails в слайдере
Данный пример позволяет создать навигацию (thumbnails) для owl carousel в виде второго слайдера с миниатюрами.
HTML разметка страницы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="outer"> <div id="big" class="owl-carousel owl-theme"> <div class="item"><h1>1</h1></div> <div class="item"><h1>2</h1></div> <div class="item"><h1>3</h1></div> <div class="item"><h1>4</h1></div> <div class="item"><h1>5</h1></div> <div class="item"><h1>6</h1></div> <div class="item"><h1>7</h1></div> <div class="item"><h1>8</h1></div> </div> <div id="thumbs" class="owl-carousel owl-theme"> <div class="item"><h1>1</h1></div> <div class="item"><h1>2</h1></div> <div class="item"><h1>3</h1></div> <div class="item"><h1>4</h1></div> <div class="item"><h1>5</h1></div> <div class="item"><h1>6</h1></div> <div class="item"><h1>7</h1></div> <div class="item"><h1>8</h1></div> </div> </div> |
JQuery код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
$(document).ready(function() { var bigimage = $("#big"); var thumbs = $("#thumbs"); //var totalslides = 10; var syncedSecondary = true; bigimage.owlCarousel({ items: 1, slideSpeed: 2000, nav: true, autoplay: false, dots: false, loop: false, responsiveRefreshRate: 200 }).on("changed.owl.carousel", syncPosition); thumbs.on("initialized.owl.carousel", function() { thumbs.find(".owl-item").eq(0).addClass("current"); }).owlCarousel({ items: 4, dots: false, nav: false, smartSpeed: 200, slideSpeed: 500, slideBy: 4, responsiveRefreshRate: 100 }).on("changed.owl.carousel", syncPosition2); function syncPosition(el) { //если для loop задано значение false, вам необходимо раскомментировать следующую строку var current = el.item.index; //чтобы отключить loop, прокомментируйте этот блок а следующий нужно раскомментировать var count = el.item.count - 1; //var current = Math.round(el.item.index - el.item.count / 2 - 0.5); if (current < 0) { current = count; } if (current > count) { current = 0; } //к этому thumbs .find(".owl-item") .removeClass("current") .eq(current) .addClass("current"); var onscreen = thumbs.find(".owl-item.active").length - 1; var start = thumbs .find(".owl-item.active") .first() .index(); var end = thumbs .find(".owl-item.active") .last() .index(); if (current > end) { thumbs.data("owl.carousel").to(current, 100, true); } if (current < start) { thumbs.data("owl.carousel").to(current - onscreen, 100, true); } } function syncPosition2(el) { if (syncedSecondary) { var number = el.item.index; bigimage.data("owl.carousel").to(number, 100, true); } } thumbs.on("click", ".owl-item", function(e) { e.preventDefault(); var number = $(this).index(); bigimage.data("owl.carousel").to(number, 300, true); }); }); |
CSS верстка:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
.outer { margin:0 auto; max-width:800px; } #big .item { background: #ec6e46; padding: 120px 0px; margin:2px; color: #FFF; border-radius: 3px; text-align: center; } #thumbs .item { background: #C9C9C9; height:70px; line-height:70px; padding: 0px; margin:2px; color: #FFF; border-radius: 3px; text-align: center; cursor: pointer; } #thumbs .item h1 { font-size: 18px; } #thumbs .current .item { background:#FF5722; } .owl-theme .owl-nav [class*='owl-'] { -webkit-transition: all .3s ease; transition: all .3s ease; } .owl-theme .owl-nav [class*='owl-'].disabled:hover { background-color: #D6D6D6; } #big.owl-theme { position: relative; } #big.owl-theme .owl-next, #big.owl-theme .owl-prev { background:#333; width: 22px; line-height:40px; height: 40px; margin-top: -20px; position: absolute; text-align:center; top: 50%; } #big.owl-theme .owl-prev { left: 10px; } #big.owl-theme .owl-next { right: 10px; } #thumbs.owl-theme .owl-next, #thumbs.owl-theme .owl-prev { background:#333; } |