Javascript 滑溜滑块滑溜添加多个

我有一个布局，其中有一个问题，有4个选项。单击任何答案，它将添加一张新幻灯片并转到该幻灯片

$(document).on('click', '.goal1 li', function(e){
    $(this).addClass('goal-selected').siblings('li').removeClass('goal-selected');
    $('.slider').slickAdd('<div class="goal2"><h1>Question 2</h1><ul class="goals"><li>Option 1</li><li>Option 2</li><li>Option 3</li><li>Option 4</li></ul><div>');
    setTimeout(function(){
        $('.slick-next').trigger('click');
    }, 500);
});

$（文档）。在（'click'，'goal1 li'，函数（e）{
$（this）.addClass（'goal-selected'）。同胞（'li'）。removeClass（'goal-selected'）；
$（'.slider'）.slickAdd（'问题2
选项1
选项2
选项3
选项4
）；
setTimeout（函数（）{
$（'.slick next'）。触发器（'click'）；
}, 500);
});

使用此代码。如果单击“上一页”按钮并更改答案，则会添加一张具有相同属性的额外幻灯片

检查

$（“.slider”）.slick({
无限：错，
可拖动：错误，
是的，
速度:900,，
cssEase:“立方贝塞尔（0.23,1,0.32,1）”，
放松：“放松”，
边缘折射：20，
touchMove:false，
});
$（文档）。在（'click'，'li'，函数（e）{
var Cclass=$（this.parent（）.parent（）.parent（）.attr（'class'）.split（''u'）[1].split（''）[0]；
var newCclass=parseInt（Cclass）+1；
if（！$（this）.sibbines（'li'）.hasClass（'goal-selected'））
{
var addhtml='Question'+newCclass+'
选项1
选项2
选项3
选项4
；
$（'.slider'）.slickAdd（addhtml）；
}
$（this）.addClass（'goal-selected'）。同胞（'li'）。removeClass（'goal-selected'）；
movenext（）；
});
函数movenext（）
{
setTimeout（函数（）{$（'.slick next'）。触发器（'click'）；}，500）；
}

滑块{
宽度：自动；
利润率：30px 50px 50px；
}
.滑滑梯{
背景：#3a8999；
颜色：白色；
填充：40px0；
字体大小：30px；
字体系列：“Arial”、“Helvetica”；
文本对齐：居中；
}
.史莱克·普雷夫：之前，
.滑头下一个：之前{
颜色：黑色；
}
.圆点{
底部：-30px；
}
.光滑滑梯：第n个孩子（单数）{
背景：#e84a69；
}
*{
框大小：边框框；
}
目标{
填充：0；
}
李先生{
列表样式：无；
浮动：左；
宽度：50%；
边框：1px实心#fff；
填充：20px；
光标：指针；
}
.滑滑梯{
填充：0 30px 30px；
}
.qNav{
边缘顶部：30px；
填充：20px 40px；
}
.选定的目标{
背景：番茄；
}

问题1

选择1
选择2
选择3
选择4

谢谢Rony，效果很好，但我希望每个问题都不同，而不仅仅是循环中的问题1、2、3。所以我试过用你的小提琴。看看吧。我怎样才能做到这一点。愿它有帮助！单击“上一个问题选项”时出错，因为没有任何对象，单击“事件”将调用下一个对象。我已经给出了一个if条件

if（$（'.slider ul'）.length<5）

5，它只会添加一个类，而不会调用其他方法。我说得对吗？