カルーセルnext/prevボタンが動作しない

Question

私は次のライトボックスカルーセルを実装しようとしています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> 

両方の機能を連携させるための回避策はありますか？

Answer 1

は、それは私がペンでスムーズなスクロールのコードを貼り付け