jquery 如何修复Owl Carniverrtl中的最后一个项目错误？

kxkpmulp  于 2023-10-17  发布在  jQuery
关注(0)|答案(2)|浏览(84)

我有一个带有owl-carousel的滑块，它导致了rtl的一个bug。当我添加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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>

</html>

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

jquery

2条答案

按热度按时间
ccgok5k5

ccgok5k51#

只要删除center: true，它就可以正常工作了。
还有一件事-你可以尝试Owl Carnival的默认响应选项，而不是检查它的每个断点，如-

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,
        ...
    }
}

你可以在documentation上阅读更多。
顺便说一句，我只是好奇……在第九行，不应该是这样吗？-

else if (1000 <= viewportWidth && viewportWidth > 500)
赞(0）分享  回复(0）举报  2023-10-17
esyap4oy

esyap4oy2#

Owl Carnival不支持WP3 Total Cache（可能还有更多的缓存插件）

赞(0）分享  回复(0）举报  2023-10-17
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com