文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在Shopify页面上有多个Owl传送带

问在Shopify页面上有多个Owl传送带
EN

Stack Overflow用户
提问于 2022-03-12 09:36:38
回答 1查看 269关注 0票数 0

我正在为我的商业网站写一个主页。我在插入第二个猫头鹰旋转木马后遇到了一个问题。第二个滑块出现得很好，但第一个滑块不知何故消失了。当我移走第二个旋转木马时，第一个又回来了。我认为这与给出div特定的ID或类有关，但无论我如何努力，我似乎都无法使它们工作。

我试着给他们指定的类，例如

div class=“owl-一只猫头鹰-旋转木马猫头鹰-主题”和div class=“猫头鹰-两个猫头鹰-旋转木马猫头鹰-主题”

以及ids

div id=“owl-1”class=猫头鹰-旋转木马猫头鹰-主题

和div id=“owl-2”class=猫头鹰-旋转木马猫头鹰-主题

并将脚本更改为

$(‘..owl 1..owl幻灯片..owl主题’).owlCarousel({

$(‘..owl 2..owlCarousel’).owlCarousel({

以及

$(‘#owl.owl-幻灯片.owl-主题’).owlCarousel({

$(‘#OWL-2-2..owlCarousel’).owlCarousel({

我做错了什么？请帮帮我！

下面是第一个滑块代码：

代码语言：javascript
复制
<!DOCTYPE html>
代码语言：javascript
复制
<link rel="stylesheet" href="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/bootstrap-grid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
代码语言：javascript
复制
<style>

    
    
    .owl-slideImg .owl-nav div{
        position: absolute !important;
        width: 25px !important;
        height: 25px !important; 
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer; 
        top: 40%;
    }  
    .owl-slideImg .owl-prev {
        left: -55px;    
        opacity: .65;
        background: url(https://www.panpuri.com/asset/frontend/images/right-chevron.svg) !important; 
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size:  20px 20px !important; 
        transform: rotate(180deg);
        color: rgba(0, 0, 0, 0) !important;
        transition: .33s all ease-out; 
    } 
    .owl-slideImg .owl-next {
        right: -55px;    
        opacity: .65;
        background: url(https://www.panpuri.com/asset/frontend/images/right-chevron.svg) !important; 
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size:  20px 20px !important;
        color: rgba(0, 0, 0, 0) !important;
        transition: .33s all ease-out; 
    }
    .owl-slideImg .owl-prev:hover{ 
        opacity: 1;
    }
    .owl-slideImg .owl-next:hover{ 
        opacity: 1;
    }

    @media only screen and (max-width: 991px) { /* MOBILE */ 
        .owl-slideImg .slide-img{
            height: 250px;
            background-position: center !important;
            background-repeat: no-repeat !important;
            background-size:  100% auto !important;
        } 
        .owl-slideImg .slide-box-text div{
            padding: 40px; 
        } 
        .owl-slideImg .box-icon-svg{
            display: flex;
            justify-content: end;
        } 
        .box-icon-svg img{
            max-width: 30px;
        }
        
        .container-fluid{
            padding-bottom: 20rem;
            margin-bottom: 20rem;
        }
        .owl-slideImg .owl-nav div{ 
            top: 20%;
        }  
        .owl-slideImg .owl-prev {
            left: 0 !important;     
        } 
        .owl-slideImg .owl-next {
            right: 0 !important;     
        }
    }
    
    @media only screen and (min-width: 992px) { /* PC */ 
        
        .owl-slideImg .slide-box-text{ 
            height:100%; 
            display: flex;
            justify-content: center;
            justify-items: center;
            align-items: center; 
            width:100%;
        } 
        .owl-slideImg .slide-img{
            height: 350px;
            background-position: center !important;
            background-repeat: no-repeat !important;
            background-size: 100% auto !important;
        }
        .owl-slideImg .slide-box-text div{
            width: 60%; 
        }
        .owl-slideImg .box-icon-svg{
            position: absolute;
            right: 0;
            bottom: 0;
            display: flex;
            margin-right: 40px;
            margin-bottom: 20px;
        } 
        .box-icon-svg img{
            max-width: 60px !important;
            margin-top: -20px;
        } 
        .owl-slideImg .owl-item{
            width: 100%;
        }

        .service-header{
            text-align: center;
            justify-content: center;
        }
        .container-fluid{
            padding-bottom: 20rem;
            margin-bottom: 20rem;
        }
    }
</style>

<main>
    <br>

    <br>

    <br>

    <h2 class="service-header">our service</h2>

    <div class="col p-5">
        <div class="row justify-content-center"> 
            <div class="col-xl-8 col-lg-10 col-12 owl-slideImg "> 
                <div class="owl-carousel owl-theme">
                    <div class="owl-item">
                        <div class="row">
                            <div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Installation_0702da65-4ad7-42df-9ea6-bca10d7c541a.jpg);"> </div>
                            <div class="col-xl-6 col-12">
                                <div class="slide-box-text">
                                    <div>
                                        Given our versatility and neat craftsmanship in stone installation, we have been providing our service to various leading construction and estate companies in Thailand.
                                    </div>
                                </div> 
                                <div class="box-icon-svg"> 
                                    <h3 class="mr-3">installation</h3>
                                    <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Installicon.svg?v=1646822679" alt="">
                                </div>
                            </div>
                        </div>
                    </div>  
                    <div class="owl-item">
                        <div class="row">
                            <div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Supply.jpg);"> </div>
                            <div class="col-xl-6 col-12">
                                <div class="slide-box-text">
                                    <div>
                                        With connections and credible sources from both domestic and oversea quarries, we can supply great quality stones that meet your needs and specifications.
                                    </div>
                                </div>  
                                <div class="box-icon-svg"> 
                                    <h3 class="mr-3">supply</h3>
                                    <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Supplyicon.svg?v=1646822694" alt="">
                                </div>
                            </div>
                        </div>
                    </div>  
                    <div class="owl-item">
                        <div class="row">
                            <div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Restore.jpg);"> </div>
                            <div class="col-xl-6 col-12">
                                <div class="slide-box-text">
                                    <div>
                                        We let our designers draft up a digital rendered image beforehand for any customisation and specifications such as landscaping and counter tops.
                                    </div>
                                </div> 
                                <div class="box-icon-svg"> 
                                    <h3 class="mr-3">design</h3>
                                    <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Designicon.svg?v=1646822671" alt="">
                                </div>
                            </div>
                        </div>
                    </div>  
                    <div class="owl-item">
                        <div class="row">
                            <div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Design.jpg);"> </div>
                            <div class="col-xl-6 col-12">
                                <div class="slide-box-text">
                                    <div>
                                        With high quality machines, we can provide any finishing and resurfacing process including polishing and honing.
                                    </div>
                                </div>  
                                <div class="box-icon-svg"> 
                                    <h3 class="mr-3">restore</h3>
                                    <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Restoreicon.svg?v=1646822686" alt="">
                                </div>
                            </div>
                        </div>
                    </div>  
                </div>  
            </div>

            <br> 
        </div>
    </div>
</main>


<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>     
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script> 




<script type="text/javascript">
    $(document).ready(function() {

        $(".owl-slideImg .owl-theme").owlCarousel({
            center: false,
            loop: true,
            autoplay: true,
            autoplayTimeout: 50000,
            nav: true,
            dots: true, 
            items: 1,
            margin: 40
        });
    });
</script>

这是第二个滑块代码：

代码语言：javascript
复制
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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" />

</head>
<body>

    <br>

    <div class="logoslider">
        <div class="owl-carousel owl-theme">
            <div class="item">
                <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo5.jpg" alt="The Ritz Carlton">
            </div>
            
            <div class="item">
                <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo2.jpg" alt="Phulaybay">
            </div>
            
            <div class="item">
                <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo6.jpg" alt="Silpakorn">
            </div>
            
            <div class="item">
                <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo3.jpg" alt="Property Perfect">
            </div>
            
            <div class="item">
                <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo1.jpg" alt="Thames Valley">
            </div>
            
            <div class="item">
                <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo4.jpg" alt="The Mall Group">
            </div>
            
            <div class="item">
                <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo7.jpg" alt="Pirom At Vineyard">
            </div>
            
            <div class="item">
                <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo8.jpg" alt="NYE Estate">
            </div>
            
            <div class="item">
                <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo13.jpg" alt="Balcony Thailand">
            </div>
            
            <div class="item">
                <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo10.jpg" alt="Harbor Laemchabang">
            </div>
            
            <div class="item">
                <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo12.jpg" alt="Belle Rama 9">
            </div>
            
            <div class="item">
                <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo9.jpg" alt="Major Development">
            </div>
            
            <div class="item">
                <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo11.jpg" alt="Gazebo Garden">
            </div>
            
            <div class="item">
                <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo15.jpg" alt="360 Pano">
            </div>
            
            <div class="item">
                <img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo14.jpg" alt="Anantarakiri">
            </div>

        </div>

    </div>

    <br>

    <br>

    <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 type="text/javascript">
            $('.owl-carousel').owlCarousel({
                loop: true,
                autoplay: true,
                nav: false,
                dots: false,
                margin: 40,
                autoplayTimeout: 1500,
                responsive:{
                    0:{
                        items:4
                    },
                    600:{
                        items:8
                    },
                    1000:{
                        items:8
                    }
            }
        
        })

        
    </script>

</body>

<style>
    .logoslider{
        display: flex;
        width: 80%;
        justify-content: center;
        justify-items: center;
        align-items: center; 
        margin-left: auto;
        margin-right: auto;
    }

</style>
javascript
html
jquery
css
owl-carousel-2
EN

回答 1

Stack Overflow用户

发布于 2022-03-12 10:17:36

试着像这样

Owl Carousel One

代码语言：javascript
复制
var owl_carousel_one = $('.owl-carousel-one');
owl_carousel_one.owlCarousel({
    loop: true,
    margin: 30,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplayHoverPause: true,
    smartSpeed: 1000,
    responsive: {
        0: {
            items: 4
        },
        600: {
            items: 8
        },
        1000: {
            items: 8
        }
    }
});

Owl Carousel 2

代码语言：javascript
复制
var owl_carousel_two = $('.owl-carousel-two');
owl_carousel_two.owlCarousel({
    loop: true,
    margin: 30,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplayHoverPause: true,
    smartSpeed: 1000,
    responsive: {
        0: {
            items: 4
        },
        600: {
            items: 8
        },
        1000: {
            items: 8
        }
    }
});

只需使用这些独特的类(..owl carousel-1，..owl carousel-2，等等)对于每个owl旋转木马HTML元素。不需要任何身份证。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/71448554

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档