问题：

Owl旋转木马2-中心和覆盖

越安翔

2023-03-14

我想要一个包含三个项目的旋转木马，中间的项目以一种背景颜色居中（稍后是一个彩色的背景图像），左+右的项目以不同的颜色（稍后是带有灰度级滤镜的imagebackgrounds）。就像这个OWL1在http://codepen.io/owlfonk/pen/dpjhb上的旋转木马，但我想使用OWL2。

我好像不能挑出当前的项目？！我的旋转木马一直‘画’在中间和右边...我做错什么了？！越来越令人沮丧！！=)

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

共有1个答案

阎阎宝

2023-03-14

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

类似资料：

圆滑旋转木马：圆滑旋转木马内的按钮，可以覆盖旋转木马？

所以基本上我想跟滑头做点这样的事...我想有正常的幻灯片，但事情是，是，我想有行动呼吁（按钮）在他们。这通常很容易将按钮与幻灯片一起放入，但有一个溢出：旋转式播放器上隐藏的样式无法取下，否则其他幻灯片会显示出来。我想知道如何才能做到这一点（按钮稍微往外走而不被切断）。编辑：添加边框到旋转木马，这是真正的问题，我有...维护边框并使底部与边框重叠
在项目中使用Owl旋转木马

我正在尝试使用一个猫头鹰旋转木马在我的项目，但不知何故没有显示，我不知道是什么问题与它。谁能帮助我理解我做错了什么？我已经按照本教程https://github.com/owlcarousel2/owlcarousel2中的步骤进行了操作，并且我还尝试检查该元素，但没有出现错误，也没有carousel可见。下面是我的html代码： null null 这里是js代码： null null
owl旋转木马2-主题样式表不工作

我有麻烦让猫头鹰旋转木马主题样式表对我的滑块有任何影响？我使用的是最新版本的owl.carousel.2.0.0-beta.3 这里是我的测试地点：示例网站下面是与owl旋转木马相关的HTML代码：名为“owl.theme.default.min.css”的样式表看起来包含了所有的导航样式表，但由于某种原因，它没有对PREV和NEXT按钮进行样式化？如有任何帮助，我们将不胜感激。
Owl旋转木马-主题css不适用

我需要添加猫头鹰轮播到我的网站。我遵循了说明，并使用css作为默认主题。它工作完美。然后突然（没有更改代码）默认主题停止工作（在导航上没有主题）... 我一直试图修复它，但我失去了我的想法...我甚至将更改还原到我确信它工作的地方！而且这不是关于浏览器的，因为我甚至把它上传到了我的服务器上... 我的代码：和JS：这似乎很奇怪，它曾经工作了一段时间，然后就停止了…… 任何帮助都将是感激的
使用Owl旋转木马2缩放自定义动画

我正在使用猫头鹰旋转木马2。我已经添加了一些比例动画到图像。我有两个问题我不想将滑块从右向左滑动。如何重新启动动画？我的意思是，如果我刷新页面，那么动画是工作与两个图像，但我的幻灯片是循环的。我必须重新启动动画。 null null
Owl旋转木马自动播放和stopOnHover不工作

我正在玩一个boostrap主题是使用猫头鹰旋转木马。这是我使用的主题 https://demo.themewagon.com/preview/free-html5-bootstrap-4-travel-agency-website-template-ecoland 正如您在链接中所看到的，猫头鹰旋转木马用于两个地方用于页面顶部的英雄幻灯片用于证明。我想减慢滑梯的速度，让它们在悬停状态下停

Owl旋转木马2-中心和覆盖

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档