Вертикальная Сова Карусель - PullRequest
0 голосов
/ 06 февраля 2020

Я работаю с совой-каруселью и хотел бы сделать вертикальный слайдер изображений. При добавлении элементов мне нужно разместить его под предыдущим изображением, а элементы должны скользить вертикально. Любая помощь? Вот мой код, подобный этому:

<div class="col-md-3 todayspecialcolumn">
            <h1>Today's Special</h1>
            <div class="row">
                <div class="offset-md-1 col-md-10  todayspecial owl-carousel owl-theme">        
                    <div class="items">
                        <div class="card todayspecialfood">
                            <div class="todaysimg">
                                <img src="{{url('public/images/fooditems/img4.jpg')}}" alt="foodimage.jpg" class="img-fluid">
                            </div>
                            <div class="row foodprice">
                                <div class="col-md-8">
                                    <h5>Food name</h5>
                                </div>
                                <div class="col-md-4">
                                    <h5>Rs 500</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="items">
                        <div class="card todayspecialfood">
                            <div class="todaysimg">
                                <img src="{{url('public/images/fooditems/img4.jpg')}}" alt="foodimage.jpg" class="img-fluid">
                            </div>
                            <div class="row foodprice">
                                <div class="col-md-8">
                                    <h5>Food name</h5>
                                </div>
                                <div class="col-md-4">
                                    <h5>Rs 500</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="items">
                        <div class="card todayspecialfood">
                            <div class="todaysimg">
                                <img src="{{url('public/images/fooditems/img4.jpg')}}" alt="foodimage.jpg" class="img-fluid">
                            </div>
                            <div class="row foodprice">
                                <div class="col-md-8">
                                    <h5>Food name</h5>
                                </div>
                                <div class="col-md-4">
                                    <h5>Rs 500</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="items">
                        <div class="card todayspecialfood">
                            <div class="todaysimg">
                                <img src="{{url('public/images/fooditems/img4.jpg')}}" alt="foodimage.jpg" class="img-fluid">
                            </div>
                            <div class="row foodprice">
                                <div class="col-md-8">
                                    <h5>Food name</h5>
                                </div>
                                <div class="col-md-4">
                                    <h5>Rs 500</h5>
                                </div>
                            </div>
                        </div>
                    </div>          
                </div>
            </div>                  
        </div>

и js код выглядит следующим образом:

$('.todayspecial').owlCarousel({
    loop:true,
    dots:false,
    autoplay:true,
        autoplayTimeout:1000,
    animateOut: 'slideOutUp',
    animateIn: 'slideInUp',

    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
})

этот код отображает одно изображение, которое скользит по следующему изображению по вертикали, но я хочу разместить 3 изображения элементов по вертикали, а затем скользить по вертикали.

...