Código Final da aula

nlw.zip

Corrigindo o bug da lib Swiper

A paginação não aparece como a do vídeo

Depois da gravação desta aula, a lib Swiper foi atualizada e isso está causando um bug que faz com que a paginação dos slides não fique no posicionamento correto. Mas você não precisa se preocupar, esse é um problema bem simples de corrigir. Veja:

De acordo com a documentação do Swiper (https://swiperjs.com/get-started#add-swiper-html-layout), foi adicionado uma classe swiper onde, transferindo para o código do OriginSix, está a classe container. Logo, para corrigir o erro e não quebrar o CSS do projeto, basta adicionar a classe swiper ao lado da classe container.

Abaixo você pode conferir como deve ficar o código da section #testimonials:

<!-- TESTIMONIALS -->
      <section class="section" id="testimonials">
        <div class="container swiper"> <!-- Adicionar aqui a classe swiper -->
          <header>
            <h2 class="title">Depoimentos de quem já passou por aqui</h2>
          </header>
          <div class="testimonials swiper-container">
            <div class="swiper-wrapper">
              <div class="testimonial swiper-slide">
                <blockquote>
                  <p>
                    <span>&ldquo;</span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Rerum blanditiis saepe nam excepturi explicabo ipsa error
                    ipsam neque
                  </p>
                  <cite>
                    <img
                      src="assets/fotos/10.jpeg"
                      alt="Foto de Wanessa Souza"
                    />
                    Wanessa Souza
                  </cite>
                </blockquote>
              </div>

              <div class="testimonial swiper-slide">
                <blockquote>
                  <p>
                    <span>&ldquo;</span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Rerum blanditiis saepe nam excepturi explicabo ipsa error
                    ipsam neque
                  </p>
                  <cite>
                    <img
                      src="assets/fotos/56.jpeg"
                      alt="Foto de Franciele Venega"
                    />
                    Franciele Venega
                  </cite>
                </blockquote>
              </div>

              <div class="testimonial swiper-slide">
                <blockquote>
                  <p>
                    <span>&ldquo;</span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Rerum blanditiis saepe nam excepturi explicabo ipsa error
                    ipsam neque
                  </p>
                  <cite>
                    <img
                      src="assets/fotos/26.jpeg"
                      alt="Fotos de Valeska Fabris"
                    />
                    Valeska Fabris
                  </cite>
                </blockquote>
              </div>
            </div>

            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
          </div>
        </div>
      </section>

Obs: Atualizamos o zip que está disponível nesta página para que você possa comparar o seu código com o código atualizado do projeto.