Question

我正在尝试将this template与自定义轮播一起使用。

我希望轮播更换默认标头，但是当我把旋转木马代码放在那里时，没有任何反应。

当我第一次尝试它时确实出现了，但左右箭头不能正常工作。

这是轮播：

<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

看一下 Fiddle 。

我设置了模板小提琴，并用全屏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() { ... }

（Demo）

轮播与模板冲突

2 个答案: