How to make Javascript work when using Swiper or Glide?

Question

I am trying to make kind of a personal website, I would like to put there a slider with some projects I did. I have next to no experience with Javascript. HTML and CSS works fine, however when I try to move things around with JS, whole slider part just disappears. I tried Swiper js, and Glide js both. Same problem. I went over the HTML and CSS many times and the structure seems right.

Im putting the code here, but at this point it was changed so many times there might be a lot of errors. It is currently set to use Glide.js (dont look for Swiper adjustments). I figured the problem will be probably same in both cases, since it occured at the point of applying JS. Please, if someone can help me here, it would be great.

body {    
    height: 100vh;
    font-family: "Poiret One", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color:#ffede8;
    margin-left: 0;
    margin-right: 0;
    background-image: url(Hero4\ 01\ Artboard\ 1.svg);
    background-repeat: no-repeat;
  }
  * {
      margin:0px;
  }
  header {
      position: relative;
      width: 100%;
      background-color: rgba(0,0,0,.8);
  }
  nav.navbar {
      height: 0px;
  }
  ul.links {
      padding: 0px;
  }
  .navbar {
      width: 100%;
      height: 70px;
      display:flex !important;
      justify-content: center !important;
      align-items: center !important;
      justify-content: space-around !important;
      padding-top: 0px;
      position: fixed;
      z-index: +1;
  }
  .logo .links .toggle_btn {
      padding-bottom: 50px;
  }
  li {
      list-style: none;
  }
  a {
      text-decoration: none;
      color: #ffede8 ;
      font-size: 1.5rem;
  }
  a:hover {
      color:#f1efde;
  }
  
  .logo {
      font-size: 1.5rem;
      font-weight: bold;
      display: flex;
      color:#ffede8;
  }
  .letter {
      color:#ffede8;
      letter-spacing: 3.5px;
      text-shadow: 2px 1px 3px rgba(194, 182, 188, 0.8);
  }
  .logo:hover {
      text-shadow: 3px 3px 8px #d6c3bb;
  }
  .navbar .links {
      display: flex;
      gap: 8rem;
  }
  .dropdown_menu {
      position: absolute;
      right: 2rem;
      top: 70px;
      width: 300px;
      height: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(15px);
      border-radius: 10px;
      overflow: hidden;
      display: block;
      transition: height .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      margin-top: 1px;
  }
  .dropdown_menu.open {
      height: 220px;
      padding-top: 10px;
      padding-bottom: 10;
  }
  .dropdown_menu li {
      padding: 0.7rem;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .toggle_btn {
      color:#280f0a;
      font-size: 1.5rem;
      cursor:pointer;
      display: inline-block;
  }
  .navbar-brand {
      display: inline-block;
      justify-content: center;
      transition: scale 0.2 ease;
  } 
  .navbar-brand:hover {
   scale:1.2;
  }
  .navbar-brand:active {
      scale: 0.95;
  }
  .fakenav {
      position: fixed;
      height: 70px;
      width: 100%;
      margin: 0px;
      padding: 0px;
      background-color: rgba(0, 0, 0, 0.6);
      
  }
  
  #about,
  #projects,
  #hobbies,
  #contact {
      height: 700px;
  }
  .content {
      padding-top: 70px;
  }
  #about {
      margin-top: 550px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
  
   } 
  
  .photo {
      width: 30em;
      border-radius: 100%;
      margin: 50px 100px;
      border-right: 10px groove #8c837c;
      border-top: 10px groove #c9c1b6;
      border-bottom: 10px groove #c9c1b6;
      border-left: 10px groove #8c837c;
  }
  .bio {
      width: 15em;
      height: 100%;
      font-size: 1.5em;
      margin: 0px 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      line-height: 1.7em;
      color: #233220;
      
  }
  .hi {
      color: #8c837c;
      font-size: 1.2em;
  }

  .container {
    margin-top: 200px;
    padding: 0;
    box-sizing: border-box;
  }

  .glide {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
 }
 .glide_slides .glide-slide {
    list-style: none;
  }
 .glide_slides .glide-slide .card-link {
    width:400px;
    height: 45vh;
    display: block;
    background-color: rgba(238, 228, 237, 0.4);
    padding: 18px;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 10px 10px rgba(64, 51, 51, 0.2);
    border: 2px solid transparent;
    transition: 0.2 ease;
}
.glide_slides .glide-slide .card-link:hover {
    box-shadow: 0 20px 20px rgba(64, 51, 51, 0.2);
}
.glide_slides .card-link .card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
}

.glide_slides .card-link .badge {
    color: rgb(236, 224, 223);
    margin: 16px 0 18px;
    padding: 8px 16px;
    font-size: 1rem;
    background: #674f4f;
    width: fit-content;
    border-radius: 50px;
}
.glide_slides .card-link .card-title {
    font-size:1em;
    color: #674f4f;
}

.glide_slides .card-link .card-button {
    height: 35px;
    width: 35px;
    border-radius: 50%;
    color: #674f4f;
    margin: 10px 0 5px;
    border: 1px solid #674f4f;
    background: none;
    cursor: pointer;
    transform: rotate(-45deg);
    background-color: #f5e1e1;
    transition: 0.4 ease;
}
.glide_slides .card-link:hover .card-button {
    color: rgb(236, 224, 223);
    background: #674f4f;
}

  
  @media (min-width: 1441px) {
      .navbar {
      width: 100%; 
      }
      .dropdown_menu {
          display: none;
      }
      .toggle_btn {
          display: none;
      }
  }
  @media (min-width: 1280px) and (max-width: 1440px) {
      .navbar {
      width: 100%; 
      }
      .dropdown_menu {
          display: none;
      }
      .toggle_btn {
          display: none;
      }
  }
  @media (min-width: 1024px) and (max-width: 1279px) {
      .navbar {
      width: 100%; 
      }
      .dropdown_menu {
          display: none;
      }
      .toggle_btn {
          display: none;
      }
  }
  @media (min-width: 768px) and (max-width: 1023px) {
      .navbar {
      width: 100%; }
      .navbar .links {
          display: none;
      }
  }
  @media (min-width: 481px) and (max-width: 767px) {
      .navbar {
      width: 100%; }
      .navbar .links {
          display: none;
      }
  }
  
  @media (max-width: 480px) {
      .navbar {
      width: 100%; 
      }
      .navbar .links {
          display: none;
      }
  }

For Swiper I tried: Version 8 and 11, tried to put initialization code inside a DOMContentLoaded, checked errors in browser, tried to make just a swiper as a blank- this worked. For Glide, I just stopped and came here once I saw JS again destroyed everything.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--arrow symbol-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=arrow_forward" />
    
    <title>Document</title>
    
    <link rel="stylesheet" href="actual_styles_without_mental_slider.css">
    <link rel="stylesheet" href="css/glide.core.min.css"

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!--core css-->
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css">
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
    <header>
    <nav class="navbar"></nav>
    <div class="navbar">
        <div class="logo" <a href="logo"></a>
            <div class="letter">(s)</div>logo</a></div>
            <ul class="links">
                <li><a href="#about">About Me</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#hobbies">Hobbies</a></li>
                <li><a href="#contact">Contact Me</a></li>
            </ul>
            <div class="toggle_btn">
                <i class="fa fa-bars"></i>
            </div>
    </div>
    <div class="dropdown_menu">
        <li><a href="#about">About Me</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#hobbies">Hobbies</a></li>
        <li><a href="#contact">Contact Me</a></li>
    </div>
        </nav>
</header>
<body>
    <div class="fakenav"></div>
<div class="content">
<section id="about">
    <img class="photo"
         src="photo.jpg"
         alt="picture of Sara">
         <div class="bio">
         <h3> <div class="hi">Hello!</div>Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.Lorem ipsum.</h3>
        </div>
</section>

<section id="projects">
    <div class="container">
    <div class="glide">
        <div class="glide_track" data-glide-el="track">
            <ul class="glide_slides">
                <li class="glide-slide">
                 <a href="link" class="card-link">
                    <img src="pic1.jpg" alt="two bears on boats in sea" class="card-image">
                    <p class="badge">badge</p>
                    <h1 class="card-title"> Description.</h1>
                    <button class="card-button material-symbols-outlined">arrow_forward</button>
                 </a>
                </li>

                <li class="glide-slide">
                    <a href="link" class="card-link">
                       <img src="pic1.jpg" alt="two bears on boats in sea" class="card-image">
                       <p class="badge">badge</p>
                       <h1 class="card-title"> Description.</h1>
                       <button class="card-button material-symbols-outlined">arrow_forward</button>
                    </a>
                   </li>

                   <li class="glide-slide">
                    <a href="link" class="card-link">
                       <img src="pic1.jpg" alt="two bears on boats in sea" class="card-image">
                       <p class="badge">badge</p>
                       <h1 class="card-title"> Description.</h1>
                       <button class="card-button material-symbols-outlined">arrow_forward</button>
                    </a>
                   </li>

                   <li class="glide-slide">
                    <a href="link" class="card-link">
                       <img src="pic1.jpg" alt="two bears on boats in sea" class="card-image">
                       <p class="badge">badge</p>
                       <h1 class="card-title"> Description.</h1>
                       <button class="card-button material-symbols-outlined">arrow_forward</button>
                    </a>
                   </li>
                   <li class="glide-slide">
                    <a href="link" class="card-link">
                       <img src="pic1.jpg" alt="two bears on boats in sea" class="card-image">
                       <p class="badge">badge</p>
                       <h1 class="card-title"> Description.</h1>
                       <button class="card-button material-symbols-outlined">arrow_forward</button>
                    </a>
                   </li>
                   <li class="glide-slide">
                    <a href="link" class="card-link">
                       <img src="pic1.jpg" alt="two bears on boats in sea" class="card-image">
                       <p class="badge">badge</p>
                       <h1 class="card-title"> Description.</h1>
                       <button class="card-button material-symbols-outlined">arrow_forward</button>
                    </a>
                   </li>
                   <li class="glide-slide">
                    <a href="link" class="card-link">
                       <img src="pic1.jpg" alt="two bears on boats in sea" class="card-image">
                       <p class="badge">badge</p>
                       <h1 class="card-title"> Description.</h1>
                       <button class="card-button material-symbols-outlined">arrow_forward</button>
                    </a>
                   </li>
                
            </ul>
        </div>
       <div class="glide__arrows" data-glide-el="controls">
            <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><</button>
            <button class="glide__arrow glide__arrow--right" data-glide-dir=">">></button>
        </div>
    </div>
</div>
</section>

<section id="hobbies">
    <h1></h1>
</section>

<section id="contact">
    <h1>Contact Me</h1>
</section>
</div>
<script defer>
    const toggleBtn = document.querySelector('.toggle_btn')
    const toggleBtnIcon = document.querySelector('.toggle_btn i')
    const dropDownMenu = document.querySelector('.dropdown_menu')

    toggleBtn.onclick = function () {
        dropDownMenu.classList.toggle('open')
        const isOpen = dropDownMenu.classList.contains('open')

        toggleBtnIcon.classList = isOpen
        ? 'fa fa-close'
        : 'fa fa-bars'
    }
</script>
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script>
<script>
    new Glide('.glide').mount()
</script>
</body>
</html>