JQuery - 根据活动时的数据传送轮播滑动时更改背景图像
JQuery - change background image when sliding according to data-ride carousel when active
有没有办法覆盖 bootstrap 轮播指示器?我想在项目处于活动状态时更改指示器的背景。
通常在bootstrap的默认轮播中,指标只是这样:
它与 class="active" 有关,但我不知道如何在 js 中正确执行它。提前致谢。
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators" id="div-indicators">
<li class="ind-img1 active" id="round-image1" data-target="#myCarousel" data-slide-to="0"></li>
<li class="ind-img2" id="round-image2" data-target="#myCarousel" data-slide-to="1"></li>
<li class="ind-img3" id="round-image3" data-target="#myCarousel" data-slide-to="2"></li>
<li class="ind-img4" id="round-image4" data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active" id="1">
<!-- Indicators -->
<div class="container item_quote">
<img src="{% static 'img/landingpage/quote-1.png' %}">
</div>
<div class="container item_message">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</span><br/>
<span>Lorem ipsum dolor sit amet, consectetur </span><br/>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</span><br/>
<a class="proof-modal" data-toggle="modal" data-target="#lightbox">
Click here to enlarge image
</a><br/>
<span>- first testimonial</span>
</div>
<div class="container item_quote">
<img src="{% static 'img/landingpage/quote-2.png' %}">
</div>
</div>
<!-- more items -->
</div>
</div>
EDIT
澄清一下,我想这样做:
item[0] = img1.png
item[1] = img2.png
item[2] = img3.png
对于每个项目,我都可以根据活动项目更改背景图像。
要更改活动 carousel-indicators
的 css 样式,请使用此选择器 .carousel-indicators > li.active
以活动的为目标。
要对每个img进行预览,您需要将相同的img以相同的顺序添加到carousel-indicators
以创建预览效果。
.carousel-indicators.carousel-indicators--thumbnails li {
width: 80px;
height: 45px;
margin: 0;
border: none;
border-radius: 0;
}
.carousel-indicators.carousel-indicators--thumbnails .active {
background-color: transparent;
}
.carousel-indicators.carousel-indicators--thumbnails .active .thumbnail {
border-color: red;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="5000">
<!-- Indicators -->
<ol class="carousel-indicators carousel-indicators--thumbnails">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">
<div class="thumbnail">
<img src="http://lorempixel.com/900/401/" class="img-responsive">
</div>
</li>
<li data-target="#carousel-example-generic" data-slide-to="1">
<div class="thumbnail">
<img src="http://lorempixel.com/900/402/" class="img-responsive">
</div>
</li>
<li data-target="#carousel-example-generic" data-slide-to="2">
<div class="thumbnail">
<img src="http://lorempixel.com/900/403/" class="img-responsive">
</div>
</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/900/401/" width="800" height="400">
<div class="carousel-caption">
Slide 1
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/900/402/" width="800" height="400">
<div class="carousel-caption">
Slide 2
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/900/403/" width="800" height="400">
<div class="carousel-caption">
Slide 3
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
我解决了。我必须使用事件处理程序 "slide.bs.carousel" 或 "slid.bs.carousel"
滑动时 - slide.bs
滑动后 - slid.bs
$('#Carousel').on('slide.bs.carousel', function (e) {
var id = e.relatedTarget.id;
switch (id) {
case "1":
// img1
break;
case "2":
// img2
break;
case "3":
// img3
break;
default:
// none
}
})
有没有办法覆盖 bootstrap 轮播指示器?我想在项目处于活动状态时更改指示器的背景。
通常在bootstrap的默认轮播中,指标只是这样:
它与 class="active" 有关,但我不知道如何在 js 中正确执行它。提前致谢。
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators" id="div-indicators">
<li class="ind-img1 active" id="round-image1" data-target="#myCarousel" data-slide-to="0"></li>
<li class="ind-img2" id="round-image2" data-target="#myCarousel" data-slide-to="1"></li>
<li class="ind-img3" id="round-image3" data-target="#myCarousel" data-slide-to="2"></li>
<li class="ind-img4" id="round-image4" data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active" id="1">
<!-- Indicators -->
<div class="container item_quote">
<img src="{% static 'img/landingpage/quote-1.png' %}">
</div>
<div class="container item_message">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</span><br/>
<span>Lorem ipsum dolor sit amet, consectetur </span><br/>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</span><br/>
<a class="proof-modal" data-toggle="modal" data-target="#lightbox">
Click here to enlarge image
</a><br/>
<span>- first testimonial</span>
</div>
<div class="container item_quote">
<img src="{% static 'img/landingpage/quote-2.png' %}">
</div>
</div>
<!-- more items -->
</div>
</div>
EDIT
澄清一下,我想这样做:
item[0] = img1.png
item[1] = img2.png
item[2] = img3.png
对于每个项目,我都可以根据活动项目更改背景图像。
要更改活动 carousel-indicators
的 css 样式,请使用此选择器 .carousel-indicators > li.active
以活动的为目标。
要对每个img进行预览,您需要将相同的img以相同的顺序添加到carousel-indicators
以创建预览效果。
.carousel-indicators.carousel-indicators--thumbnails li {
width: 80px;
height: 45px;
margin: 0;
border: none;
border-radius: 0;
}
.carousel-indicators.carousel-indicators--thumbnails .active {
background-color: transparent;
}
.carousel-indicators.carousel-indicators--thumbnails .active .thumbnail {
border-color: red;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="5000">
<!-- Indicators -->
<ol class="carousel-indicators carousel-indicators--thumbnails">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">
<div class="thumbnail">
<img src="http://lorempixel.com/900/401/" class="img-responsive">
</div>
</li>
<li data-target="#carousel-example-generic" data-slide-to="1">
<div class="thumbnail">
<img src="http://lorempixel.com/900/402/" class="img-responsive">
</div>
</li>
<li data-target="#carousel-example-generic" data-slide-to="2">
<div class="thumbnail">
<img src="http://lorempixel.com/900/403/" class="img-responsive">
</div>
</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/900/401/" width="800" height="400">
<div class="carousel-caption">
Slide 1
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/900/402/" width="800" height="400">
<div class="carousel-caption">
Slide 2
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/900/403/" width="800" height="400">
<div class="carousel-caption">
Slide 3
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
我解决了。我必须使用事件处理程序 "slide.bs.carousel" 或 "slid.bs.carousel" 滑动时 - slide.bs 滑动后 - slid.bs
$('#Carousel').on('slide.bs.carousel', function (e) {
var id = e.relatedTarget.id;
switch (id) {
case "1":
// img1
break;
case "2":
// img2
break;
case "3":
// img3
break;
default:
// none
}
})