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>“</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>“</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>“</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.