Question

我正在使用slick.js来显示每张幻灯片6个项目（2行，3列）的网格。我需要正常的上一个和下一个箭头导航，但也希望将活动项目数显示为分页帮助形式。

因此，如果在第二张幻灯片上，文本应显示为“显示x结果的7-12”。我只能找到显示幻灯片编号而不是项目的方法，每当浏览幻灯片时，此文本都需要更新。

除非我没有找到一个平滑的选项，否则我将不得不遍历所有项，用数字对它们进行索引，并找到具有父类“ .slick-active”的项。但是我没有成功。

我也在努力显示项目总数，因为slick似乎提供的最接近的是幻灯片数量，但这与幻灯片有关，而不是其中的项目。

一个要注意的是，这些项目并不总是6的完美倍数，因此最后一页的项目可能少于6。

已附加Codepen。非常感谢！

$('.carousel').slick({
  rows: 2,
  slidesToShow: 3,
  slidesToScroll: 3,
  autoplay: false,
  arrows: true,
  infinite: false,
  draggable: false,
  prevArrow: $('.prev'),
  nextArrow: $('.next')
});

.item {
  background: silver;
  color: black;
  text-align: center;
  font-size: 30px;
  display: inline;
  border: 5px solid white;
}
.nav {
  width: 100%;
}
.nav p{
  width: 50%;
  float: left;
  display: block;
  text-align: center;
}
.results {
  text-align: center;
  width: 100%;
  padding-top: 10px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>


<div class="carousel">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
</div>
<div class="nav">
  <p class="prev">prev</p>
  <p class="next">next</p>
</div>
<div class="results">
  Showing 1 to 9 of [total] results
</div>

Answer 1

这是一个使用init和afterChange events

的演示

注意：请尽可能使用data()代替html()

$('.carousel').on('init afterChange', function(event, slick, currentSlide){
  let total = $('.carousel .item').length;
  let start = $('.carousel .slick-active:first .item:first').html();
  let end = $('.carousel .slick-active:last .item:last').html();
  
  $('.results').html(`Showing ${start} to ${end} of ${total} results`)
})

$('.carousel').slick({
  rows: 2,
  slidesToShow: 3,
  slidesToScroll: 3,
  autoplay: false,
  arrows: true,
  infinite: false,
  draggable: false,
  prevArrow: $('.prev'),
  nextArrow: $('.next')
})

.item {
  background: silver;
  color: black;
  text-align: center;
  font-size: 30px;
  display: inline;
  border: 5px solid white;
}
.nav {
  width: 100%;
}
.nav p{
  width: 50%;
  float: left;
  display: block;
  text-align: center;
}
.results {
  text-align: center;
  width: 100%;
  padding-top: 10px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>


<div class="carousel">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
</div>
<div class="nav">
  <p class="prev">prev</p>
  <p class="next">next</p>
</div>
<div class="results">
  Showing 1 to 9 of [total] results
</div>

Answer 2

我修改了Aswin的答案，以显示可见幻灯片的当前活动索引，而不是读取data / html属性。

public class AppPrefrences {

            private static SharedPreferences mPrefs;
            private static SharedPreferences.Editor mPrefsEditor;


    public static String getUserName(Context ctx) {
            mPrefs = PreferenceManager.getDefaultSharedPreferences(ctx);
            return mPrefs.getString("userName", "");
        }

        public static void setUserName(Context ctx, String value) {
            mPrefs = PreferenceManager.getDefaultSharedPreferences(ctx);
            mPrefsEditor = mPrefs.edit();
            mPrefsEditor.putString("userName", value);
            mPrefsEditor.commit();
        }

public static void clearAllPreferences(Context ctx) {
        mPrefs = PreferenceManager.getDefaultSharedPreferences(ctx);
        mPrefsEditor = mPrefs.edit();
        mPrefsEditor.clear();
        mPrefsEditor.commit();
    }
        }

$('.carousel').on('init afterChange', function(event, slick, currentSlide){
    let total = $('.carousel .item').length;
    var first = $('.slick-active:first > div:first').get(0);
    var last = $('.slick-active:last > div:last').get(0);
  if($(last).html() == '')
    last = $('.slick-active:last > div:not(:empty)').get(0);
    let start,end;
    $('.slick-slide > div').each(function(i,v){
        if(first === $(v).get(0)) {
            start = i+1;
        } 
        if(last === $(v).get(0)) {
            end = i+1;
        }
    });
  $('.results').html(`Showing ${start} to ${end} of ${total} results`)
})
$('.carousel').slick({
  rows: 2,
  slidesToShow: 3,
  slidesToScroll: 3,
  autoplay: false,
  arrows: true,
  infinite: false,
  draggable: false,
  prevArrow: $('.prev'),
  nextArrow: $('.next')
})

.item {
  background: silver;
  color: black;
  text-align: center;
  font-size: 30px;
  display: inline;
  border: 5px solid white;
}
.nav {
  width: 100%;
}
.nav p{
  width: 50%;
  float: left;
  display: block;
  text-align: center;
}
.results {
  text-align: center;
  width: 100%;
  padding-top: 10px
}

使用Slick轮播对可见项进行编号

2 个答案: