Owl Carousel在轨道上没有按预期工作

Question

现在，每当我点击右键时，幻灯片都不会改变。块报价虽然有所改变，但它与当前报价重叠，一旦发生这种情况，按钮就不再有效了。

以下是我的application.js中的文件：

//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require owl.carousel
//= require_tree .

以下是我的application.css中的文件：

*= require owl.carousel
*= require owl.theme
*= require_tree .
*= require_self
*/

以下是我的html.erb中的代码：

 <div class="container">
<div class="row">
    <div class="col-md-12">
        <div id="testimonial-slider" class="owl-carousel">
            <div class="testimonial">
                <div class="pic">
                    <img src="images/img-1.jpg" alt="">
                </div>
                <div class="testimonial-content">
                    <p class="description">
                        Lorem ipsum dolor sit amet, consectetur     adipisicing elit. A aliquam amet animi blanditiis consequatur debitis dicta distinctio, enim error eum iste libero modi nam natus perferendis possimus quasi sint sit tempora voluptatem. Est, exercitationem id ipsa ipsum laboriosam perferendis temporibus!
                    </p>
                    <h3 class="testimonial-title">Williamson
                        <small class="post">Web Developer</small>
                    </h3>
                </div>
            </div>

            <div class="testimonial">
                <div class="pic">
                    <img src="images/img-2.jpg" alt="">
                </div>
                <div class="testimonial-content">
                    <p class="description">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam amet animi blanditiis consequatur debitis dicta distinctio, enim error eum iste libero modi nam natus perferendis possimus quasi sint sit tempora voluptatem. Est, exercitationem id ipsa ipsum laboriosam perferendis temporibus!
                    </p>
                    <h3 class="testimonial-title">kristiana
                        <small class="post">Web Designer</small>
                    </h3>
                </div>
            </div>
        </div>
    </div>
</div>

以下是我的css中的代码：

.testimonial {
    border-left: 3px solid #6ab33e;
    padding: 100px 0 100px 275px;
    position: relative;
}

    .testimonial:before,
    .testimonial:after {
        content: "";
        width: 320px;
        height: 55px;
        border-right: 3px solid #6ab33e;
        position: absolute;
        left: 0;
    }

    .testimonial:before {
        border-top: 3px solid #6ab33e;
        top: 0;
    }

    .testimonial:after {
        border-bottom: 3px solid #6ab33e;
        bottom: 0;
    }

    .testimonial .pic {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 100px;
        left: 100px;
    }

        .testimonial .pic img {
            width: 100%;
            height: auto;
        }

    .testimonial .description {
        font-size: 14px;
        color: #7a7e82;
        line-height: 27px;
        position: relative;
    }

        .testimonial .description:before {
            content: "\f10d";
            font-family: fontawesome;
            position: absolute;
            top: -70px;
            left: 0;
            font-size: 20px;
            color: #7a7e82;
        }

    .testimonial .testimonial-title {
        font-size: 22px;
        font-weight: 800;
        color: #22272c;
        text-transform: capitalize;
    }

    .testimonial .post {
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: #6ab33e;
        margin-top: 10px;
    }

.owl-theme .owl-controls {
    text-align: right;
    margin-top: 30px;
}

    .owl-theme .owl-controls .owl-buttons div {
        background: #6ab33e;
        border-radius: 0;
        opacity: 1;
        padding: 5px 10px;
    }

.owl-prev:before,
.owl-next:before {
    content: "\f053";
    font-family: 'FontAwesome';
    color: #fff;
}

.owl-next:before {
    content: "\f054";
}

@media only screen and (max-width: 990px) {
    .testimonial {
        padding: 80px 0 80px 265px;
    }
}

@media only screen and (max-width: 767px) {
    .testimonial {
        padding: 0;
        border: none;
    }

        .testimonial:before,
        .testimonial:after {
            border: none;
        }

        .testimonial .pic {
            position: relative;
            top: 0;
            left: 0;
        }

        .testimonial .description {
            margin-top: 15px;
        }

            .testimonial .description:before {
                content: "";
            }
}

最后这里是我的.js中的代码：

$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
    items:1,
    itemsDesktop:[1000,2],
    itemsDesktopSmall:[979,1],
    itemsTablet:[768,1],
    pagination:false,
    navigation:true,
    slideSpeed:1000,
    singleItem:true,
    transitionStyle:"goDown",
    navigationText:["",""],
    autoPlay:false
  });
});

现在，显示正常，但按钮和转换未按预期工作。