CODEWITHSUNDEEP
javascriptjqueryonclickappendslick.js
Ganesh Yadav
Ganesh Yadav

Reputation: 2675

Slick slider slickAdd added multiple

I have a layout which has a question with 4 options. Onclick any answer it adds a new slide and goes to that slide.

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

Using this code. if I click on previous button and change the answer one more extra slide gets added with same property.

Fiddle Demo

enter image description here

Upvotes: 1

Views: 4746

Answers (1)

RonyLoud
RonyLoud

Reputation: 2426

Check Fiddle

$(".slider").slick({
			infinite:false,
			draggable:false,
			useTransform: true,
			speed:900,
			cssEase: 'cubic-bezier(0.23, 1, 0.32, 1)',
			easing: 'ease',
			edgeFriction: 20,
			touchMove:false,
		});
$(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>';
	$('.slider').slickAdd(addhtml);
		
    }
    $(this).addClass('goal-selected').siblings('li').removeClass('goal-selected');
	movenext();
});
		
    
    function movenext()
    {
    setTimeout(function(){$('.slick-next').trigger('click');}, 500);
    }
    
    
    
.slider {
		  width: auto;
		  margin: 30px 50px 50px;
		}
		.slick-slide {
		  background: #3a8999;
		  color: white;
		  padding: 40px 0;
		  font-size: 30px;
		  font-family: "Arial", "Helvetica";
		  text-align: center;
		}

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

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

		.slick-slide:nth-child(odd) {
		  background: #e84a69;
		}
		*{
			box-sizing:border-box;
		}
		ul.goals{
			padding:0;
		}
		ul.goals li{
			list-style:none;
			float:left;
			width:50%;
			border:1px solid #fff;
			padding:20px;
			cursor:pointer;
		}
		.slick-slide{
			padding:0 30px 30px;
		}
		.qNav{
			margin-top:30px;
			padding:20px 40px;
		}
		.goal-selected{
			background:tomato;
		}
<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">
		<div class="goal_1">
			<div class="goals-setter">
				<h1>Question 1</h1>
				<ul class="goals">
					<li>Option 1</li>
					<li>Option 2</li>
					<li>Option 3</li>
					<li>Option 4</li>
				</ul>
			</div>
		</div>
	</section>

Upvotes: 1

Related Questions