尝试添加Caroufredsel滑块分页项目符号

时间:2019-07-11 16:27:28

标签: jquery html css

我正在使用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>

0 个答案:

没有答案
相关问题