JSFiddle - React, Tailwind, and code Playground

by neowot

HTML

<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick-theme.css">
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/css/style.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
    <body>
        
        <section id="features" class="blue">
			<div class="content">		
				<hr id="demos"/>
				<h2>Add & Remove</h2>
				<div class="slider add-remove">
					<!--<div><h3>1</h3></div>-->
				</div>
                
                <div class="buttons">
					<a href="javascript:void(0)" class="button js-add-FirstClass-slide">Add FirstClass</a>
                    <a href="javascript:void(0)" class="button js-add-SecondClass-slide">Add SecondClass</a>
                    <br>
					<a href="javascript:void(0)" class="button ToggleFirstClass">Toggle FirstClass</a>
                    <a href="javascript:void(0)" class="button ToggleSecondClass">Toggle SecondClass</a>
				</div>
            </div>
        </section>

    </body>

CSS

.sliderX{
        cursor: pointer;
        position: relative;
        font-size: 20px;
        top:-40px;
        right:-50px;
        height: 20px;
        padding: 0 0 0 0;
        z-index:1;
    }


.videosetter{
    
}
.videowrapper {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    width:100%;
    height:100%;
}
.videowrapper iframe {
    position:relative;
    width:100%;
    height:100%;
}

.FirstClass{
    background:darkblue;
}

.SecondClass{
    background:green;
}
}

JavaScript

$(document).ready(function(){

        var slideId = 0;
        var slides = [];
        $('.add-remove').slick({
            slidesToShow: 3,
            slidesToScroll: 3
        });

        var target = '<div class="videowrapper"><iframe src="https://www.youtube.com/embed/7WgYmnwO-Pw" frameborder="0" allowfullscreen></iframe></div>';


        $('.js-add-FirstClass-slide').on('click', function() {        
            $('.add-remove').slick('slickAdd','<div class="FirstClass"  slide-id="' + slideId + '"><h3><a class="sliderX">X</a>' + target + '</h3></div>');
            slides.push(slideId);
            slideId++;
        });

        $('.js-add-SecondClass-slide').on('click', function() {
            $('.add-remove').slick('slickAdd','<div class="SecondClass" slide-id="' + slideId + '"><h3><a class="sliderX">X</a>' + target + '</h3></div>');
            slides.push(slideId);
            slideId++;
        });





        var filtered = false;

        $('.ToggleFirstClass').on('click', function() {
            if (filtered === false) {
                $('.add-remove').slick('slickFilter', $('.FirstClass')); 
                filtered = true;
            } else {
                $('.add-remove').slick('slickUnfilter');
                filtered = false;
            }
        });

        $('.ToggleSecondClass').on('click', function() {
            if (filtered === false) {
                $('.add-remove').slick('slickFilter','.SecondClass'); 
                filtered = true;
            } else {
                $('.add-remove').slick('slickUnfilter');
                filtered = false;
            }
        });

        $('body').on('click', '.sliderX', function() {
            var id = parseInt($(this).closest("div").attr("slide-id"), 0);
            var index = slides.indexOf(id);
            $('.add-remove').slick('slickRemove', index);
            slides.splice(index, 1);
        });



    });