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;
}

#jQuery