【发布时间】：2015-03-09 19:17:20
【问题描述】：
我想要一个三项目轮播，中间项目中心为一种背景颜色（稍后在背景图像中显示颜色），左+右项目为不同颜色（稍后在带有灰度过滤器的图像背景上）。像这个是 http://codepen.io/OwlFonk/pen/dpjhB 的 owl 1 的，但我想使用 Owl 2。
我似乎无法挑出当前项目？！我的旋转木马一直在“画”中间和右边……我做错了什么？！越来越沮丧！！ =)
<!DOCTYPE html>
<html lang="en">
<head>
<!-- head -->
<meta charset="utf-8">
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Owl 2 - Color Overlay</title>
<!-- Stylesheets -->
<link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet">
<!--<link href="owl.carousel.min.css" rel="stylesheet">-->
<!--<link href="owl.theme.default.min.css" rel="stylesheet">-->
<!-- javascript -->
<script src="http://www.owlcarousel.owlgraphic.com/assets/vendors/jquery.min.js"></script>
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<!--<script src="jquery-2.1.1.min.js"></script>-->
<!--<script src="owl.carousel-2.0.0.js"></script>-->
<style>
.content{
position:absolute;
background-color: rgba(255, 255, 255, 0.7);
filter: alpha(opacity=70);
padding:20px;
width:auto;
left:5%;
bottom:0%;
}
.header{
font-family:Arial;
color:#c70c6f;
font-size:2em;
}
.text{
font-family:Arial;
color:#000;
font-size:1em;
}
<!--preloading images-->
.owl-item.loading {
min-height: 150px;
background: url(AjaxLoader.gif) no-repeat center center;
}
#owl-demo .owl-item > div img {
margin: 0;
height:100px;
background: #cccccc;
}
#owl-demo .owl-item > div {
margin: 0;
height:100px;
background: #66cc22;
}
#owl-demo .owl-item.active > div {
margin: 0;
height:100px;
background: #668899;
}
</style>
</head>
<body style="padding: 0; margin: 0;">
<!-- body -->
<div id="demo" >
<div id="owl-demo" class="owl-carousel" style="width:100%">
<div style="position:relative; width:960px;height:340px;margin-left:0px;margin-right:0px;">
<div class="content" >
<span class="header">Header 1</span><br>
<span class="text">Lorem ipsum and so on...</span>
</div>
</div>
<div style="position:relative; width:960px;height:340px;margin-left:0px;margin-right:0px;">
<div class="content" >
<span class="header">Header 2</span><br>
<span class="text">Lorem ipsum and so on...</span>
</div>
</div>
<div style="position:relative; width:960px;height:340px;margin-left:0px;margin-right:0px;">
<div class="content" >
<span class="header">Header 3</span><br>
<span class="text">Lorem ipsum and so on...</span>
</div>
</div>
<div style="position:relative; width:960px;height:340px;margin-left:0px;margin-right:0px;">
<div class="content" >
<span class="header">Header 4</span><br>
<span class="text">Lorem ipsum and so on...</span>
</div>
</div>
<div style="position:relative; width:960px;height:340px;margin-left:0px;margin-right:0px;">
<div class="content" >
<span class="header">Header 5</span><br>
<span class="text">Lorem ipsum and so on...</span>
</div>
</div>
<div style="position:relative; width:960px;height:340px;margin-left:0px;margin-right:0px;">
<div class="content" >
<span class="header">Header 6</span><br>
<span class="text">Lorem ipsum and so on...</span>
</div>
</div>
</div>
</div>
<script>
var owl = $('.owl-carousel');
owl.owlCarousel({
width:960,
margin:5,
dots:false,
loop: true,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:true,
autoWidth:true,
afterAction: function(el){
//remove class active
this
.$owlItems
.removeClass('active')
//add class active
this
.$owlItems
.eq(this.currentItem + 1)
.addClass('active')
},
//responsive
responsiveClass:true,
responsive:{
0:{
items:1,
center:false,
singleItem:true,
itemsScaleUp:true,
},
960:{
items:3,
center:true,
singleItem:false,
itemsScaleUp:false,
}
}
})
</script>
</body>
</html>
【问题讨论】：
-
Owl 2 将
active类应用于所有可见元素。您正在与之抗争，并且可能应该使用不同的类值（名称）。
标签： jquery css owl-carousel