我正在使用Caroufredsel滑块,并且我想在底部放两个分页符号。我的滑块中有6个项目,并且该滑块通常显示4个项目,然后一张一张地滑动。我希望滑块以这种方式滑动,但是我也希望分页项目符号在单击后在第一个项目符号上显示4个项目,在第二个项目符号上直接显示2个项目。
此外,我正在获取数字。如何将它们更改为项目符号?这里有谁可以帮助您?
我的代码:
jQuery(document).ready(function() {
// portfolio slider
$('.team-carousel').carouFredSel({
responsive: true,
width: '100%;',
circular: true,
pagination: {
container: "#pagination",
anchorBuilder: true
},
scroll: {
items: 1,
fx: 'crossfade',
duration: 400,
pauseOnHover: true
},
auto: true,
items: {
visible: {
min: 1,
max: 4
},
height: "variable"
},
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js"></script>
<div class="carousel text-center">
<ul class="team-carousel">
<li>
<div class="inner-content text-center">
<img src="img/person3.jpg">
<h2>Jason Statham</h2>
<h3>Knife Designer</h3>
<p>Do not seek to change what has come before. Seek to create that which has not.</p>
</div>
</li>
<li>
<div class="inner-content text-center">
<img src="img/person1.jpg">
<h2>Van Damme</h2>
<h3>No English</h3>
<p>Do not seek to change what has come before. Seek to create that which has not.</p>
</div>
</li>
<li>
<div class="inner-content text-center">
<img src="img/person4.jpg">
<h2>Sylverter Stallone</h2>
<h3>Cigar Lover</h3>
<p>Do not seek to change what has come before. Seek to create that which has not.</p>
</div>
</li>
<li>
<div class="inner-content text-center">
<img src="img/person2.jpg">
<h2>Jet Li</h2>
<h3>I need more money</h3>
<p>Do not seek to change what has come before. Seek to create that which has not.</p>
</div>
</li>
<li>
<div class="inner-content text-center">
<img src="img/person1.jpg">
<h2>A Zaker</h2>
<h3>Monster Killer</h3>
<p>Do not seek to change what has come before. Seek to create that which has not.</p>
</div>
</li>
<li>
<div class="inner-content text-center">
<img src="img/person2.jpg">
<h2>Zaker Olive</h2>
<h3>Soul Crusher</h3>
<p>Do not seek to change what has come before. Seek to create that which has not.</p>
</div>
</li>
</ul>
<div id="pagination" class="pager"></div>
</div>