сова Carsouel: слайд 1 предмет, из 3 предметов - PullRequest
Новая
       17

сова Carsouel: слайд 1 предмет, из 3 предметов

0 голосов
/ 04 октября 2018

Я пытался использовать сову карусель для следующей функции.Всего 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 и т. Д.

Iследуйте документу , указанному здесь.

Пожалуйста, помогите.

Заранее спасибо.

...