jquery - Owl Carousel 2 - 中心和覆盖

标签 jquery css owl-carousel

我想要一个三元素轮播，其中中间元素中心为一种背景颜色(稍后在彩色背景图像上)，左+右元素为不同颜色(稍后在带有灰度滤镜的图像背景上)。猫头鹰 1 的这个，地址:http://codepen.io/OwlFonk/pen/dpjhB但我想使用 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>

最佳答案 

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

关于jquery - Owl Carousel 2 - 中心和覆盖，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28950054/

上一篇：jquery - 如何使用 JQuery 将 <br> 标签放入 <td> 内容中？

下一篇：jquery - 如何使用 jQuery 制作等高的 DIV

相关文章：

jquery - 如何在中心显示 Owl Carousel 导航？

css - 如何让箭头仅在悬停时出现在轮播上

javascript - Chrome (WINDOWS) 在警告消息后缺少光标

javascript - 是否有在呈现元素时触发的函数？

javascript - Laravel Redirect::route 不起作用

CSS 变量与 CSS 模块 @value

css - bootstrap 4 多个元素之前的崩溃

jquery ajax post 数据在 Controller 端始终为 Null

javascript - jQuery - 如何调整 CSS 过滤器(模糊)？

javascript - Owl Carousel 2 中的 dotData 不工作

©2024 IT工具网  联系我们