#javascript #php #html #laravel #laravel-8
Вопрос:
Я только начал использовать owl-карусель, и я хочу отображать по 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 элемента за предмет ?
есть ли какой-нибудь другой вариант ?
Комментарии:
1. Вы хотите сказать, что вам нужен один раздел .item с 3 разделами .lms-курс-список предметов внутри него? Итак, если у вас есть 9 элементов в массиве $AsignItems, у вас будет всего три .item divs, а если у вас есть 6 элементов в массиве, у вас будет два .item divs и так далее…?
Ответ №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,