使用 Javascript 在 WordPress 上将 Slider Carousel 保持为默认活动答案

【问题标题】：Keeping Slider Carousel Active as Default on WordPress using Javascript使用 Javascript 在 WordPress 上将 Slider Carousel 保持为默认活动
【发布时间】：2022-06-16 01:59:21
【问题描述】：

我有一个用作滑块轮播的 Javascript

但我希望第一张幻灯片在页面加载时处于活动状态，有人可以建议对此进行修改或添加

添加截图供参考。

// Slider navigation JS

jQuery(window).load(function () {
  const imageCarousel = jQuery(".myslider .swiper-container"),
    swiperInstance = imageCarousel.data("swiper");

  jQuery("#slide0").click(function () {
    swiperInstance.slideTo(1);
  });
  jQuery("#slide1").click(function () {
    swiperInstance.slideTo(2);
  });
  jQuery("#slide2").click(function () {
    swiperInstance.slideTo(3);
  });
  jQuery("#slide3").click(function () {
    swiperInstance.slideTo(4);
  });
  
  if (swiperInstance != undefined) {
    swiperInstance.on("slideChange", function () {
      var slide = String(swiperInstance.realIndex);
      jQuery(".slide_nav").removeClass("active");
      jQuery("#slide" + slide).addClass("active");
    });
  }
});

.slide_nav {
  cursor: default !important;
}

.slide_nav.active {
border: 1px solid #555555;
  border-radius: 6px;
    background-color: white;
}

span.elementor-button-text {
    cursor: pointer;
}

On Page Load

On Click

基本上，不点击我希望我们在页面加载时保持活跃（第一个）（不点击）

【问题讨论】：

那么调用点击第一个项目会调用的函数，然后直接...？
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。
我希望在页面加载时将第一部分突出显示为默认设置

标签： javascript css wordpress

【解决方案1】：

将按钮类更改为 slide_nav.active（当前它的 slide.nav 处于活动状态）

javascript 没问题。

.slide_nav {
  cursor: default !important;
}

.slide_nav.active {
border: 1px solid #555555;
  border-radius: 6px;
}

【讨论】：