Как применить swiperjs в собственном проекте?

@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;500;600;700;800;900&display=swap');


*,
*:before,
*:after{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}
a, p, h1, h2, h3, h4, h5, h6{
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    text-decoration: none;
    color: inherit;
}
html, body{
    background: linear-gradient(to right, #A1C4FD 0%, #C2E9FB 50%);
    height: 100%;
    color: #000;
    background-color: #E5E5E5;
    font-size: 14px;
    font-family: "Manrope", sans-serif;
    line-height: 1;
}
input, textarea{
    outline: none;
}

/* .main{
    max-width: 1380px;
    margin: 0 auto;
    display: grid;
} */

.container {
    max-width: 90.5rem;
    margin: 0 auto;
}

.wrapper {
    display: grid;

}

.header{
    padding: 2rem 70px;
    background-color: #fff;
    margin: 0 auto;
    width: 100%;
    
}
.header__container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
.header__link{
    font-size: 1.5rem;
    font-weight: 700;
    color: #0046FF;
}
.header__button {
    flex: 0 16rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.icon-menu {
    position: relative;
    flex: 0 0 1.9rem;
    height: 1.12rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    margin: 0px 0px 0px 20px;
}
.icon-menu::before,
.icon-menu::after {
    content:"";
    height: 2px;
    background-color: #000;
}
.icon-menu span {
    height: 2px;
    background-color: #000;
}
.header__login{
    background-color: #0046FF;
    color: #fff;
    line-height: 1.9rem;
    padding: 0.1rem 1.1rem;
    border-radius: 10px;
    text-transform: uppercase;
}

.search__container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 3.5rem;  
}

.search__bar{
    margin: 2rem0 0 2.5rem 0;
}
.search__input{
    width: 100%;
    border: 2px solid #80A7E0;
    background: #fff;
    border-radius: 0.9rem;
    padding: 0.6rem 0.9rem;
    
}





.hero {
    /* New */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 2em 0;
    

}

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .hero img {
      display: block;
      margin-top: 2rem;
      
  }

  hero .hero-text > * {
    margin-top: 1rem;
    
  }

  .hero-text {
    display: flex;
    height: 100%;
    max-width: inherit;
    flex-direction: column;
    align-items: center;
    justify-content:space-between;
  }

  .card__item-title {
    font-size: 3rem;
    font-weight: bold;
    font-family:'Maven Pro', serif;
    margin-top: 28px;
}

.card__item-text{
    max-width: 65%;
    font-size: 1.5rem;
    text-align: justify;
    letter-spacing: 3px;
    line-height: 30px;
    margin-top: -50px;  
}

  .hero .images {
    display: grid;
    gap: 1rem;
    margin-left: 134px;
    max-width: 100%;

  }
  
  .images > img {
    border-radius: 1rem;
    /* max-width: 100%; */
    min-width: 600px;
  }

  .images .secondary {
    display: grid;
    grid-template-columns: repeat(3, 29%);
    gap: 3rem;
  }

  .images .secondary img {
    height: 8rem;
    border-radius: 1rem;
  }


  .button-64 {
    align-items: center;
    /* background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB); */
    background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB);border-radius: 8px;
    color: #FFFFFF;
    display: flex;
    font-family: Phantomsans, sans-serif;
    font-size: 25px;
    font-weight: 700;
    justify-content: center;
    line-height: 1em;
    max-width: 100%;
    min-width: 140px;
    padding: 3px;
    margin-bottom: 21px;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    cursor: pointer;
  }
  
  .button-64:active,
  .button-64:hover {
    outline: 0;
  }
  
  .button-64 span {
    /* background-color: rgb(23, 215, 80); */
    background: rgba(32,227,221,1);
    background: -moz-linear-gradient(left, rgba(32,227,221,1) 0%, rgba(32,227,221,1) 1%, rgba(32,227,221,1) 6%, rgba(32,227,221,1) 7%, rgba(73,155,234,1) 100%);
      

    padding: 16px 44px;
    border-radius: 6px;
    width: 100%;
    height: 100%;
    transition: 300ms;
  }
  
  .button-64:hover span {
    background: none;
  }

@media (min-width: 768px) {
    .button-64 {
      font-size: 24px;
      min-width: 196px;
    }
  }

footer {
    /* max-width: 1380px; */
    height: 14.5rem;
    background-color: #fff;
    padding: 1.3rem 0;
    margin-top: 30px;   
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.footer__col {
    width: 25%;
    padding: 3rem 0 0 0;
}

.footer__col ul li:not(:last-child) {
    margin-bottom: 1.9rem;
}

/* .footer__col ul li a {
    font-size: 1rem;
    text-transform: capitalize;
    font-weight: 500;
    display: block;
    color: rgb(128, 127, 128);
    transition: all 0.5s ease;
} */

.footer__col ul li a {
    font-size: 12px;
    text-transform: capitalize;
    font-weight: 500;
    display: block;
    color: rgb(128, 127, 128);
    transition: all 0.5s ease;
}

.footer__col ul li a:hover {
    color: #0046FF;
    padding-left: 0.5rem;
}

.footer__col a img {
    width: 30px;
    height: 30px;
    margin: 0 0 0 50px;
    transition: all 0.5s ease;
}

/* 
/* .footer__col a img:hover {
    width: 35px;
    height: 35px;
    transition: all 0.5s ease;
    background-color: #0046FF;
    
} */ 


.footer__col a img:hover {
    transform: scale(1.5);
    transition: all 0.5s ease;  
}

.footer__social-links {
    display: flex;
    justify-content:space-between;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>V.0.1</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header class="header">
        <div class="header__container container">
            <a class="header__link" href="#">DBA</a>
            <div class="header__button">
                <a class="header__login" href="#">Log in</a>
                <a href="#menu" type="button" class="menu__icon icon-menu"><span></span></a>
            </div>
        </div>
    </header>



    <div class="search">
        <div class="search__container container wrapper">
            
            <div class="search__bar">
                <input class="search__input" type="text" placeholder="Find what you need...">
            </div>

        </div>
    </div>  

   


    <section class="hero">
        <div class="images container wrapper">
            <img src="https://cdn.pixabay.com/photo/2020/10/01/16/53/game-controller-5619105__340.jpg" alt="img">

        <div class="secondary">
            <img src="https://images.pexels.com/photos/3945657/pexels-photo-3945657.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="img" srcset="">
            <img src="https://images.pexels.com/photos/1298601/pexels-photo-1298601.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="img" srcset="">
            <img src="https://images.pexels.com/photos/21067/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="img" srcset="">  
        </div>    
        </div>

        <div class="hero-text">
            <h2 class="card__item-title">Joystick</h2>
            <p class="card__item-text">A joystick, sometimes called a flight stick, is an input device consisting of a stick that pivots on a base and reports its angle or direction to the device it is controlling. A joystick, also known as the control column, is the principal control device in the cockpit of many civilian and military aircraft. It often has supplementary switches to control various aspects of the aircraft's flight. </p>
            <button class="button-64" role="button"><span class="text">BUY NOW</span></button>
            
        </div>


    </section>

  
    <footer class="footer">
        <div class="row container">        
            <div class="footer__links footer__col footer__inst">
                <ul class="footer_links-list">
                    <li class="footer_links-items"><a href="#">Personal data policy</a></li>
                    <li class="footer_links-items"><a href="#">Terms of use</a></li>
                    <li class="footer_links-items"><a href="#">Rules</a></li>
                </ul>
            </div> 

            <div class="footer__links footer__col">    
                <ul class="footer__links-list">
                    <li class="footer_links-items"><a href="#">About us</a></li>
                    <li class="footer_links-items"><a href="#">Contact us</a></li>
                    <li class="footer_links-items"><a href="#">Careers</a></li>
                </ul>
            </div>


            <div class="footer__links footer__col footer__col-last">
                <div class="footer__social-links links">
                    <a href=""><img src="https://img.icons8.com/fluency/344/pinterest.png" alt="I"></a>
                    <a href=""><img src="https://img.icons8.com/plasticine/2x/instagram-new--v2.png" alt="T"></a>
                    <a href=""><img src="https://img.icons8.com/color/2x/twitter.png" alt="D"></a> 
                    <a href=""><img src="https://img.icons8.com/color/2x/facebook.png" alt="F"></a> 
                    <a href=""></a> 
                </div>
            </div>


        </div>    

    </footer>



  <!-- </div> -->
</body>
</html>