assignment-123/js/swiper.js

const swipecontainer = document.querySelector(".swipecontainer");
const likeBtns = document.querySelector(".like-btns");
var swiper = new Swiper(".swiper", {
  spaceBetween: 60,
  slidesPerView: "auto",
  loop: true,
  speed: 5000,
  freeMode: true,
  allowTouchMove: true,
  autoplay: {
    delay: 0,
    disableOnInteraction: false,
  },
});
function stopAutoPlay() {
  const swiperTranslate = swiper.getTranslate();
  swiper.setTranslate(swiperTranslate);
  swiper.autoplay.stop();
}
function startAutoPlay() {
  swiper.slideTo(swiper.activeIndex, 5000, true);
  swiper.autoplay.start();
}
swipecontainer.addEventListener("mouseenter", () => stopAutoPlay());
swipecontainer.addEventListener("mouseleave", () => startAutoPlay());

// featured slider
$(document).ready(function () {
  var imageSlider = $(".slick-images").slick({
    centerMode: true,
    centerPadding: "60px",
    slidesToShow: 3,
    arrows: false,
    dots: true,
    asNavFor: ".slick-content",
    infinite: true,
    speed: 500,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: "40px",
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 480,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: "40px",
          slidesToShow: 1,
        },
      },
    ],
  });

  var contentSlider = $(".slick-content").slick({
    centerMode: true,
    centerPadding: "60px",
    slidesToShow: 1,
    asNavFor: ".slick-images",
    infinite: true,
    arrows: false,
    dots: true,
    speed: 500,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: "40px",
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 480,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: "40px",
          slidesToShow: 1,
        },
      },
    ],
  });

  $(".content-slider").on("swipe", function (event, slick, direction) {
    if (direction === "left") {
      imageSlider.slick("slickNext");
    } else if (direction === "right") {
      imageSlider.slick("slickPrev");
    }
  });
});