Javascript 同时激活滑块和手风琴选项卡内容

因为我没有找到任何与此相关的主题，所以我决定创建它。 我正在努力做到这一点： 我有一个滑块和手风琴标签。关键是当用户单击手风琴选项卡时，滑块应该随着选项卡内容的变化而变化。如果单击tab1，滑块应跳至滑块1，如果单击tab2->slider2，依此类推

我所做的是在标签内容改变的同时移动滑块（左/右），但这不是我需要做的

用我迄今为止所取得的成就编写代码：

jQuery（文档）.ready（函数（$）{
$（'#复选框'）。更改（函数（）{
setInterval（函数（）{
moveRight（）；
}, 3000);
});
var slideCount=$（'#slider ul li'）。长度；
var slideWidth=$（'#slider ul li'）.width（）；
var slideHeight=$（'#slider ul li'）.height（）；
var sliderUlWidth=slideCount*slideWidth；
$（'#slider'）.css（{宽度：slideWidth，高度：slideHeight}）；
$（'#slider ul'）.css（{width:sliderUlWidth，marginLeft:-slideWidth}）；
$（“#slider ul li:last child”）.prependTo（“#slider ul”）；
函数moveLeft（）{
$（'#滑块ul'）。设置动画({
左：+slideWidth
}，200，函数（）{
$（“#slider ul li:last child”）.prependTo（“#slider ul”）；
$（'#滑块ul'）.css（'左'，''）；
});
};
函数moveRight（）{
$（'#滑块ul'）。设置动画({
左：-滑动方向
}，200，函数（）{
$（“#slider ul li:first child”）。附加到（“#slider ul”）；
$（'#滑块ul'）.css（'左'，''）；
});
};
$（'a.control\u prev'）。单击（函数（）{
左移（）；
});
$（'a.control\u next'）。单击（函数（）{
moveRight（）；
});
如果（$（窗口）.width（）>768）{
//在较大的视口中隐藏除第一个选项卡外的所有选项卡内容
$（'.accordion_uucontent:not（：first'）.hide（）；
//激活第一个选项卡
$（'.accordion_uutitle:first child'）.addClass（'active'）；
}否则{
$（'.accordion_uucontent'）.hide（）；
};
$（“.accordion内容”）.wrapInner（“
" );
$（'.accordion\uu title'）。在（'单击'，函数（）上）{
$（'.accordion_uucontent'）.hide（）；
moveRight（）；

---

提前谢谢。

什么地方不正常？你在找什么？对我来说很好。抱歉，我没有很好地解释我自己。编辑主要帖子：关键是当用户单击一个手风琴选项卡时，滑块应该随着选项卡内容的变化而变化。如果我单击选项卡1，滑块应该跳转到滑块1，如果单击选项卡2，滑块应该跳转到滑块1r2，等等。@Kirkpatt什么工作不正常？你在找什么？对我来说很好。抱歉，我没有很好地解释我自己。编辑主要帖子：重点是当用户单击一个手风琴选项卡时，滑块应该随着选项卡内容的变化而变化。如果我单击选项卡1，滑块应该跳到滑块1，如果单击选项卡2，滑块应该跳到滑块1“2，等等。”柯克帕特说

jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
setInterval(function () {
    moveRight();
}, 3000);

});


var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

$('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

$('a.control_prev').click(function () {
    moveLeft();
});

$('a.control_next').click(function () {
    moveRight();
});


if($(window).width() > 768){



// Hide all but first tab content on larger viewports
$('.accordion__content:not(:first)').hide();

// Activate first tab
$('.accordion__title:first-child').addClass('active');

} else {

$('.accordion__content').hide();
};


$( ".accordion__content" ).wrapInner( "<div class='overflow-scrolling'>        
</div>" );
$('.accordion__title').on('click', function() {
$('.accordion__content').hide();
moveRight();