轮播下一个/上一个按钮不起作用答案

【问题标题】：carousel next / prev buttons not working轮播下一个/上一个按钮不起作用
【发布时间】：2017-03-26 21:28:07
【问题描述】：

我正在尝试从https://codepen.io/webcane/pen/lHGJf 实现以下灯箱轮播一切正常，直到我尝试旋转木马上的上一个和下一个按钮不起作用（但键盘上的左右按钮可以工作）。

  // Hidden gallery
  /* activate the carousel */
  $("#modal-carousel").carousel({interval:false});

  /* change modal title when slide changes */
  $("#modal-carousel").on("slid.bs.carousel", function() {
    $(".modal-title")
    .html($(this)
    .find(".active img")
    .attr("title"));
  });

  /* when clicking a thumbnail */
  $(".row .service-icon").click(function() {
    var content = $(".carousel-inner");
    var title = $(".modal-title");

    content.empty();  
    title.empty();

    var id = this.id;  
    var repo = $("#img-repo .item");
    var repoCopy = repo.filter("#" + id).clone();
    var active = repoCopy.first();

    active.addClass("active");
    title.html(active.find("img").attr("title"));
    content.append(repoCopy);

    // show the modal
    $("#modal-gallery").modal("show");
  });

在查看了我的 js 文件的其余部分后，我发现与主题一起出现的以下代码正在影响按钮，因为在我注释掉这段代码后轮播按钮可以正常工作。

// Smooth scroll on page hash links
  $('a[href*="#"]:not([href="#"])').on('click', function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = $(this.hash);
          if (target.length) {

              var top_space = 0;

              if( $('#header').length ) {
                top_space = $('#header').outerHeight();
              }

              $('html, body').animate({
                  scrollTop: target.offset().top - top_space
              }, 1500, 'easeInOutExpo');

              if ( $(this).parents('.nav-menu').length ) {
                $('.nav-menu .menu-active').removeClass('menu-active');
                $(this).closest('li').addClass('menu-active');
              }

              if ( $('body').hasClass('mobile-nav-active') ) {
                  $('body').removeClass('mobile-nav-active');
                  $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
                  $('#mobile-body-overly').fadeOut();
              }

              return false;
          }
      }
  });

下面是我的轮播按钮的 html。我猜测平滑滚动代码正在 href="#modal-carousel" 上拾取，导致它不起作用。

<a class="carousel-control left" href="#modal-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="carousel-control right" href="#modal-carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>

有什么解决方法可以让这两个功能一起工作吗？

【问题讨论】：

我在笔中粘贴了平滑滚动代码，但左右按钮仍然有效。我什至通过放置调试器语句来确保平滑滚动代码被执行。您能否像第一个注释一样逐个注释掉特定部分： if( $('#header').length ) { //code } 部分，然后是其他部分，然后得出导致问题的特定代码块。请评论您认定为麻烦制造者的区块。
@Dhyey 好的，我照你说的做了。似乎 return false; 导致了问题。

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

通过添加解决了问题

:not([href="#modal-carousel"])

到

$('a[href*="#"]:not([href="#"])')

这样它就会忽略 #modal-carousel

【讨论】：