Question

我已经

了

var owl = $(".owl-carousel").owlCarousel({loop: true, nav: true});

我尝试更改循环或导航选项的设置但不能正常工作

owl.data('owl.carousel').settings.loop = false;
owl.data('owl.carousel').settings.nav = false;

如何做到这一点，谢谢。

Answer 1

你应该这样试试。

$(".owl-carousel").owlCarousel({
                autoplay: true,
                autoplayTimeout:2000,
                autoplayHoverPause:true,
                loop: true,
                margin: 10,
                responsiveClass: true,
                navText : ["<i class='fa fa-chevron-left' aria-hidden='true'></i>","<i class='fa fa-chevron-right' aria-hidden='true'></i>"],// If you want to change next and previous text to font-awesome icon.
                responsive: {
                    0:{
                        items: 1,
                        nav: false,
                        dots: true,
                        margin: 0
                    },
                    600:{
                        items: 2,
                        nav: false,
                        dots: true,
                        margin: 25
                    },
                    768: {
                        items: 3,
                        nav: false,
                        dots: true,
                        margin: 25
                    }
                }
            });

＆＃13;

$(".owl-carousel").owlCarousel({
                autoplay: true,
                autoplayTimeout:2000,
                autoplayHoverPause:true,
                loop: true,
                margin: 10,
                responsiveClass: true,
                navText : ["<i class='fa fa-chevron-left' aria-hidden='true'></i>","<i class='fa fa-chevron-right' aria-hidden='true'></i>"],
                responsive: {
                    0:{
                        items: 1,
                        nav: false,
                        dots: true,
                        margin: 0
                    },
                    600:{
                        items: 2,
                        nav: false,
                        dots: true,
                        margin: 25
                    },
                    768: {
                        items: 3,
                        nav: false,
                        dots: true,
                        margin: 25
                    }
                }
            });

＆＃13;

.owl-carousel
{
    margin-bottom: 80px;
}

.owl-carousel .owl-dots
{
    position: absolute;
    bottom: -80px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
        flex-direction: row;

    width: 100%;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.owl-carousel .owl-dots .owl-dot
{
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;

    width: 10px;
    height: 10px;

    border-radius: 50%;
    background-color: white;
}

.owl-carousel .owl-dots .owl-dot.active
{
    background-color: #0199d6;
}

.owl-carousel .owl-dots .owl-dot:not(:last-child)
{
    margin-right: .75rem;
}
/* Testimonial card */
.testimonial-card
{
    margin-bottom: 1.875rem;
    padding: 1.25rem;

    border: 1px solid #d8d8d8;
    background-color: white;
}

.testimonial-card h4
{
    font-family: 'Rubik', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;

    margin-top: 0;
    margin-bottom: .75rem;

    color: #222;
}

.testimonial-card span
{
    font-family: 'Rubik', sans-serif;
    font-size: .9375rem;
    font-weight: 300;

    display: block;

    margin-bottom: 2.5rem;

    color: #0199d6;
}

.testimonial-card p
{
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.4;

    margin-bottom: 0;
}

＆＃13;

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Rubik:300,400" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<div class="owl-carousel">
                                    <div class="item">
                                        <div class="testimonial-card">
                                            <h4>Wilson Edwards</h4>
                                            <span>Developer</span>
                                            <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p>
                                        </div><!-- Testimonial card -->
                                    </div>
                                    <div class="item">
                                        <div class="testimonial-card">
                                            <h4>Wilson Edwards</h4>
                                            <span>Developer</span>
                                            <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p>
                                        </div><!-- Testimonial card -->
                                    </div>
                                    <div class="item">
                                        <div class="testimonial-card">
                                            <h4>Wilson Edwards</h4>
                                            <span>Developer</span>
                                            <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p>
                                        </div><!-- Testimonial card -->
                                    </div>
                                    <div class="item">
                                        <div class="testimonial-card">
                                            <h4>Wilson Edwards</h4>
                                            <span>Developer</span>
                                            <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p>
                                        </div><!-- Testimonial card -->
                                    </div>
                                    <div class="item">
                                        <div class="testimonial-card">
                                            <h4>Wilson Edwards</h4>
                                            <span>Developer</span>
                                            <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p>
                                        </div><!-- Testimonial card -->
                                    </div>
                                    <div class="item">
                                        <div class="testimonial-card">
                                            <h4>Wilson Edwards</h4>
                                            <span>Developer</span>
                                            <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p>
                                        </div><!-- Testimonial card -->
                                    </div>
                                    <div class="item">
                                        <div class="testimonial-card">
                                            <h4>Wilson Edwards</h4>
                                            <span>Developer</span>
                                            <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p>
                                        </div><!-- Testimonial card -->
                                    </div>
                                    <div class="item">
                                        <div class="testimonial-card">
                                            <h4>Wilson Edwards</h4>
                                            <span>Developer</span>
                                            <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p>
                                        </div><!-- Testimonial card -->
                                    </div>
                                    <div class="item">
                                        <div class="testimonial-card">
                                            <h4>Wilson Edwards</h4>
                                            <span>Developer</span>
                                            <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p>
                                        </div><!-- Testimonial card -->
                                    </div>
                                    <div class="item">
                                        <div class="testimonial-card">
                                            <h4>Wilson Edwards</h4>
                                            <span>Developer</span>
                                            <p>"We love the approachable format, and the fact that they chose to feature cuomers that users can really relate to."</p>
                                        </div><!-- Testimonial card -->
                                    </div>
                                </div><!-- Owl Carousel -->

＆＃13;

Answer 2

对于Owl Carousel 2，请在更改选项后尝试刷新轮播：

$('.owl-carousel').data('owl.carousel').options.nav = false;
$('.owl-carousel').trigger( 'refresh.owl.carousel' );

Answer 3

owl.data('owl.carousel').options.autoWidth = true;

owl.trigger('refresh.owl.carousel');

在更改事件调用之后尝试此工作调用

Answer 4

我能够用

来解决它

owl.data('owl.carousel').options.loop = false;

owl.data('owl.carousel').options.nav = false;

Owlcarousel 2在init之后更改设置

4 个答案: