猫头鹰旋转木马2 - 中心和覆盖

时间：2015-03-09 19:17:21

标签： jquery css owl-carousel

我想要一个三项旋转木马，其中间项目中心为一种背景颜色（后面是背景图像的颜色），左侧+右侧项目为不同颜色（后面是带有灰度过滤器的图像背景）。这是http://codepen.io/OwlFonk/pen/dpjhB的猫头鹰1，但我想使用猫头鹰2。

我似乎无法挑出当前的项目？！我的旋转木马不停地画画＃39;中间和右边...我做错了什么？！变得沮丧!! =）

<!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>

2 个答案:

答案 0 :(得分：1)

由于 Owl Carousel 2 将活动类应用于所有可见元素，因此我倾向于使用jQuery的eq()方法按索引定位第二个元素：

afterMove: function(el) { 
    $('owl-item').removeClass('my-other-color-class');
    $('.owl-item.active').eq(1).addClass('my-other-color-class');
},

答案 1 :(得分：0)

<!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>Owl2</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">

<!-- 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>


<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;
    }

.owl-item > div img {
  margin: 0;
  height:100px;
  background: #cccc66;
}
.owl-item.center > div {
  margin: 0;
  height:100px;
  background: #11cccc;
}
.owl-item:not(.center) > div {
  margin: 0;
  height:100px;
  background: #cc33cc;
}

</style>

  </head>
  <body style="padding: 0; margin: 0;">

    <!-- body -->
        <div id="demo">

          <div id="owl-demo" class="owl-carousel" style="width:100%">

            <div class="item" 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 class="item"  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 class="item"  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>    
     jQuery(document).ready(function($) {

        var owl = $('.owl-carousel');
        owl.owlCarousel({
            dots:false,
            width:960,
            margin:1,       
            loop: true,
            autoplay:true,
            autoplayTimeout:3000,
            autoplayHoverPause:true,
            autoWidth:true,
            center:true,

            //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>
相关问题
最新问题