Карусель на JS ( карусель + миниатюры + видео)

css

.INS-slider {
  max-width: 600px;
}
.INS-slider .mainIMG {
  height: 400px;
}
.INS-slider .mainIMG > img {
  height: 100%;
  object-fit: cover;
}
.INS-slider .mainIMG > .miniIMG-iteam {
  height: 100%;
}
.INS-slider .mainIMG > .miniIMG-iteam > img {
  height: 100%;
}
.INS-slider .mainIMG > .miniIMG-iteam > iframe {
  width: 100%;
  height: 100%;
}
.INS-slider .miniIMG {
  display: flex;
  max-width: 100%;
  flex-wrap: wrap;
  height: 100px;
}
.INS-slider .miniIMG > div {
  max-height: 60px;
  max-width: 70px;
  margin: 5px 2px;
  z-index: 10;
  position: relative;
}
.INS-slider .miniIMG > div::before {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 20;
  content: "";
  background: transparent;
  top: 0;
  cursor: pointer;
}
.INS-slider .miniIMG > div > * {
  z-index: -1;
  cursor: pointer;
  height: 100%;
  object-fit: cover;
  max-width: 70px;
  border-radius: 4px;
  display: block;
}

html

 <div class="INS-slider">
                        <div class="mainIMG" id="INS-slider">
                            <img src="img/cS-1.jpg" />
                        </div>
                        <div class="miniIMG" id="miniIMG">
                            <div class="miniIMG-iteam">
                                <img src="img/cS-11.jpg" />
                            </div>
                            <div class="miniIMG-iteam">
                                <img src="img/cS-10.jpg" />
                            </div>
                            <div class="miniIMG-iteam">
                                <img src="img/cS-9.jpg" />
                            </div>
                            <div class="miniIMG-iteam">
                                <iframe src="https://www.youtube.com/embed/aggQIoq_XjE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                        </div><!-- miniIMG -->
                    </div>

js

 $(document).ready(function(){

            $('#miniIMG .miniIMG-iteam').on('click', function(){
                console.log('work');
                var clone = $(this).clone();
                $( "#INS-slider").html(clone);
            });
        });

scss

.INS-slider{
    max-width: 600px;
    .mainIMG{
        height: 400px;
        > img{
            height: 100%;
            object-fit: cover;
        }
        >.miniIMG-iteam{
            height: 100%;
            > img {
                height: 100%;
            }
            > iframe{
                width: 100%;
                height: 100%;
            }
        }
    }
    .miniIMG{
        display: flex;
        max-width: 100%;
        flex-wrap: wrap;
        height: 100px;
        > div {
                max-height: 60px;
                max-width: 70px;
                margin: 5px 2px;
                z-index: 10;
                position: relative;
                &::before{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    z-index: 20;
                    content: "";
                    background: transparent;
                    top: 0;
                    cursor: pointer;
                }
            > * {
                z-index: -1;
                cursor: pointer;
                height: 100%;
                object-fit: cover;
                max-width: 70px;
                border-radius: 4px;
                display: block;
            }
        }
    }
}