jQuery.noConflict();
jQuery(document).ready(function($) {
  /* add HTML by js (no way to add this HTML by webflow UI because this is CMS list*/
  var part1 = "<div class=swiper-pagination></div>";
  // var part2 = '<div class="swiper-button-prev"></div>';
  // var part3 = '<div class="swiper-button-next"></div>';
  // var swiperString = part1.concat(part2, part3);
    $("#swiper-press").append(part1);
});


/* 1 of 2: SWIPER */
var mySwiper1 = new Swiper(".swiper-container-videos", {
  // other options...
  loop: false,
  slidesPerView: "auto",
  spaceBetween: 15,
  centeredSlides: false,
  autoplay: {
    delay: 5000,
    disableOnInteraction: false,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-custom-next",
    prevEl: ".swiper-custom-prev",
  },
  keyboard: {
    enabled: true,
    onlyInViewport: true,
  },
  on: {
    // autoplay end event
    slideChangeTransitionEnd: function() {
      var currentIndex = this.realIndex;


      // move to the first slide when reaching the last slide
      if (currentIndex === this.slides.length - 1) {
        setTimeout(function() {
          mySwiper1.slideTo(0);
          mySwiper1.autoplay.start(); // restart autoplay
        }, 5000); // move to the first slide after 5 seconds (adjust as needed)
      }
    },
  },
});


/* change active class when click */
jQuery(".swiper-container-videos .swiper-wrapper .swiper-slide a").click(function() {
  jQuery(this)
    .closest(".swiper-slide")
    .addClass("selected")
    .siblings()
    .removeClass("selected");
  mySwiper1.slideTo(mySwiper1.clickedIndex);
});


jQuery(".swiper-container-videos .swiper-slide")
  .first()
  .addClass("selected");


/* This is what makes the videos responsive. You can either include this in a <script> tag in the markup, or better yet, include it in a separate JavaScript file. */
jQuery(function() {
  // Look for all the videos inside this element and make them responsive
  jQuery(".vid-container").fitVids();
});


/* JS FOR SCROLLING THE ROW OF THUMBNAILS */
jQuery(document).ready(function() {
  jQuery(".vid-item").each(function(index) {
    jQuery(this).on("click", function() {
      var current_index = index + 1;
      jQuery(".vid-item .thumb").removeClass("active");
      jQuery(".vid-item:nth-child(" + current_index + ") .thumb").addClass("active");
    });
  });
});