https://seiya-gss.com/js/character-slider.js

1$(document).ready(function() {
2  var bigimage = $("#big");
3  var thumbs = $("#thumbs");
4  //var totalslides = 10;
5  var syncedSecondary = true;
6
7  bigimage
8    .owlCarousel({
9    items: 1,
10    slideSpeed: 2000,
11    nav: true,
12    autoplay: false,
13    dots: false,
14    loop: true,
15    responsiveRefreshRate: 200,
16    navText: [
17      '<img src="./images/character_select_btn.webp" alt="">',
18      '<img src="./images/character_select_btn.webp" alt="">'
19    ]
20  })
21    .on("changed.owl.carousel", syncPosition);
22
23  thumbs
24    .on("initialized.owl.carousel", function() {
25    thumbs
26      .find(".owl-item")
27      .eq(0)
28      .addClass("current");
29  })
30    .owlCarousel({
31    items: 5,
32    dots: false,
33    nav: true,
34    navText: [
35      '<img src="./images/character_select_btn.webp" alt="">',
36      '<img src="./images/character_select_btn.webp" alt="">'
37    ],
38    smartSpeed: 200,
39    slideSpeed: 500,
40    slideBy: 5,
41    responsiveRefreshRate: 100
42  })
43    .on("changed.owl.carousel", syncPosition2);
44
45  function syncPosition(el) {
46    //if loop is set to false, then you have to uncomment the next line
47    //var current = el.item.index;
48
49    //to disable loop, comment this block
50    var count = el.item.count - 1;
51    var current = Math.round(el.item.index - el.item.count / 2 - 0.5);
52
53    if (current < 0) {
54      current = count + 1 + current;
55    }
56    if (current > count) {
57      current = 0;
58    }
59    //to this
60    thumbs
61      .find(".owl-item")
62      .removeClass("current")
63      .eq(current)
64      .addClass("current");
65    var onscreen = thumbs.find(".owl-item.active").length - 1;
66    var start = thumbs
67    .find(".owl-item.active")
68    .first()
69    .index();
70    var end = thumbs
71    .find(".owl-item.active")
72    .last()
73    .index();
74
75    if (current > end) {
76      thumbs.data("owl.carousel").to(current, 100, true);
77    }
78    if (current < start) {
79      thumbs.data("owl.carousel").to(current - onscreen, 100, true);
80    }
81  }
82
83  function syncPosition2(el) {
84    if (syncedSecondary) {
85      var number = el.item.index;
86      bigimage.data("owl.carousel").to(number, 100, true);
87    }
88  }
89
90  thumbs.on("click", ".owl-item", function(e) {
91    e.preventDefault();
92    var number = $(this).index();
93    bigimage.data("owl.carousel").to(number, 300, true);
94  });
95});