Owl-carousel 每个项目显示很多 3 个图像 - Laravel答案

【问题标题】：Owl-carousel display alot 3 images per item - LaravelOwl-carousel 每个项目显示很多 3 个图像 - Laravel
【发布时间】：2021-08-09 18:44:45
【问题描述】：

我刚开始使用 owl-carousel，我想每个项目显示 3 张图片，所以我想确保 laravel 会在幻灯片中显示的每 3 张图片创建一个项目（“.item”）

这是我的 Javascript 代码

$('.owl-carousel').owlCarousel({
            loop:false, // loop over the items
            margin:0,
            items: 6,
            itemsDesktop: [1400, 6],
            itemsDesktopSmall: [1100, 4],
            itemsTablet: [700, 3],
            itemsMobile: [500, 2],
            nav:false, // Display the arrow nav of the carousel
            dots:false, // Display the dot of the carousel
            responsive:{
                0:{ // The width of the screen from 0px to 599px
                    items:2 // How many items you want to display
                },
                600:{ // The width of the screen from 600px to 999 px
                    items:3 // How many items you want to display
                },
                1000:{ // The width of the screen from 1000 px
                    items:4 // How many items you want to display
                }
            }
        })

这是我的刀

<div class="owl-carousel owl-theme" style="margin-left: 20px">
                <div class="item col-md-12">
                    @foreach ($AsignItems as $ItemOwned)
                        <div class="lms-cours-item-list">
                            <img class="img-fluid list-item-img" src="{{ $ItemOwned->image }}" alt="{{ $ItemOwned->log }}" />
                        </div>
                    @endforeach
                </div>
                <div class="item">
                    @foreach ($Diff as $ItemUnowned)
                    <div class="lms-cours-badgs-list unowned-item">
                        <img class="img-fluid list-item-img" src="{{ $ItemUnowned->image }}" alt="{{ $ItemUnowned->alt}}" />
                    </div>
                    @endforeach
                </div>
            </div>

你能告诉我我应该怎么做才能让每件物品有 3 个元素？还有其他选择吗？

【问题讨论】：

你的意思是你需要一个 .item div 里面有 3 个 .lms-cours-item-list div？因此，如果您的 $AsignItems 数组中有 9 个项目，那么您总共有 3 个 .item div，如果您的数组中有 6 个项目，那么您将有两个 .item div 等等......？

标签： javascript php html laravel laravel-8

【解决方案1】：

您可以从您的 js 代码中控制显示多少项目：

$('.owl-carousel').owlCarousel({
            loop:false, // loop over the items
            margin:0,
            items: 3,
            itemsDesktop: [1400, 3],
            itemsDesktopSmall: [1100, 3],
            itemsTablet: [700, 3],
            itemsMobile: [500, 2],
            nav:false, // Display the arrow nav of the carousel
            dots:false, // Display the dot of the carousel
            responsive:{
                0:{ // The width of the screen from 0px to 599px
                    items:2 // How many items you want to display
                },
                600:{ // The width of the screen from 600px to 999 px
                    items:3 // How many items you want to display
                },
                1000:{ // The width of the screen from 1000 px
                    items:3 // How many items you want to display
                }
            }
})

我认为这对你有用。如果您想自动滚动项目，请添加此

autoplay:true,

【讨论】：