title: carousel next / prev buttons not working
body: <p>I am trying to implement the following lightbox carousel from <a href="https://codepen.io/webcane/pen/lHGJf" rel="nofollow noreferrer">https://codepen.io/webcane/pen/lHGJf</a>
  Things was working fine until i tried the previous and next button on the carousel doesn't work (Left and Right button on keyboard do work though).</p>
  
  <pre><code>  // 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");
    });
  </code></pre>
  
  <p>After looking at the rest of my js file, I discovered that the following code that came along with the theme was affecting the buttons, as the carousel buttons works fine after i commented out this block of code.</p>
  
  <pre><code>// Smooth scroll on page hash links
    $('a[href*="#"]:not([href="#"])').on('click', function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; 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;
            }
        }
    });
  </code></pre>
  
  <p>Below is the html for my carousel buttons. I am guessing that the smooth scrolling code is picking up on the <strong>href="#modal-carousel"</strong> causing it not to work.</p>
  
  <pre><code>&lt;a class="carousel-control left" href="#modal-carousel" data-slide="prev"&gt;&lt;i class="glyphicon glyphicon-chevron-left"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;a class="carousel-control right" href="#modal-carousel" data-slide="next"&gt;&lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Is there any workaround to this so that I can have both features working together?</p>