立式猫头鹰旋转木马

时间:2020-02-06 10:30:28

标签: owl-carousel-2

我正在使用猫头鹰传送带,并且想制作一个垂直图像滑块。在添加项目时,我需要将其放置在上一张图片的下方,并且这些项目需要垂直滑动。有什么帮助吗? 这是我的代码,如下所示:

<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个图像项,然后垂直滑动。

0 个答案:

没有答案