我正在尝试实现类似下面的轮播(live preview):
我一直在摆弄设置,但到目前为止没有运气,尽管有相同的结构和类别。这是我到目前为止所做的:
我的代码段如下:
JS:
$('#lgi__slider .owl-carousel').owlCarousel({
dots: false,
autoWidth: true,
stagePadding: 0,
margin: 15,
nav: true,
navText: ['<i class="icon-left-small"></i>', '<i class="icon-right-small"></i>'],
navContainer: '#lgi__slider',
navClass: [ 'lgi__btn lgi__btn--prev', 'lgi__btn lgi__btn--next' ],
responsive: {
0: {
items: 1,
},
768: {
items: 2,
autoWidth: false,
},
992: {
items: 3,
autoWidth: false,
},
1310: {
items: 3,
autoWidth: false,
margin: 30,
}
}
});
PHP / HTML:
<section class="lgi">
<div class="container">
<div class="lgi__block lgi__block-2">
<div class="lgi__head">
<h2 class="h0">PRODUCTS BY <?php echo $model->title ?></h2>
<p class="lgi__quote"></p>
</div>
<div class ="lgi__slider" id="lgi__slider">
<div class="owl-carousel owl-loaded owl-drag">
<?php foreach ($model->products as $product): ?>
<div class="lgi__item">
<a class="lgi__item-inner main-enterprise-image" data-enterprise-id="<?php echo $product['id']; ?>" data-image="<?php echo ImageHelper::thumb(320, 320, $product->image_cover) ?>" data-category="<?php echo $product->productCategory->title;?>" data-desc="<?php echo $product->text_short_description;?>" data-title="<?php echo $product['title']; ?>">
<div class="lgi__block-img">
<img class="lgi__img" src="<?php echo ImageHelper::thumb(320, 320, $product->image_cover) ?>" />
<div class="overlay"></div>
</div>
<div class="lgi__title stripe">
<h4> <?php echo $product['title']; ?></h4>
<h6>
<?php echo $product->productCategory->title; ?>
</h6>
</div>
</a>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</section>
非常感谢任何人都可以指出我做错了什么。