Question

我正在创建一个网站来展示我客户的摄影作品。我有几个不同的主要图像，以幻灯片形式旋转。我想要在显示相应图像时将该特定类别的链接更改为其他颜色。

我的功能完美适用于第一张图片，但它不适用于我的第二张图片因为它只在页面加载时调用该功能。有一种方法我可以让它重新检查我的功能一旦旋转木马去另一张幻灯片？提前谢谢=）

<!-- Photo Slider -->
        <div id="maincarousel" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img class="d-block img-fluid natureMain" src="bppnature/Hope.jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid buildingMain" src="bppbuildings/here comes the sun (around the way).jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid fashionMain" src="bppfashion/Eye Eternal.jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid productMain" src="Main Images/Proper Prepardness.jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid abstractMain" src="bppabstract/Interconnected.jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid coverMain" src="bppcoverart/Black EGYptian BastARD (right).jpg">
            </div>
            <div class="item">
              <img class="d-block img-fluid graffittiMain" src="bppgraffitti/Gang'N'em.jpg">
            </div>
            <ol class="carousel-indicators">
                <li data-target="#maincarousel" data-slide-to="0" class="active"></li>
                <li data-target="#maincarousel" data-slide-to="1"></li>
                <li data-target="#maincarousel" data-slide-to="2"></li>
                <li data-target="#maincarousel" data-slide-to="3"></li>
                <li data-target="#maincarousel" data-slide-to="4"></li>
                <li data-target="#maincarousel" data-slide-to="5"></li>
                <li data-target="#maincarousel" data-slide-to="6"></li>
              </ol>
          </div>
        </div>

$(document).ready(function(){
                // $("#mainslider").slick({
                //   infinite: true,
                //   slidesToShow: 1,
                //   slidesToScroll: 1,
                //   centerMode: true,
                // //   autoplay: true,
                // //   autoplaySpeed: 2000,
                //   pauseOnHover: true
                // });
                highlightNatureMain();
                highlightBuildingMain();
                $('.slickcarousel').slick({
                  infinite: true,
                  slidesToShow: 4,
                  slidesToScroll: 1,
                  centerMode: true,
                //   autoplay: true,
                //   autoplaySpeed: 2000,
                  pauseOnHover: true
                });
                carouselDisplay();
                // animationNature();
                // animationBuilding();
                // animationFashion();
                // animationProducts();
                // animationAbstract();
                // animationCovers();
                // animationGraffiti();
                // animationProjects();
                // stopHover();
                // imageHover();
                setInterval(function(){ nameFlash();}, 3000);

            });

function highlightNatureMain() {
                if ($(".natureMain").parent("div").hasClass("active")) {
                    $('.nav-nature').css('color', 'purple');
                }
                else {
                    $(".nav-nature").css("color","white");
                }
            }
            function highlightBuildingMain() {
                if ($(".buildingMain").parent("div").hasClass("active")) {
                    console.log("br");
                    $('.nav-building').css('color', 'purple');
                }
            }

Answer 1

是。根据{{3}}，您可以在幻灯片即将更改时使用事件slide.bs.carousel，并在更改后slid.bs.carousel。

这是documentation。

这是您需要的重要代码

$("#myCarousel").on('slide.bs.carousel', function () {
    alert('A new slide is about to be shown!');
});

修改在标题中，您提到了Bootstrap轮播，但在您的代码中您使用了光滑的滑块。你想用哪个滑块？

逻辑是一样的。只需订阅此活动。

Answer 2

您可以在此功能中调用您的函数：

$("#your-carousel").on('slide.bs.carousel', function () {
  // call your function here
});

访问https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_carousel_event_slide&stacked=h

每次引导转盘滑动到不同的图像时，有没有办法调用函数？

2 个答案: