Javascript 如何为CSS捕捉点旋转木马创建可单击的旋转木马点?

Javascript 如何为CSS捕捉点旋转木马创建可单击的旋转木马点?,javascript,jquery,css,Javascript,Jquery,Css,我正在努力让我的CSS捕捉点旋转木马使用由jQuery生成的导航点 我的目标是让用户能够单击点以滑动传送带,或者简单地擦拭传送带卡,点会自动更新,以向用户显示它们所在的幻灯片 这是我的密码: (函数($){ $.fn.has\u滚动条=函数(){ var divnode=this.get(0); if(divnode.scrollHeight>divnode.clientHeight){ 返回true; } if(divnode.scrollWidth>divnode.clientWidth)

我正在努力让我的CSS捕捉点旋转木马使用由jQuery生成的导航点

我的目标是让用户能够单击点以滑动传送带,或者简单地擦拭传送带卡,点会自动更新,以向用户显示它们所在的幻灯片

这是我的密码:

(函数($){
$.fn.has\u滚动条=函数(){
var divnode=this.get(0);
if(divnode.scrollHeight>divnode.clientHeight){
返回true;
}
if(divnode.scrollWidth>divnode.clientWidth){
返回true;
}
}
})(jQuery);
$(窗口).on('load resize',function()){
如果($('.team players').has_scrollbar()){
$('.team players').addClass('overflow-detected');
}否则{
$('.team players').removeClass('overflow-detected');
}
});
var元素=$('.team players.team member');
var dotsContainer=$('.css snap dots');
$(元素)。每个(功能(i){
var计数=i;
var dot=document.createElement('span');
dot.innerHTML=“•”
点.setAttribute(“数据id”,计数);
dotsContainer.append(点);
});
$('.css捕捉点span:type').addClass('active')
。团队成员{
证明内容:中心;
溢出-x:自动;
溢出y:隐藏;
-webkit溢出滚动:触摸;
滚动行为:平滑;
滚动捕捉类型:x必填;
}
.团队成员.团队成员{
宽度:285px;
/*最小宽度:285px*/
最小宽度:260px;
背景:白色;
文本对齐:居中;
利润率:0.30px 0.0;
滚动捕捉对齐:居中;
/*填充:0 10px*/
}
.团队成员.旋转舞台{
显示器:flex;
}
.团队成员。团队成员:类型的最后一个{
右边距:0;
}
.团队成员.团队成员img{
宽度:100%;
}
.团队成员.团队成员跨度{
显示:块;
}
.团队成员.检测到溢出{
对正内容:左;
}
.css捕捉点{
文本对齐:居中;
字体大小:40px;
}
.css捕捉点跨度{
显示:内联块;
边际:0 10px 0;
}
.css捕捉点span.active{
颜色:青柠;
}

托里·谢尔顿
服装工艺师
“Lipsum dolor sit amet,一位杰出的领导者。Aenean commodo ligula eget dolor。Aenean massa。”
丹妮拉·斯特恩
买家行政助理
“Lipsum dolor sit amet,一位杰出的领导者。Aenean commodo ligula eget dolor。Aenean massa。”
露西·卡乌
初级买家
“Lipsum dolor sit amet,一位杰出的领导者。Aenean commodo ligula eget dolor。Aenean massa。”

您可以做的是设置一个全局变量和它的值,就像您单击dot1 do globalVar=-300px时希望它向右滚动300一样,并向滑块包装器添加此wih模板文本,如transfrom:
translatex(${globalVar}px)
和在dot2 globalVar=-600px上,将globalVar初始设置为0


您可以做的是设置一个全局变量和它的值,就像您单击dot1 do globalVar=-300px时希望它向右滚动300一样,并将此wih模板文本添加到滑块包装器中,如transfrom:
translatex(${globalVar}px)
和在dot2 globalVar=-600px上,将globalVar初始设置为0


对于dagging使用我的要点我发现这个解决方案非常有效,请参见:感谢您的帮助对于dagging使用我的要点我发现这个解决方案非常有效,请参见:感谢您的帮助