程序员经验分享-hwhale

使用 Owl Carousel 2 缩放自定义动画

2024-01-02

我在用猫头鹰旋转木马 2 https://owlcarousel2.github.io/OwlCarousel2/index.html。我在图像中添加了一些比例动画。

我遇到两个问题

  1. 我不想将滑块从右向左滑动。
  2. 如何重新启动动画？我的意思是，如果我刷新页面，则动画将同时处理两个图像，但我的幻灯片正在循环播放。我必须再次重新启动动画。
$('.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>

为了在使用时正确更改动画transform: scale() add overflow: hidden for .owl-carousel.owl-drag .owl-item选择器。为此，请将其添加到您的自定义 css 中。像那样：

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

1 - 我不想将滑块从右向左滑动:

为了防止手动更改滑块，请将这些参数添加到滑块初始化中：

touchDrag: false,
mouseDrag: false,

2 - 如何重新启动动画？我的意思是，如果我刷新页面，则动画将同时处理两个图像，但我的幻灯片正在循环播放。我必须重新启动动画:

你的滑块有以下效果scale()努力通过@keyframes。但与每一张下一张幻灯片，图像变得越来越大。而且看起来不太好。

为了避免这个问题，我修改了你的jquery代码，其中resets过渡到下一张幻灯片时的动画。像那样：

 $(".heroBanner").css("animation", "none");

但同时，过渡动画完成后，我们返回默认值animation按事件规则requestAnimationFrame。像那样：

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

下面是一个片段：

$(".hero-carousel").owlCarousel({
    loop: true,
    margin: 10,
    nav: false,
    dots: true,
    touchDrag: false,
    mouseDrag: false,
    autoplay: true,
    responsiveClass: true,
    animateIn: 'fadeIn',
    animateOut: 'fadeOut',
    responsive: {
        0: {
            items: 1,
        },
        600: {
            items: 1,
        },
        1000: {
            items: 1,
        },
    },
});

$(".hero-carousel").on("changed.owl.carousel", function () {
    $(".heroBanner").css("animation", "none");
    window.requestAnimationFrame(function () {
        $(".heroBanner").css("animation", "");
    });
});
.owl-carousel .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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

jQuery

css

owlcarousel

使用 Owl Carousel 2 缩放自定义动画 的相关文章

  • 表单计算器脚本基本价格未加载 OnLoad

    我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal

  • 如何在react-native中获取Text组件的onPress值

    我是一名新的 React Native 开发人员 我想使用 onPress 获取 Text 组件的值并将其传递给函数

  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的

  • 如何使用 JQuery 动态排序

    如果我有一个下拉列表和一个列表框 有没有办法使用 JQuery 根据下拉列表对列表框进行排序 举个例子会很有帮助 这会改变下拉菜单中的顺序 您必须根据自己的标准设置顺序

  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive

  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在

  • 如何在没有@import的情况下减少@import？

    我用的较少 从 Google PageSpeed 我了解到 使用 importCSS 文件中的内容会影响网站速度 所以我想排除任何 import来自我的 CSS 的东西 我有 2 个不同的样式表reset css and rebuild c

  • 模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe

  • 指针事件：无，过滤，适用于 ie8 和任何地方，不适用于 ie9

    正如我在这里看到的 https stackoverflow com questions 3680429 click through a div to underlying elements 4839672 4839672 过滤器可用于模拟跨

  • Jquery 验证不能正确验证数字？

    我在使用 jquery 非侵入式验证验证数字时遇到问题 我使用的版本是 ASP NET MVC 3 jQuery 1 9 1 jQuery 用户界面 1 10 1 JQuery 验证 1 11 0 我试图验证的输入是

  • 如何更改此 jquery 插件的时区/时间戳？

    我正在使用这个名为 timeago 的插件 在这里找到 timeago yarp com 它工作得很好 只是它在似乎不同的时区运行 我住在美国东部 费城时区 当我将准确的 EST 时间放入 timeago 插件时 比如 2011 05 28

  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交

  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成

  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构

  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比

  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a

  • 导致回发到与弹出窗口不同的页面

    我有一个主页和一个详细信息页面 详细信息页面是从主页调用的 JavaScript 弹出窗口 当单击详细信息页面上的 保存 按钮时 我希望主页 刷新 是否有一种方法可以调用主页的回发 同时还可以从详细信息页面维护保存回发 Edit 使用win

  • jQuery 对象相等

    如何确定两个 jQuery 对象是否相等 我希望能够在数组中搜索特定的 jQuery 对象 inArray jqobj my array 1 alert deviceTypeRoot deviceTypeRoot False alert d

  • Spring Rest 和 Jsonp

    我正在尝试让我的 Spring Rest 控制器返回jsonp但我没有快乐 如果我想返回 json 但我有返回的要求 完全相同的代码可以正常工作jsonp我添加了一个转换器 我在网上找到了用于执行 jsonp 转换的源代码 我正在使用 Sp

  • FireFox 中的“contenteditable = true”高度问题

    当有空的时候div with contenteditable true CSS contenteditable true border 1px dashed dedede padding 3px HTML div div 在 IE 和 Ch

随机推荐

热门标签