Question

我一直在尝试将猫头鹰轮播用于以下功能。共有4个项目。一次在页面上显示3个项目。

因此，在单击下一步时，它一次只能移动1个项目。例如：

当前有3个显示数字1、2、3的框。单击下一步按钮时，应显示2、3、4。然后再次单击下一步时，应显示=> 3、4、1，依此类推。

我尝试了以下代码。

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
        <link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
        <style type="text/css">
            .item {
                height: 10rem;
                background: #4DC7A0;
                padding: 1rem;
            }
       </style>
    </head>
    <body>
        <div class="container">
            <div class="owl-carousel owl-theme">
                <div class="item">
                    <h4>1</h4>
                </div>
                <div class="item">
                    <h4>2</h4>
                </div>
                <div class="item">
                    <h4>3</h4>
                </div>
                <div class="item">
                    <h4>4</h4>
                </div> 
                <div class="item">
                    <h4>5</h4>
                </div> 
                <div class="item">
                    <h4>6</h4>
                </div> 
                <div class="item">
                    <h4>7</h4>
                </div> 
            </div>
        </div>
        <script type="text/javascript">
            $('.owl-carousel').owlCarousel({
                items: 3, 
                loop:true,   
                //nav:true, 
                margin: 10 
            });
        </script>
    </body>
</html>

但是问题是它往

1，2,3 => 4,5,6 => 7，1，2

怎么做 1,2,3 => 2,3,4 => 3,4,5等等。

我遵循了doc provided here.

请帮助。

谢谢。

猫头鹰小猫头鹰：滑动1件，共3件

0 个答案: