问题：

使用Owl旋转木马2缩放自定义动画

巢星纬

2023-03-14

我正在使用猫头鹰旋转木马2。我已经添加了一些比例动画到图像。

我有两个问题

我不想将滑块从右向左滑动。
如何重新启动动画？我的意思是，如果我刷新页面，那么动画是工作与两个图像，但我的幻灯片是循环的。我必须重新启动动画。

null

$('.hero-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: false,
  dots: true,
  autoplay: true,
  responsiveClass: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 1
    },
    1000: {
      items: 1
    }
  }
})

.heroBannerContent {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  height: 100%;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
  width: 400px;
}

.heroBannerContent p {
  color: #fff;
  font-size: 20px;
}

.heroBanner {
  height: 500px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

.heroBannerImg1 {
  background-image: url('https://cdn.pixabay.com/photo/2014/11/13/06/12/boy-529067_960_720.jpg');
}

.heroBannerImg2 {
  background-image: url('https://cdn.pixabay.com/photo/2016/02/28/12/55/boy-1226964_960_720.jpg');
}

.heroBanner {
  animation: 50s ease 0s normal none infinite running zoomEffect;
  -webkit-animation: 50s ease 0s normal none infinite running zoomEffect;
  -o-animation: 50s ease 0s normal none infinite running zoomEffect;
  -moz--o-animation: 50s ease 0s normal none infinite running zoomEffect;
}

@keyframes zoomEffect {
  from {
    transform: scale(1, 1)
  }
  to {
    transform: scale(2, 2)
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous"
/>
<div class="slide-progress-main">
  <div class="slide-progress"></div>
</div>
<div class="owl-carousel owl-theme hero-carousel">
  <div class="item">
    <div class="heroBanner heroBannerImg1 heroMobileBannerImg1"></div>
    <div class="heroBannerContent">
      <div class="heroContent-inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
        <div class="mt-4"><a class="button theme-button bg-black" href="about-us">About us</a></div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="heroBanner heroBannerImg2 heroMobileBannerImg2"></div>
    <div class="heroBannerContent">
      <div class="heroContent-inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
        <div class="mt-4"><a class="button theme-button bg-black" href="shop">Our Products</a></div>
      </div>
    </div>

  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>

null

共有1个答案

赖浩荡

2023-03-14

null

$('.hero-carousel').owlCarousel({
  loop: true,
  margin: 10,
  nav: false,
  dots: true,
  autoplay: true,
  responsiveClass: true,
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 1
    },
    1000: {
      items: 1
    }
  }
})

$('.hero-carousel').on('changed.owl.carousel', function(e) {

    $('.heroBanner').css('animation', 'none');
    
     window.requestAnimationFrame(function(){
    $('.heroBanner').css('animation', '');
  });
    

});

.owl-carousel.owl-drag .owl-item {
  overflow: hidden;
}

.heroBannerContent {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  height: 100%;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
  width: 400px;
}

.heroBannerContent p {
  color: #fff;
  font-size: 20px;
}

.heroBanner {
  height: 500px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
}

.heroBannerImg1 {
  background-image: url('https://cdn.pixabay.com/photo/2014/11/13/06/12/boy-529067_960_720.jpg');
}

.heroBannerImg2 {
  background-image: url('https://cdn.pixabay.com/photo/2016/02/28/12/55/boy-1226964_960_720.jpg');
}

.heroBanner {
  animation: 50s ease 0s normal none infinite running zoomEffect;
  -webkit-animation: 50s ease 0s normal none infinite running zoomEffect;
  -o-animation: 50s ease 0s normal none infinite running zoomEffect;
  -moz--o-animation: 50s ease 0s normal none infinite running zoomEffect;
}

@keyframes zoomEffect {
  from {
    transform: scale(1, 1)
  }
  to {
    transform: scale(2, 2)
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous"
/>
<div class="slide-progress-main">
  <div class="slide-progress"></div>
</div>
<div class="owl-carousel owl-theme hero-carousel">
  <div class="item">
    <div class="heroBanner heroBannerImg1 heroMobileBannerImg1"></div>
    <div class="heroBannerContent">
      <div class="heroContent-inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
        <div class="mt-4"><a class="button theme-button bg-black" href="about-us">About us</a></div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="heroBanner heroBannerImg2 heroMobileBannerImg2"></div>
    <div class="heroBannerContent">
      <div class="heroContent-inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
        <div class="mt-4"><a class="button theme-button bg-black" href="shop">Our Products</a></div>
      </div>
    </div>

  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>

类似资料：

Owl旋转木马自动播放和stopOnHover不工作

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

我想要一个包含三个项目的旋转木马，中间的项目以一种背景颜色居中（稍后是一个彩色的背景图像），左+右的项目以不同的颜色（稍后是带有灰度级滤镜的imagebackgrounds）。就像这个OWL1在http://codepen.io/owlfonk/pen/dpjhb上的旋转木马，但我想使用OWL2。我好像不能挑出当前的项目？！我的旋转木马一直‘画’在中间和右边...我做错什么了？！越来越令人沮丧！
在项目中使用Owl旋转木马

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

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

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

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

使用Owl旋转木马2缩放自定义动画

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档