如何修复猫头鹰旋转木马rtl中的最后一个项目错误

我有一个带有owl-carousel的滑块，它会导致rtl出现错误。当我将rtl添加到我的滑块并到达其中的最后一个项目时，整个滑块将消失！这是代码：

var viewportWidth = $("body").innerWidth();
if (viewportWidth > 1000) {
$('.owl-carousel').owlCarousel({
rtl: true,
center: true,
loop: false,
items: 10
})
} else if (1000 >= viewportWidth && viewportWidth > 500) {
$('.owl-carousel').owlCarousel({
rtl: true,
center: true,
loop: false,
items: 5
})
} else if (500 >= viewportWidth) {
$('.owl-carousel').owlCarousel({
rtl: true,
center: true,
loop: false,
items: 3
})
}

@font-face {
font-family: iransans;
src: url(../fonts/IRANSansWeb.ttf);
}
@font-face {
font-family: "vogueb";
font-style: normal;
src: url(../fonts/vogueb.9b0d038.woff2) format("truetype")
}
* {
font-family: iransans;
}
body,
html {
scroll-behavior: smooth !important;
}
body::-webkit-scrollbar {
width: 12px;
height: 3px
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
border-radius: 10px
}
body::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #41617d;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5)
}
body::-webkit-scrollbar-thumb:window-inactive {
background: #41617d
}
p {
margin: 0;
}
.h-150 {
height: 150px;
}
.container {
margin-top: 22rem;
}
.cont-section,
.afterfirstcont {
margin-top: 4rem !important;
}
.card {
background-color: #1a1a1a !important;
padding: .7rem .5rem !important;
height: 8.7rem !important;
}
.price-text {
font-size: .5rem;
line-height: 9px;
padding: 0 .3rem .3rem .5rem;
}
.cont-img {
position: relative;
}
.cont-img img {
position: absolute;
top: 0;
height: 100%;
}
.price-span {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(0deg, #1a1a1a 25%, transparent 70%);
align-items: end;
}
.recipe {
font-size: 12px;
}
.item {
transition: .4s;
transform: scale(.8) !important;
cursor: pointer !important;
}
.center .item {
transform: scale(1) !important;
}
.owl-dots {
display: none !important;
}
.cont-single-pro {
cursor: grab;
padding: .3rem !important;
}
.cont-single-pro:active {
cursor: grabbing;
}
.ripple {
background-position: center !important;
transition: background 0.8s !important;
}
.ripple:hover {
background: #ffffff radial-gradient(circle, transparent 1%, #ffffff 1%) center/15000% !important;
}
.ripple:active {
background-color: gray !important;
background-size: 100% !important;
transition: background 0s !important;
}
@media only screen and (max-width: 585px) {
.pop-up-inner {
width: 100% !important;
}
body {
padding: 0 8px;
}
}

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet" crossorigin="anonymous">
<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" referrerpolicy="no-referrer">
<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"
referrerpolicy="no-referrer">
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></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" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.min.js" integrity="sha512-wT7uPE7tOP6w4o28u1DN775jYjHQApdBnib5Pho4RB0Pgd9y7eSkAV1BTqQydupYDB9GBhTcQQzyNMPMV3cAew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<header style="transition: .4s; box-shadow: 0 0 20px rgb(0 0 0 / 30%);position: fixed; top: 0; left: 0; right: 0; background: white; z-index: 5;">
<div style="text-align: center;">
<p style="margin: 10px; position: relative; display: inline-flex; background: rgb(223, 223, 223); border-radius: 2rem; padding: .4rem 3rem .4rem 2rem; font-family: vogueb;font-size: 20px;">Diane Lounge <span style="width: 40px;display: block; position: absolute;right:0; top: 0; bottom: 0; background: white;border-radius: 50%;"><img style="border-radius: 50%;" src="https://files.menew.ir/266/settings/23332/conversions/diane-lounge-small.jpg" alt="" width="100%"></span></p>
</div>
<hr style="margin: 0;">
<div>
<div id="added" style="position: fixed; top: 10px; left: 10px;">
<div id="added-inner" style="width: 1.5rem; position: relative;">
<span id="counter-added" style="position: absolute; top: -5px; right: -5px; background: #e24c4b; color: white; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; display: flex; justify-content: center; align-items: center;">21</span>
<img src="https://dianelounge.menew.pw/_nuxt/img/shopping_cart.c551d61.svg" alt="" style="width: 1.5rem;">
</div>
</div>
<p style="font-size: 13px; font-weight: 500;text-align:center;margin-top: 1rem">همه دسته بندی ها در یک نگاه</p>
<br>
<div class="owl-carousel">
<div class="item">
<div style="text-align: center;">
<p class="topbf" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Breakfast</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="topap" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Appetizer</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="topsa" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Salad</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="topme" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Steak & Grill</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="topke" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Persian Foods</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="topsu" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Sushi</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="topch" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Noodle</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="toppi" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Pizza</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="toppa" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Pasta & Italian Food</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="topbr" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Dessert</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="topco" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Espresso Hot & Cold Bar</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="topdr" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Herbal Tea</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="topte" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Hot Drinks</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="topsh" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Milk Shake</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="topti" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Smoothie</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="topsm" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Singnature & Mojito</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="topju" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Juices</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="topbo" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Cold Drink</p>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<p class="topho" style="width: 70px;height: 70px;margin: 0 auto;background-color:black"></p>
<p>Hookah</p>
</div>
</div>
</div>
<br>
</div>
</header>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>

运行上面的代码并转到滑块中的最后一项，然后您将看到问题。

只要删除center: true，它就会正常工作。

还有一件事-你可以尝试猫头鹰旋转木马的默认响应选项，而不是像那样检查每个断点

responsive : {
// breakpoint from 0 up
0 : {
option1 : value,
option2 : value,
...
},
// breakpoint from 480 up
480 : {
option1 : value,
option2 : value,
...
},
// breakpoint from 768 up
768 : {
option1 : value,
option2 : value,
...
}
}

您可以阅读更多文档。

顺便说一句，我只是好奇。。。在第9行，不应该是这个吗？-

else if (1000 <= viewportWidth && viewportWidth > 500)

相关内容

最新更新

热门标签：