轮播与模板冲突

Question

我正在尝试将此模板与自定义轮播一起使用。

我希望轮播替换默认的标头，但是当我在其中放置轮播代码时，什么也没有发生。

当我第一次尝试时，它确实出现了，但是左右箭头无法正常使用。

这是轮播：

<header id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background-image:url('');"></div>
            <div class="carousel-caption">

            </div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url('');"></div>
            <div class="carousel-caption">
            </div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('');"></div>
            <div class="carousel-caption">
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>
</header>

这些脚本位于正文的底部

// Closes the sidebar menu
$("#menu-close").click(function(e) {
    e.preventDefault();
    $("#sidebar-wrapper").toggleClass("active");
});

// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
    e.preventDefault();
    $("#sidebar-wrapper").toggleClass("active");
});

// Scrolls to the selected menu item on the page
$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

Answer 1

看看这个小提琴 。

我用模板设置了小提琴，并全屏显示了Bootstrap轮播。

为什么无法使它工作的问题是因为模板站点在菜单链接中使用了滚动到。
这是一个简单的修复程序，所需要做的就是将<a href=""></a>标记交换为div 。
您可以使用<button>但是每侧都有一个阴影的灰色边缘区域。

 <!-- Left and right controls -->
 <div class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 <span class="sr-only">Previous</span>
 </div>
 <div class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 <span class="sr-only">Next</span>
 </div> 

Answer 2

转盘未显示的原因是转盘必须位于标头内部，而不是标头本身。 改变这个

<header id="myCarousel" class="carousel slide">
...
</header>

对此

<header>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    ...
    </div>
</header>

上一个和下一个按钮不起作用，因为您的页面具有平滑的滚动插件。 只需更改此行

$('a[href*=#]:not([href=#])').click(function() { ... }

这样就可以过滤出轮播按钮，就像这样

$('a[href*=#]:not([href=#]):not([href=#myCarousel])').click(function() { ... }

（ 演示 ）