how to add mutiple Swiper in the same page

i didn't know how to put 2 swipers in the same page they move together when i click on arrow this is the html code:

<div class="slide-container swiper">
<div class="slide-content">
    <div class="card-warpper swiper-wrapper">
       
      
        <div class="card swiper-slide">
            <div class="image-content">
                <span class="overlay"></span>
                <div class="card-image">
                    <img src="#" alt="image" class="card-img">
                </div>
            </div>
            <div class="card-content">
                <h2 class="name">Room1</h2>
                <p class="description">Room information is:</p>
                <button class="button">Details</button>
            </div>
        </div>
        <div class="card swiper-slide">
            <div class="image-content">
                <span class="overlay"></span>
                <div class="card-image">
                    <img src="#" alt="image" class="card-img">
                </div>
            </div>
            <div class="card-content">
                <h2 class="name">Room1</h2>
                <p class="description">Room information is:</p>
                <button class="button">Details</button>
            </div>
        </div>
    </div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>

var swiper = new Swiper(".slide-content", {
slidesPerView: 4,
spaceBetween: 30,
slidesPerGroup: 4,
loop: true,
loopFillGroupWithBlank: true,
pagination: {
  el: ".swiper-pagination",
  clickable: true,
},
navigation: {
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
},

}); how can i resolve this? i have tried to change classes but it does not work