首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使猫头鹰角竖直

如何使猫头鹰角竖直
EN

Stack Overflow用户
提问于 2022-04-22 09:17:14
回答 1查看 433关注 0票数 2

我试图使猫头鹰旋转木马垂直,如下图所示:

如果有人知道其他类似的控制,请提出建议。

代码语言:javascript
运行
复制
$(function() {
  // Owl Carousel
  var owl = $(".owl-carousel");
  owl.owlCarousel({
    items: 3,
    margin: 10,
    rtl: true,
    center: true,
    loop: true,
    nav: true,
    animateOut: 'slideOutUp',
    animateIn: 'slideInUp'
  });
});
代码语言:javascript
运行
复制
.home-demo .item {
  background: #ff3f4d;
}

.home-demo h2 {
  color: #FFF;
  text-align: center;
  padding: 5rem 0;
  margin: 0;
  font-style: italic;
  font-weight: 300;
}

.owl-carousel .owl-item.active.center {
  margin-top: 0 !important;
  position: relative;
  z-index: 999;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.owl-carousel .owl-item {
  transform: scale(0.7);
  padding: 10px 0px;
  transition: all 0.5s;
  transform: scale(60%);
}
代码语言:javascript
运行
复制
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="home-demo">
  <h3>Carousel</h3>
  <div class="owl-carousel owl-theme">
    <div class="item">
      <h2>Swipe</h2>
    </div>
    <div class="item">
      <h2>Drag</h2>
    </div>
    <div class="item">
      <h2>Responsive</h2>
    </div>
    <div class="item">
      <h2>CSS3</h2>
    </div>
    <div class="item">
      <h2>Fast</h2>
    </div>
    <div class="item">
      <h2>Easy</h2>
    </div>
    <div class="item">
      <h2>Free</h2>
    </div>
    <div class="item">
      <h2>Upgradable</h2>
    </div>
    <div class="item">
      <h2>Tons of options</h2>
    </div>
    <div class="item">
      <h2>Infinity</h2>
    </div>
    <div class="item">
      <h2>Auto Width</h2>
    </div>
  </div>
</div>

EN

回答 1

Stack Overflow用户

发布于 2022-04-22 09:49:01

添加owl-旋转木马滑块属性和一些css。

代码语言:javascript
运行
复制
$(function(){
  $('.owl-carousel').owlCarousel({
    items: 1,
    loop: false,
    nav: false,
    margin: 0,
    autoplay: true,
    dots:false
  });

  $('.owl-carousel').data('owl.carousel').difference = function(first, second) {
    return {
        x: first.x - second.x + (first.y - second.y),
        y: first.y - second.y
    };
};
});
代码语言:javascript
运行
复制
.home-demo .item {
  background: #ff3f4d;
}

.home-demo h2 {
  color: #FFF;
  text-align: center;
  padding: 5rem 0;
  margin: 0;
  font-style: italic;
  font-weight: 300;
}

.owl-carousel {
  display:block
}

.owl-carousel .owl-item.active.center {
  margin-top: 0 !important;
  position: relative;
  z-index: 999;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.owl-carousel .owl-item {
  transform: scale(0.7);
  padding: 10px 0px;
  transition: all 0.5s;
  transform: scale(60%);
}

.owl-carousel-vertical{
  transform: rotate3d(0, 0, 1, 90deg);
}

.owl-carousel-vertical .item{
  transform: rotate3d(0, 0, 1, -90deg);
}

.owl-nav{ transform: rotate3d(0, 0, 1, 0deg); }
代码语言:javascript
运行
复制
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="home-demo">
  <h3>Carousel</h3>
  <div class="owl-carousel owl-theme owl-carousel-vertical">
    <div class="item">
      <h2>Swipe</h2>
    </div>
    <div class="item">
      <h2>Drag</h2>
    </div>
    <div class="item">
      <h2>Responsive</h2>
    </div>
    <div class="item">
      <h2>CSS3</h2>
    </div>
    <div class="item">
      <h2>Fast</h2>
    </div>
    <div class="item">
      <h2>Easy</h2>
    </div>
    <div class="item">
      <h2>Free</h2>
    </div>
    <div class="item">
      <h2>Upgradable</h2>
    </div>
    <div class="item">
      <h2>Tons of options</h2>
    </div>
    <div class="item">
      <h2>Infinity</h2>
    </div>
    <div class="item">
      <h2>Auto Width</h2>
    </div>
  </div>
</div>

如需更多参考,请访问此链接点击..。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71966316

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档