滑块移动幻灯片上方的分页
Slick Slider Move Pagination Above Slides
目前我正在初始化滑块,如下所示
JS
$('.responsive-slider').slick({
nextArrow: '<span class="slick-divider right"></span><i class="fa fa-chevron-right"></i>',
prevArrow: '<span class="slick-divider left"></span><i class="fa fa-chevron-left"></i>',
dots: true,
infinite: false,
speed: 300,
slidesToShow: 6,
slidesToScroll: 6,
});
PHP
<div class="responsive-slider feat-slider-container">
<?php foreach ($products as $i => $product) { $i=$i+1; ?>
<div class="slide" itemscope itemtype="http://schema.org/Product">
<div class="overlay__container relative">
<a href="<?php echo $product['href']; ?>" title="<?php echo $product['name'];?>">
<img
src="<?php $product['thumb'] = preg_replace('/(http:'/'/gd'd.alicdn.com)/', 'https://img.alicdn.com', $product['thumb']); echo $product['thumb']; ?>"
itemprop="image"
alt="<?php echo $product['name']; ?>"
title="<?php echo $product['name'];?>"
class="img-responsive" />
<span itemprop="name" class="slider--name" title="<?php echo $product['name'];?>"><?php echo $product['pname']; ?></span>
</a>
</div>
<div class="slide__caption">
<div class="price">
<span><?php echo $product['price']; ?></span>
</div>
</div>
</div>
<?php } ?>
</div>