html - 轮播指示器不可点击
问题描述
我有以下问题，当我试图点击它们不会改变的指标时，我无法点击，就像代码没有产生任何影响一样。
.blog .carousel-indicators li {
background: #708198;
border-radius: 50%;
width: 8px;
height: 8px;
}
.blog .carousel-indicators .active {
background: #0fc9af;
}
.item-carousel-blog-block {
outline: medium none;
padding: 15px;
}
.item-box-blog {
border: 1px solid #dadada;
text-align: center;
z-index: 4;
padding: 20px;
}
.item-box-blog-image {
position: relative;
}
.item-box-blog-image figure img {
width: 100%;
height: auto;
}
.item-box-blog-date {
position: absolute;
z-index: 5;
padding: 4px 20px;
top: -20px;
right: 8px;
background-color: #41cb52;
}
.item-box-blog-date span {
color: #fff;
display: block;
text-align: center;
line-height: 1.2;
}
.item-box-blog-date span.mon {
font-size: 18px;
}
.item-box-blog-date span.day {
font-size: 16px;
}
.item-box-blog-body {
padding: 10px;
}
.item-heading-blog a h5 {
margin: 0;
line-height: 1;
text-decoration:none;
transition: color 0.3s;
}
.item-box-blog-heading a {
text-decoration: none;
}
.item-box-blog-data p {
font-size: 13px;
}
.item-box-blog-data p i {
font-size: 12px;
}
.item-box-blog-text {
max-height: 100px;
overflow: hidden;
}
.mt-10 {
float: left;
margin-top: -10px;
padding-top: 10px;
}
.btn.bg-blue-ui.white.read {
cursor: pointer;
padding: 4px 20px;
float: left;
margin-top: 10px;
}
.btn.bg-blue-ui.white.read:hover {
box-shadow: 0px 5px 15px inset #4d5f77;
}<div class="container cta-100 ">
<div class="container">
<div class="row blog">
<div class="col-md-12">
<div id="blogCarousel" class="carousel slide container-blog" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#blogCarousel" data-slide-to="0" class="active"></li>
<li data-target="#blogCarousel" data-slide-to="1"></li>
</ol>
<center><h4 class="title text-uppercase fw-normal mb-4">Latest <span class="text-primary fw-bold">News</span> </h4></center>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4" >
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
<p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
</div>
<!--Text-->
<div class="item-box-blog-text">
<p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor.</p>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
<!--Read More Button-->
</div>
</div>
</div>
当我点击小圆圈时，什么也没有发生..就像代码没有任何影响一样，它的大部分都是用引导程序制作的
解决方案
您缺少 jQuery 和 Bootstrap 的 JS，它们存在于bootsnipp.com/snippets/BxA1B：
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
.blog .carousel-indicators li {
background: #708198;
border-radius: 50%;
width: 8px;
height: 8px;
}
.blog .carousel-indicators .active {
background: #0fc9af;
}
.item-carousel-blog-block {
outline: medium none;
padding: 15px;
}
.item-box-blog {
border: 1px solid #dadada;
text-align: center;
z-index: 4;
padding: 20px;
}
.item-box-blog-image {
position: relative;
}
.item-box-blog-image figure img {
width: 100%;
height: auto;
}
.item-box-blog-date {
position: absolute;
z-index: 5;
padding: 4px 20px;
top: -20px;
right: 8px;
background-color: #41cb52;
}
.item-box-blog-date span {
color: #fff;
display: block;
text-align: center;
line-height: 1.2;
}
.item-box-blog-date span.mon {
font-size: 18px;
}
.item-box-blog-date span.day {
font-size: 16px;
}
.item-box-blog-body {
padding: 10px;
}
.item-heading-blog a h5 {
margin: 0;
line-height: 1;
text-decoration: none;
transition: color 0.3s;
}
.item-box-blog-heading a {
text-decoration: none;
}
.item-box-blog-data p {
font-size: 13px;
}
.item-box-blog-data p i {
font-size: 12px;
}
.item-box-blog-text {
max-height: 100px;
overflow: hidden;
}
.mt-10 {
float: left;
margin-top: -10px;
padding-top: 10px;
}
.btn.bg-blue-ui.white.read {
cursor: pointer;
padding: 4px 20px;
float: left;
margin-top: 10px;
}
.btn.bg-blue-ui.white.read:hover {
box-shadow: 0px 5px 15px inset #4d5f77;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="container cta-100 ">
<div class="container">
<div class="row blog">
<div class="col-md-12">
<div id="blogCarousel" class="carousel slide container-blog" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#blogCarousel" data-slide-to="0" class="active"></li>
<li data-target="#blogCarousel" data-slide-to="1"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4">
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
<p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
</div>
<!--Text-->
<div class="item-box-blog-text">
<p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem
ipsum dolor.</p>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
<!--Read More Button-->
</div>
</div>
</div>
<div class="col-md-4">
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
<p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
</div>
<!--Text-->
<div class="item-box-blog-text">
<p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem
ipsum dolor.</p>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
<!--Read More Button-->
</div>
</div>
</div>
<div class="col-md-4">
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
<p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
</div>
<!--Text-->
<div class="item-box-blog-text">
<p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem
ipsum dolor.</p>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
<!--Read More Button-->
</div>
</div>
</div>
</div>
<!--.row-->
</div>
<!--.item-->
<div class="carousel-item ">
<div class="row">
<div class="col-md-4">
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
<p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
</div>
<!--Text-->
<div class="item-box-blog-text">
<p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem
ipsum dolor.</p>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
<!--Read More Button-->
</div>
</div>
</div>
<div class="col-md-4">
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
<p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
</div>
<!--Text-->
<div class="item-box-blog-text">
<p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem
ipsum dolor.</p>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
<!--Read More Button-->
</div>
</div>
</div>
<div class="col-md-4">
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
<p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
</div>
<!--Text-->
<div class="item-box-blog-text">
<p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem
ipsum dolor.</p>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
<!--Read More Button-->
</div>
</div>
</div>
</div>
<!--.row-->
</div>
<!--.item-->
</div>
<!--.carousel-inner-->
</div>
<!--.Carousel-->
</div>
</div>
</div>
</div>推荐阅读
- angular - 构建 Angular 应用程序时出错需要一个表达式，但看到了 AST
- closures - 如何在闭包中返回 single.deferred
- javascript - 为什么我的菜单栏在 wordpress 中没有像在普通 html 文件中那样收缩时正确收缩？
- android - 如何在 RxJava2/RxKotlin 中正确组合包含点击事件和值的 Observables
- php - 从 MySQL 结果和 PHP 为 D3.js 树创建分层 JSON？
- php - 巨大的 php 文件有多糟糕？
- c - 我可以从 GDataOutputStream 获取或转换到底层 GOutputStream 吗？
- php - 学说2查询构建器不在之间
- architecture - 用于确定服务价格的基于规则的引擎。建议？
- itext - 目前遇到一个HTML大文件转pdf的问题