スリックスライダーslickAddが複数追加

Question

私は4つのオプションで質問があるレイアウトを持っています。任意の答えをOnclick新しいスライドを追加し、そのスライドに移動します。

$(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); 
}); 

このコードを使用する。前のボタンをクリックして答えを変更すると、余分なスライドが同じプロパティで追加されます。

Fiddle Demo

Answer 1

チェックFiddle

$(".slider").slick({ 
 
\t \t \t infinite:false, 
 
\t \t \t draggable:false, 
 
\t \t \t useTransform: true, 
 
\t \t \t speed:900, 
 
\t \t \t cssEase: 'cubic-bezier(0.23, 1, 0.32, 1)', 
 
\t \t \t easing: 'ease', 
 
\t \t \t edgeFriction: 20, 
 
\t \t \t touchMove:false, 
 
\t \t }); 
 
$(document).on('click', 'li', function(e){ 
 
    var Cclass=$(this).parent().parent().parent().attr('class').split('_')[1].split(' ')[0]; 
 
    var newCclass=parseInt(Cclass)+1; 
 
    
 
    if(!$(this).siblings('li').hasClass('goal-selected')) 
 
    { 
 
    var addhtml='<div class="goal_'+newCclass+'"><div class="goals-setter"><h1>Question '+newCclass+'</h1><ul class="goals"><li>Option 1</li><li>Option 2</li><li>Option 3</li><li>Option 4</li></ul></div></div>'; 
 
\t $('.slider').slickAdd(addhtml); 
 
\t \t 
 
    } 
 
    $(this).addClass('goal-selected').siblings('li').removeClass('goal-selected'); 
 
\t movenext(); 
 
}); 
 
\t \t 
 
    
 
    function movenext() 
 
    { 
 
    setTimeout(function(){$('.slick-next').trigger('click');}, 500); 
 
    } 
 
    
 
    
 

.slider { 
 
\t \t width: auto; 
 
\t \t margin: 30px 50px 50px; 
 
\t \t } 
 
\t \t .slick-slide { 
 
\t \t background: #3a8999; 
 
\t \t color: white; 
 
\t \t padding: 40px 0; 
 
\t \t font-size: 30px; 
 
\t \t font-family: "Arial", "Helvetica"; 
 
\t \t text-align: center; 
 
\t \t } 
 

 
\t \t .slick-prev:before, 
 
\t \t .slick-next:before { 
 
\t \t color: black; 
 
\t \t } 
 

 
\t \t .slick-dots { 
 
\t \t bottom: -30px; 
 
\t \t } 
 

 
\t \t .slick-slide:nth-child(odd) { 
 
\t \t background: #e84a69; 
 
\t \t } 
 
\t \t *{ 
 
\t \t \t box-sizing:border-box; 
 
\t \t } 
 
\t \t ul.goals{ 
 
\t \t \t padding:0; 
 
\t \t } 
 
\t \t ul.goals li{ 
 
\t \t \t list-style:none; 
 
\t \t \t float:left; 
 
\t \t \t width:50%; 
 
\t \t \t border:1px solid #fff; 
 
\t \t \t padding:20px; 
 
\t \t \t cursor:pointer; 
 
\t \t } 
 
\t \t .slick-slide{ 
 
\t \t \t padding:0 30px 30px; 
 
\t \t } 
 
\t \t .qNav{ 
 
\t \t \t margin-top:30px; 
 
\t \t \t padding:20px 40px; 
 
\t \t } 
 
\t \t .goal-selected{ 
 
\t \t \t background:tomato; 
 
\t \t }

<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/> 
 
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.13/slick.min.js"></script> 
 

 

 
<section class="slider"> 
 
\t \t <div class="goal_1"> 
 
\t \t \t <div class="goals-setter"> 
 
\t \t \t \t <h1>Question 1</h1> 
 
\t \t \t \t <ul class="goals"> 
 
\t \t \t \t \t <li>Option 1</li> 
 
\t \t \t \t \t <li>Option 2</li> 
 
\t \t \t \t \t <li>Option 3</li> 
 
\t \t \t \t \t <li>Option 4</li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </section>