创建自定义指标 - 每个滑块中的每 4 个项目

Question

所以我有一个内容滑块

每个项目都有一个 class，其中包含滑块中项目的偏移量

喜欢

<div id="slider">
     <div class="item item-num-1"></div>
     <div class="item item-num-2"></div>
     <div class="item item-num-3"></div>
</div>

它是一个圆形滑块，在最后一项之后它再次显示第一项

所以我在顶部的滑块中添加了自定义指示器，但与大多数滑块不同的是，每个指示器针对滑块中的每 4 个项目

for example

when i have 1-4 items theres is 1 indecitor 
when there are 1-8 items i have 2 indicators 
when there are 1-12 items i have 3 indicators

所以我想在用户开始滑动时将活动 class 添加到右侧指示器

$(document).on('click' , '.prev , .next' , function(){


    var p      = $(this).parents('#slider');
    var it     = p.find('.item:first');
    var offset = Number(it.attr('class').split(' ').pop().replace('item-num-', '' ));

    var indicator_number ;

    if( offset <= 4 )
    indicator_number = 1 ;
    else
    indicator_number = ? ;


    $('.inidicator').eq( indicator_number ).addClass( "active" );


})

我想要这部分 indicator_number = ? ; 我想要一个公式来在当前项目的偏移量大于 4 时找到正确的指示符

Answer 1

简单的算术应该可以满足您的需求：

indicator_number = Math.floor((offset - 1) / 4) + 1);

offset - 1: 获取当前幻灯片的从零开始的索引。
/ 4: 除
+ 1：将结果更改为基于非零的索引
Math.floor：转换为整数

创建自定义指标 - 每个滑块中的每 4 个项目

creating custom indicators - each for every 4 item in slider

javascript

math

jquery