Sliding stops working after opening bigger version of slider

I have a slider, and when I click on one of the images it contains, the bigger slider containing the same images is created and displayed, and all other elements are hidden.

But if I click exactly on the first image of the first slider, and slide a little bit through the bigger slider and then close the bigger slider, the smaller slider stops working: sliding doesn't work.

I noticed that if I disable autoplay property of the first slider, everything works just fine.

jsfiddle of the case when autoplay is enabled (not working): https://jsfiddle.net/seLn6c3w/

jsfiddle of the case when autoplay is disabled (working): https://jsfiddle.net/0dkqubc1/28/

I was prompted that the solution of the problem might be disabling autoplay property when small slider is hidden, and then enabling the property when the small slider becomes again visible.

So I tried to do what I was prompted, but this didn't help: https://jsfiddle.net/gjyx9hbp/1/

Maybe I need to disable autoplay in some other way? Maybe I'm doing something wrong?

HTML

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
"></script>
<body>

<div class="swiper-container" id="album_images_slider">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="https://pbs.twimg.com/media/DtQ5AhzX4AUGQeL.jpg:large" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://im0-tub-ru.yandex.net/i?id=e13d927c1ca5aeb6bafd4cc795b68dea&n=13" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://newyork.cbslocal.com/wp-content/uploads/sites/14578484/2012/06/83284744.jpg?w=1500" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://wallbox.ru/wallpapers/main/201301/cb5c7e68c1854dc.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="https://stihi.ru/pics/2019/11/13/5598.jpg" alt="">
                    </div>
                </div>
                <div class="swiper-navigation">
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
            </div>
            
</body>

CSS

.layer {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    min-height: 100vh;
    background: rgb(36, 36, 36);
    color: #fff;
}
#album_images_slider_scale {
    width: 1200px;
    height: auto;
    margin: 0 auto;
}
#album_images_slider_scale .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: rgb(55, 55, 55);
    color: #fff;
    border: none;
}
#album_images_slider_scale img {
    width: 100%;
    height: auto;
    margin: 0!important;
    border: none!important;
}
.album-title {
    color: var(--third-color);
    text-align: center;
    margin-top: 100px;
    margin-bottom: 20px;
}
.album-size {
    color: var(--second-color);
    text-align: center;
    margin-bottom: 100px;
}
#album_images_slider {
    width: 600px;
    height: auto;
    margin: 0 auto;
}
#album_images_slider .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    color: var(--third-color)!important;
    text-decoration: none!important;
    padding: 50px;
    background: #fff;
}
.swiper-slide:hover {
    text-decoration: none!important;
}
#album_images_slider img {
    width: 100%;
    height: auto;
}
#albums_slider .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border: 1px solid #ccc;
    color: var(--third-color)!important;
    text-decoration: none!important;
}

#albums_slider .swiper-slide:hover {
    text-decoration: none!important;
}

#albums_slider .swiper-slide .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    padding: 15px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    font-size: 22px;
}

#albums_slider .swiper-slide .description {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    padding: 5px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    font-size: 18px;
}

#albums_slider .swiper-slide .price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    padding: 15px;
    text-align: center;
    font-size: 20px;
}

#albums_slider .swiper-slide img {
    width: 100%;
    height: auto;
}
.cost {
    width: 90%;
    text-align: center;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
    color: var(--second-color);
}
hr {
    width: 100%;
    border-top: 8px solid var(--third-color);
    margin-bottom: 100px;
}
.info {
    width: 90%;
    margin: 0 auto 100px;
}
.info h1 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--second-color);
}
.info-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0;
}
.info-list-item {
    list-style: none;
    background: url("../icons/checkmark.svg") no-repeat;
    border-top: 1px solid #ccc;
    font-size: 20px;
    color: var(--second-color);
    padding: 5px;
}
.info-list-item:last-child {
    border-bottom: 1px solid #ccc;
}
.info-list-item span {
    margin-left: 30px;
}
.info-list-item::marker {
    margin-right: -30px;
}
#albums_slider {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 150px;
}
/* #albums_slider .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: flex-start;
        -ms-flex-align: flex-start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    color: var(--third-color);
}
#albums_slider .swiper-slide .title {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-top: 0;
    text-align: center;
    font-size: 22px;
}
#albums_slider .swiper-slide .description {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-top: 0;
    text-align: center;
    font-size: 18px;
}
#albums_slider .swiper-slide .price {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-top: 0;
    border-bottom: 0;
    text-align: center;
    font-size: 20px;
}
#albums_slider .image {
    border: none!important;
    padding: 0;
}
#albums_slider .swiper-slide img {
    width: 100%;
    height: auto;
} */
.swiper-button-next, .swiper-button-prev {
    outline: none;
    color: #000!important;
}
.other-albums {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 50px;
    color: var(--second-color);
}
footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 200px;
    width: 100%;
    background: var(--first-color);
    border-top: 4px solid var(--third-color);
}
.footer-brand {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 200px;
    height: 100%;
}
.footer-social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    height: 100%;
    margin-right: 50px;
    margin-left: auto;
    padding-bottom: 20px;
}
.footer-social .social-logo {
    margin-right: 15px;
}
#vk-logo:hover {
    fill: darkblue;
}
 
@media screen and (max-width: 1200px) {
    #album_images_slider_scale {
        width: 95%;
    }
}

@media screen and (max-width: 820px) {
    #album_images_slider {
        width: 500px;
    }
}
@media screen and (max-width: 520px) {
    #album_images_slider {
        width: 98%;
    }
}

JavaScript: see in different fiddle links