Проблемы с внедрением GlideJS - PullRequest
0 голосов
/ 05 августа 2020

Моя проблема

Итак, я слежу за учебным пособием по созданию одностраничного веб-сайта, и у меня есть раздел отзывов, где у меня есть этот предыдущий слайд и следующий -горка. Страница выглядит нормально, пока я не добавлю часть Glider JS. Стрелка вправо исчезает, когда я добавляю код, и появляется странная строка.

HTML Код

      <section class="about-section">
        <h2>About Us</h2>
        <div class="section-content">
          <div class="about-description">
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga, dolorem? 
              Soluta aperiam maxime nam ducimus ab fuga. 
              Libero, consequatur placeat! Explicabo aut labore enim? 
              Tenetur, esse a. Quidem, deleniti provident.
            </p>

            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. 
              Autem odio, ut ullam animi placeat natus magnam sapiente eius unde asperiores ducimus non quam eligendi, 
              nihil dolores aliquid suscipit ipsum similique.
            </p>
          </div>

          <img src="images/circle_picture.png" alt="">
        </div>
      </section>

      <!-- End of About Us Section -->

      <section class="project-session">
        <h2>Our Projects</h2>

        <div class="projects-gallery">
          <img src="images/picture (0).png" alt="">
          <img src="images/picture (1).png" alt="">
          <img src="images/picture (2).png" alt="">
          <img src="images/picture (3).png" alt="">
          <img src="images/picture (4).png" alt="">
          <img src="images/picture (5).png" alt="">
        </div>

        <a href="#" class="btn blue">View All</a>

      </section>

      <!-- End of Projects Section -->
    </div>

    <section class="testimonials-section">
      <div class="wrapper">
        <h2>Testimonials</h2>

        <div class="testimonials container">
          <div class="testimonials">
            <div class="testimonial">
              <div class="slide-container">
                <div class="content">
                  <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                    Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga. 
                    Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a. 
                    Quidem, deleniti provident.
                  </p>
                  <div class="name">
                    <strong>Darlene Richards,</strong> Amazon
                  </div>
                </div>

                <img src="images/testimonial1.png" alt="">
              </div>
            </div>

            <div class="testimonial">
              <div class="slide-container">
                <div class="content">
                  <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                    Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga. 
                    Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a. 
                    Quidem, deleniti provident.
                  </p>
                  <div class="name">
                    <strong>Peter Williams,</strong> Louis Vuitton
                  </div>
                </div>

                <img src="images/testimonial3.png" alt="">
              </div>
            </div>

            <div class="testimonial">
              <div class="slide-container">
                <div class="content">
                  <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                    Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga. 
                    Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a. 
                    Quidem, deleniti provident.
                  </p>
                  <div class="name">
                    <strong>Tara Green,</strong> Ferrari
                  </div>
                </div>

                <img src="images/testimonial2.png" alt="">
              </div>
            </div>
          </div>

          <span class="slider-prev">
            <img src="images/left-arrow.svg" alt="">
          </span>

          <span class="slider-next">
            <img src="images/right-arrow.svg" alt="">
          </span>
        </div>
      </div>
    </section>

    <script src="glider.min.js"></script>

    <script>
      new Glider(document.querySelector(".testimonials"), {
        slidesToShow: 1,
        arrows: {
          prev: '.slider-prev',
          next: '.slider-next',
        },
      });
    </script>

CSS Код

.slide-container {
    display: flex;
    justify-content: space-between;
    width: 800px;
    margin: 0 auto;
}

.slide-container .content {
    padding: 8px 24px;
}

.testimonial .name {
    background: var(--dark-color);
    color: var(--light-color);
    padding: 8px 24px;
    display: inline-block;
    margin-left: 16px;
}

.testimonials {
    position: relative;
}

.slider-prev,
.slider-next {
    position: absolute;
    top: 68px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    cursor: pointer;
}

.slider-next {
    right: 0;
}

Result of adding the code

Перед добавлением планера js

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...