How to make a second slider?

Question

css

How to make a second slider with thumbnails on the page? I use
Thumbs Gallery With Two-way Control
idangero.us/swiper/demos/#.WcIqADMY5TY
For simplicity, I took out the code in jsfiddle.
I tried to add 2 at the end and copy css and js with new names in the classes - it does not help.
The slider author page only lists the placement of the 2nd normal slider, not the thumbnail slider.
This is how the author invokes the second and third regular carousels

<!-- Initialize Swiper -->
    <script>
    var swiper1 = new Swiper('.swiper1', {
        pagination: '.swiper-pagination1',
        paginationClickable: true,
        spaceBetween: 30,
    });
    var swiper2 = new Swiper('.swiper2', {
        pagination: '.swiper-pagination2',
        paginationClickable: true,
        spaceBetween: 30,
    });
    var swiper3 = new Swiper('.swiper3', {
        pagination: '.swiper-pagination3',
        paginationClickable: true,
        spaceBetween: 30,
    });
    </script>

Answer 1

https://jsfiddle.net/7fjSc/9/ and similar to CSS wave search

Answer 2

pseudo with picture

Answer 3

css

html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #fff;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container2,
    .swiper-container {
        width: 40%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
    }
    .swiper-slide2,
  .swiper-slide {
        background-size: cover;
        background-position: center;
    }
    .gallery-top2,
    .gallery-top {
        height: 40%;
        width: 50%;
    }
    .gallery-thumbs2,
    .gallery-thumbs {
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
    }
    .gallery-thumbs2 .swiper-slide,
    .gallery-thumbs .swiper-slide {
        height: 100%;
        opacity: 0.4;
    }
    .gallery-thumbs2 .swiper-slide-active,
    .gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }

js

var galleryTop = new Swiper('.gallery-top', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 10,
        loop:true,
        loopedSlides: 5, //looped slides should be the same     
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        slidesPerView: 4,
        touchRatio: 0.2,
        loop:true,
        loopedSlides: 5, //looped slides should be the same
        slideToClickedSlide: true
    });
 var galleryTop2 = new Swiper('.gallery-top2', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 10,
        loop:true,
        loopedSlides: 5, //looped slides should be the same     
    });
    var galleryThumbs2 = new Swiper('.gallery-thumbs2', {
        spaceBetween: 10,
        slidesPerView: 4,
        touchRatio: 0.2,
        loop:true,
        loopedSlides: 5, //looped slides should be the same
        slideToClickedSlide: true
    });   
    
    galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;
    galleryTop2.params.control = galleryThumbs2;
    galleryThumbs2.params.control = galleryTop2;

give yourself an example

Answer 4

Try adding a second slider via<iframe>