CODEWITHSUNDEEP
javascripthtmlcssswiper.jsglidejs
kemist
kemist

Reputation: 11

JS part of glide.js does not work properly

Hello I am trying again with my question with better phrasing. To put simply, when I run the code without JS part of glide:

<script>
    new Glide('.glide').mount()
</script>

The slides of the slider are visible. However, once above mentioned is inserted the whole part named "Projects" -containing slides disappears. Here is HTML and CSS. Can someone please give me some insights into this problem? I had very similar problem using also Swiper.js.

HTML:

<!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:[email protected]&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/[email protected]/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>

CSS:

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;
      }
  }

Upvotes: 0

Views: 42

Answers (0)

Related Questions