引导旋转木马表现得很奇怪

bootstrap carousel acting weird

本文关键字：旋转木马      更新时间：2023-09-26

所以我从这个模板创建了网站，最近我发现轮播不会自动滑动，除非我首先单击"上一个"或"下一步"按钮。

我已经从这个模板中检查了 JavaScript，除了调整时间之外，没有找到与此轮播相关的任何内容。

当我将鼠标放入轮播中时，我只是无法使这个轮播继续循环，我尝试使用暂停选项但不起作用

此外，我的轮播仅包含图像，因此我想添加<a href='#'>来扭曲我的图像，因此当用户单击轮播图像时，它会将他们定向到我已经准备好的链接...

这是我的网站

在您的主文件中.js在 #main 滑块和 .carousel 之间放置一个空格，现在看起来像这样： 

//#main-slider
$(function(){
    $('#main-slider.carousel').carousel({
        interval: 8000
    });
});

它应该看起来像这样： 

//#main-slider
$(function(){
    $('#main-slider .carousel').carousel({
        interval: 8000
    });
});

如果你的轮播中没有任何内容，并且想要一个<a>标签，你可以把它放在项目中，然后绝对定位，让它覆盖整个项目。 您需要将 z 索引设置为 -1，以便仍然可以像这样使用轮播控件：

目录：

<div class="item active" style="background-image: url('http://sm-trust.com/imagesartikel/v0KO6zeQfA2016-01-29n.jpg')">
<a href="first.html"></a>
</div>
<div class="item" style="background-image: url('http://sm-trust.com/imagesartikel/8fXdR35LuO2016-01-29n.jpg')">
<a href="second.html"></a>
</div>

Css： 

#main-slider .item a {
  position: absolute;
  top: 0;left: 0;right: 0;bottom: 0;
  z-index: -1;
}

这是它工作的小提琴

相关文章：