<link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];400;500;600;700&display=swap" rel="stylesheet">

<div class="logo">
  <a href="https://codeorum.com/" class="codeorum"><img alt="codeorum" src="https://codeorum.com/images/codeorum-logo-dark.svg"></a>
  <a href="https://zovko.pro/" class="mirko-zovko"><img alt="mirko-zovko" src="https://codeorum.com/images/zovko-logo-dark.svg"></a>
</div>
<div class="container">
    <h1>How to use swiper js as your carousel slider. </h1>
  
  
  
  <!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
              <img alt=" "src="https://codeorum.com/images/article_images/900/20200726T133520_900.jpg">
        </div>
        <div class="swiper-slide">    <img alt=" "src="https://codeorum.com/images/article_images/900/20200726T133520_900.jpg"></div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
  
  
  
  
  
  
</div>

body{
    margin: 0;
    padding: 0;
    background: #FFC371;
background: linear-gradient(to right, #9cecfb, #65c7f7, #0052d4);
    font-family: 'Quicksand', sans-serif;
    color: #262626;
}
*{
    box-sizing: border-box;
}
.logo {
    position: relative;
    display: flex;
    margin:10px;
    flex-direction: row;
    z-index: 1000;
    
    a {
        display: block;
        height: 30px;
        width: auto;
        cursor: pointer;
        margin-right: 10px;
        img {
            height: 100%;
            width: auto;
        }
    }
  }

.container{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 10px 100px 10px;
    h1{
        text-align: center;
        margin-bottom: 30px;
        font-weight: 500;
    }
    h2{
        font-weight: 500;
    }
}

.swiper-container {
    width: 100%;
    height: 500px;
      border-radius: 10px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.15),0 10px 10px -5px rgba(0,0,0,.1)!important;
  .swiper-slide{
    width:100%;
    height:auto;
    img{
      width:100%;
      height:500px;
      object-fit:cover;
    }
  }
}

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
})