¿Es posible hacer un control deslizante como este https://jsfiddle.net/redcats/84h3nm9w/ , pero dentro de otro? porque tengo un problema al agregarlo dentro de mi código (comportamiento anómalo: las diapositivas se estiran, desaparecen, aparecen y se deforman cuando se cambian). Estoy usando swiperjs, pero mb alguien sabe cómo agregar un control deslizante como este en mi código sin usar la biblioteca o con otra.

 <style> html, body { position: relative; height: 100%; } body { background: #eee; margin: 0; padding: 0; } .swiper { width: 100%; height: 100%; background: rgb(rgb(149, 149, 150)); } .swiper-slide { font-size: 18px; color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 40px 60px; } .bg { position: absolute; width: 405%; height: 105vh; top: -3vh; left: -3vh; -webkit-background-size: cover; background-size: cover; background-position: center; } li { list-style-type: none; /* Removing markers */ } </style> <!-- Slider main container --> <div class="swiper"> <div class="bg"> <video autoplay muted loop> <source src="./assets/videos/0181-0238.mp4" type="video/mp4"> </video> </div> <div class="swiper-wrapper"> <!-- MAIN --> <div class="swiper-slide"> <div class="buttons" id="btns_main"> <button class="page1">Portfolio</button> <button class="page2">About me</button> <button class="page3">Contacts</button> </div> </div> <!-- PORTFOLIO --> <div class="swiper-slide"> <div class="buttons"> <button class="back" id="back">Back</button> </div> </div>