微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

如何在单个页面上运行相同的 Javascript 代码，但方向不同owl carousel？

分类：编程问答

如何解决如何在单个页面上运行相同的 Javascript 代码，但方向不同owl carousel？

我对 Javascript 很陌生，所以感谢您的帮助！我创建了这个 Owl 滑块（此代码中有 2 个滑块），但希望第二个旋转木马向相反方向滑动。所以第一个旋转木马应该从左向右滑动，第二个从右向左滑动。但是，当我将 direction:rtl 添加到代码中时，它会影响两个轮播，而不仅仅是底部的轮播。我该如何修改代码，让两个轮播都向相反的方向滑动？

你可以在这里查看codepen --> https://codepen.io/ellie-oop/pen/KKmWLOQ 或者复制下面的代码（HTML、JS、CSS）

谢谢！

HTML

<!DOCTYPE html>
<html lang="en">
<head>
 <Meta charset="UTF-8">
 <title>Flip Carousel</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
</head>
<body>
<div class="owl-carousel">
 <div class="ewmcontainer">
<div class="ewmcontent">
 <a href="https://calendly.com/endorphinwealth" target="_blank">
   <div class="ewmcontent-overlay"></div>
   <img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Phillip.jpg">
   <div class="content-details fadeIn-top">
     <h3>Phillip Richards</h3>
     <p>Managing Director and Financial Advisor</p>
   </div>
 </a>
</div>
</div>
 <div class="ewmcontainer">
<div class="ewmcontent">
 <a href="https://calendly.com/endorphinwealth" target="_blank">
   <div class="ewmcontent-overlay"></div>
   <img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Robert-Rich.jpg">
   <div class="content-details fadeIn-top">
     <h3>Robert Rich CFP®</h3>
     <p>Director and Financial Advisor</p>
   </div>
 </a>
</div>
</div>
 <div class="ewmcontainer">
<div class="ewmcontent">
 <a href="https://calendly.com/endorphinwealth" target="_blank">
   <div class="ewmcontent-overlay"></div>
   <img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Rohan-Gorringe.jpg">
   <div class="content-details fadeIn-top">
     <h3>Rohan Gorringe</h3>
     <p>Practice Principal</p>
   </div>
 </a>
</div>
</div>
 <div class="ewmcontainer">
<div class="ewmcontent">
 <a href="https://calendly.com/endorphinwealth" target="_blank">
   <div class="ewmcontent-overlay"></div>
   <img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Ray-Kan.jpg">
   <div class="content-details fadeIn-top">
     <h3>Ray Kan</h3>
     <p>Senior Financial Advisor & Head of Investments</p>
   </div>
 </a>
</div>
</div>
 <div class="ewmcontainer">
<div class="ewmcontent">
 <a href="https://calendly.com/endorphinwealth" target="_blank">
   <div class="ewmcontent-overlay"></div>
   <img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/MDP_Endorphin-9609-381x254-1.jpg">
   <div class="content-details fadeIn-top">
     <h3>Sanjeev Sharma</h3>
     <p>Senior Financial Advisor</p>
   </div>
 </a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
 <a href="https://calendly.com/endorphinwealth" target="_blank">
   <div class="ewmcontent-overlay"></div>
   <img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Michael-Sauer.jpg">
   <div class="content-details fadeIn-top">
     <h3>Michael Sauer CFP®</h3>
     <p>Financial Advisor</p>
   </div>
 </a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
 <a href="https://calendly.com/endorphinwealth" target="_blank">
   <div class="ewmcontent-overlay"></div>
   <img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Alexander-Rankin-Photo.jpg">
   <div class="content-details fadeIn-top">
     <h3>Alexander Rankin</h3>
     <p>Financial Advisor</p>
   </div>
 </a>
</div>
</div>
</div>
 
 <div class="owl-carousel">
 <div class="ewmcontainer">
<div class="ewmcontent">
 <a href="https://calendly.com/endorphinwealth" target="_blank">
   <div class="ewmcontent-overlay"></div>
   <img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Phillip.jpg">
   <div class="content-details fadeIn-top">
     <h3>Phillip Richards</h3>
     <p>Managing Director and Financial Advisor</p>
   </div>
 </a>
</div>
</div>
 <div class="ewmcontainer">
<div class="ewmcontent">
 <a href="https://calendly.com/endorphinwealth" target="_blank">
   <div class="ewmcontent-overlay"></div>
   <img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Robert-Rich.jpg">
   <div class="content-details fadeIn-top">
     <h3>Robert Rich CFP®</h3>
     <p>Director and Financial Advisor</p>
   </div>
 </a>
</div>
</div>
 <div class="ewmcontainer">
<div class="ewmcontent">
 <a href="https://calendly.com/endorphinwealth" target="_blank">
   <div class="ewmcontent-overlay"></div>
   <img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Rohan-Gorringe.jpg">
   <div class="content-details fadeIn-top">
     <h3>Rohan Gorringe</h3>
     <p>Practice Principal</p>
   </div>
 </a>
</div>
</div>
 <div class="ewmcontainer">
<div class="ewmcontent">
 <a href="https://calendly.com/endorphinwealth" target="_blank">
   <div class="ewmcontent-overlay"></div>
   <img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Ray-Kan.jpg">
   <div class="content-details fadeIn-top">
     <h3>Ray Kan</h3>
     <p>Senior Financial Advisor & Head of Investments</p>
   </div>
 </a>
</div>
</div>
 <div class="ewmcontainer">
<div class="ewmcontent">
 <a href="https://calendly.com/endorphinwealth" target="_blank">
   <div class="ewmcontent-overlay"></div>
   <img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/MDP_Endorphin-9609-381x254-1.jpg">
   <div class="content-details fadeIn-top">
     <h3>Sanjeev Sharma</h3>
     <p>Senior Financial Advisor</p>
   </div>
 </a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
 <a href="https://calendly.com/endorphinwealth" target="_blank">
   <div class="ewmcontent-overlay"></div>
   <img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/07/Michael-Sauer.jpg">
   <div class="content-details fadeIn-top">
     <h3>Michael Sauer CFP®</h3>
     <p>Financial Advisor</p>
   </div>
 </a>
</div>
</div>
<div class="ewmcontainer">
<div class="ewmcontent">
 <a href="https://calendly.com/endorphinwealth" target="_blank">
   <div class="ewmcontent-overlay"></div>
   <img class="content-image" src="https://endorphinwealth.com.au/wp-content/uploads/2021/06/Alexander-Rankin-Photo.jpg">
   <div class="content-details fadeIn-top">
     <h3>Alexander Rankin</h3>
     <p>Financial Advisor</p>
   </div>
 </a>
</div>
</div>
</div>
</body>
</html>

Javascript

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
    $(document).ready(function(){
        $(".owl-carousel").owlCarousel({
            center: true,loop:true,margin:10,autoplay:true,autoplayTimeout:2000,autoplayHoverPause:false,responsive:{
                0:{
                    items:1,nav:false
                },600:{
                    items:3,1000:{
                    items:3,nav:false
                }
            }
        })
    })
</script>

CSS

*,*:before,*:after{
  margin: 0;
  padding: 0;
  -webkit-Box-sizing: border-Box;
  -moz-Box-sizing:border-Box;
  Box-sizing: border-Box;
}

body{
  font-size: 16px;
}

.main-title{
  color: #2d2d2d;
  text-align: center;
  text-transform: capitalize;
  padding: 0.7em 0;
}

.ewmcontainer{
  padding: 1em 0;
  float: left;
  width: 100%;
}
@media screen and (max-width: 640px){
  .ewmcontainer{
    display: block;
    width: 100%;
  }
}

@media screen and (min-width: 900px){
  .ewmcontainer{
    width: 100%;
  }
}

.ewmcontainer .title{
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 10px;
}

.ewmcontent {
  position: relative;
  width: 95%;
  max-width: 400px;
  margin: auto;
  overflow: hidden;
}

.ewmcontent .ewmcontent-overlay {
  background: #0070bb;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.ewmcontent:hover .ewmcontent-overlay{
  opacity: 0.9!important;
    z-index: 1;
}

.content-image{
  width: 100%;
}

.content-details {
  position: absolute;
    z-index: 2;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.ewmcontent:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3{
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p{
  color: #fff;
  font-size: 0.8em;
}

.fadeIn-top{
  top: 20%;
}

解决方法

您可以为每个轮播创建一个 $(document).ready(function()，并具有唯一的 html 元素 ID (<div id="example-carousel">)，因此每个脚本只调用一个轮播。您还可以使用唯一的类名 (<div class="example-carousel">) 每个轮播现在可以接受不同的配置对象。例如：

$(document).ready(function(){
    $("#carousel-top").owlCarousel({ 
        config: etc
        }
    })
})
$(document).ready(function(){
    $("#carousel-bottom").owlCarousel({
        config: etc
        }
    })
})

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot