├── src
    ├── images
    │   ├── avatar1.jpg
    │   ├── avatar2.jpg
    │   └── avatar3.jpg
    ├── javascript
    │   └── script.js
    └── css
    │   └── styles.css
├── README.md
└── index.html


/src/images/avatar1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Larissakich/testimonials-carousel/HEAD/src/images/avatar1.jpg


--------------------------------------------------------------------------------
/src/images/avatar2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Larissakich/testimonials-carousel/HEAD/src/images/avatar2.jpg


--------------------------------------------------------------------------------
/src/images/avatar3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Larissakich/testimonials-carousel/HEAD/src/images/avatar3.jpg


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Carrossel de Avaliações com Swiper JS
 2 | 
 3 | Este projeto demonstra como criar um carrossel de avaliações utilizando a biblioteca Swiper JS com HTML, CSS e JavaScript. O carrossel é responsivo e permite exibir avaliações de forma interativa e visualmente atraente.
 4 | 
 5 | ## Visualize o Projeto
 6 | 
 7 | [Visualize aqui](https://larissakich.github.io/testimonials-carousel)
 8 | 
 9 | ## Funcionalidades
10 | 
11 | - Carrossel responsivo de avaliações com Swiper JS.
12 | - Opções de navegação e paginação personalizáveis.
13 | - Animações suaves entre os slides.
14 | 
15 | ## Autor
16 | 
17 | Larissa Kich - larissakich04@gmail.com
18 | 


--------------------------------------------------------------------------------
/src/javascript/script.js:
--------------------------------------------------------------------------------
 1 | var swiper = new Swiper(".swiper", {
 2 |     loop: true,
 3 |     grabCursor: true,
 4 |     navigation: {
 5 |         nextEl: ".swiper-button-next",
 6 |         prevEl: ".swiper-button-prev",
 7 |     },
 8 |     pagination: {
 9 |         el: ".swiper-pagination",
10 |         clickable: true
11 |     },
12 |     breakpoints: {
13 |         640: {
14 |             slidesPerView: 1,
15 |             spaceBetween: 18
16 |         },
17 |         768: {
18 |             slidesPerView: 2,
19 |             spaceBetween: 18
20 |         },
21 |         1188: {
22 |             slidesPerView: 3,
23 |             spaceBetween: 24
24 |         }
25 |     }
26 | });


--------------------------------------------------------------------------------
/src/css/styles.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  2 | 
  3 | * {
  4 |     font-family: 'Poppins', sans-serif;
  5 |     margin: 0;
  6 |     padding: 0;
  7 |     box-sizing: border-box;
  8 | }
  9 | 
 10 | #testimonials {
 11 |     min-height: 100vh;
 12 |     background-color: #f9fafb;
 13 |     display: flex;
 14 |     align-items: center;
 15 |     justify-content: center;
 16 |     flex-direction: column;
 17 |     gap: 60px;
 18 |     padding: 32px 8%;
 19 | }
 20 | 
 21 | #testimonials_header {
 22 |     text-align: center;
 23 | }
 24 | 
 25 | #testimonials_header h1 {
 26 |     font-size: 18px;
 27 |     font-weight: 600;
 28 |     color: #3758f9;    
 29 | }
 30 | 
 31 | #testimonials_header h2 {
 32 |     color: #111928;
 33 |     font-size: 40px;
 34 | }
 35 | 
 36 | #testimonials_header p {
 37 |     color: #637381;
 38 |     font-size: 16px;
 39 |     max-width: 485px;
 40 | }
 41 | 
 42 | .swiper {
 43 |     width: 100%;
 44 |     height: 329px;
 45 |     padding-bottom: 60px;
 46 | } 
 47 | 
 48 | .swiper-slide {
 49 |     background-color: #fff;
 50 |     display: flex;
 51 |     flex-direction: column;
 52 |     gap: 18px;
 53 |     justify-content: center;
 54 |     box-shadow: 0px 0px 20px 0px rgba(92, 115, 160, 0.07);
 55 |     padding: 34px;
 56 |     border-radius: 12px;
 57 | }
 58 | 
 59 | .testimonial-rate {
 60 |     display: flex;
 61 |     gap: 2px;
 62 | }
 63 | 
 64 | .testimonial-rate i {
 65 |     color: #f9b707;
 66 | }
 67 | 
 68 | .testimonial-quote {
 69 |     color: #637381;
 70 |     font-size: 16px;
 71 | }
 72 | 
 73 | .testimonial-author {
 74 |     display: flex;
 75 |     align-items: center;
 76 |     gap: 18px;
 77 | }
 78 | 
 79 | .author-avatar {
 80 |     width: 50px;
 81 |     height: 50px;
 82 |     border-radius: 100%;
 83 |     overflow: hidden;
 84 | }
 85 | 
 86 | .author-avatar img {
 87 |     width: 100%;
 88 |     height: 100%;
 89 |     object-fit: cover;
 90 | }
 91 | 
 92 | .author-info h3 {
 93 |     font-weight: 600;
 94 |     font-size: 14px;
 95 |     color: #111928;
 96 | }
 97 | 
 98 | .author-info p {
 99 |     font-size: 12px;
100 |     color: #8899a8;
101 | }
102 | 
103 | .swiper-button-prev,
104 | .swiper-button-next {
105 |     background-color: #fff;
106 |     width: 25px;
107 |     height: 25px;
108 |     color: #3758f9;
109 |     border: 1px solid #f9fafb;
110 |     border-radius: 100%;
111 |     box-shadow: 0px 0px 20px 0px rgba(92, 115, 160, 0.2);
112 | }
113 | 
114 | .swiper-button-prev::after {
115 |     content: '\f053';
116 |     font-family: 'Font Awesome 5 free';
117 |     font-weight: 900;
118 |     font-size: 14px;
119 | }
120 | 
121 | .swiper-button-next::after {
122 |     content: '\f054';
123 |     font-family: 'Font Awesome 5 free';
124 |     font-weight: 900;
125 |     font-size: 14px;
126 | }
127 | 
128 | .swiper-button-prev {
129 |     left: 3px;
130 | }
131 | 
132 | .swiper-button-next {
133 |     right: 3px;
134 | }
135 | 
136 | .swiper-pagination.active {
137 |     background-color: #3758f9;
138 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="pt-BR">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
  7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  8 |     <link rel="stylesheet" href="src/css/styles.css">
  9 |     <title>Avaliações</title>
 10 | </head>
 11 | <body>
 12 |     <main id="testimonials">
 13 |         <div id="testimonials_header">
 14 |             <h1>Avaliações</h1>
 15 |             <h2>
 16 |                 O que os clientes dizem
 17 |             </h2>
 18 |             <p>
 19 |                 Quer saber o que torna a nossa marca tão especial?
 20 |                 Confira o que nossos clientes têm a dizer!
 21 |             </p>
 22 |         </div>
 23 | 
 24 |         <div class="swiper">
 25 |             <div class="swiper-wrapper">
 26 |                 <div class="swiper-slide">
 27 |                     <div class="testimonial-rate">
 28 |                         <i class="fa-solid fa-star"></i>
 29 |                         <i class="fa-solid fa-star"></i>
 30 |                         <i class="fa-solid fa-star"></i>
 31 |                         <i class="fa-solid fa-star"></i>
 32 |                         <i class="fa-solid fa-star"></i>
 33 |                     </div>
 34 | 
 35 |                     <blockquote class="testimonial-quote">
 36 |                         "Experiência incrível! Desde o primeiro contato, fui muito bem atendido e recebi 
 37 | 						todas as informações de forma clara. Recomendo para todos!"
 38 |                     </blockquote>
 39 | 
 40 |                     <div class="testimonial-author">
 41 |                         <div class="author-avatar">
 42 |                             <img src="src/images/avatar1.jpg" alt="Imagem de uma pessoa">
 43 |                         </div>
 44 | 
 45 |                         <div class="author-info">
 46 |                             <h3>Fulano de Tal</h3>
 47 |                             <p>Cliente desde 2020</p>
 48 |                         </div>
 49 |                     </div>
 50 |                 </div>
 51 | 
 52 |                 <div class="swiper-slide">
 53 |                     <div class="testimonial-rate">
 54 |                         <i class="fa-solid fa-star"></i>
 55 |                         <i class="fa-solid fa-star"></i>
 56 |                         <i class="fa-solid fa-star"></i>
 57 |                         <i class="fa-solid fa-star"></i>
 58 |                         <i class="fa-solid fa-star"></i>
 59 |                     </div>
 60 | 
 61 |                     <blockquote class="testimonial-quote">
 62 |                         "Experiência incrível! Desde o primeiro contato, fui muito bem atendido e recebi 
 63 | 						todas as informações de forma clara. Recomendo para todos!"
 64 |                     </blockquote>
 65 | 
 66 |                     <div class="testimonial-author">
 67 |                         <div class="author-avatar">
 68 |                             <img src="src/images/avatar2.jpg" alt="Imagem de uma pessoa">
 69 |                         </div>
 70 | 
 71 |                         <div class="author-info">
 72 |                             <h3>Fulano de Tal</h3>
 73 |                             <p>Cliente desde 2020</p>
 74 |                         </div>
 75 |                     </div>
 76 |                 </div>
 77 | 
 78 |                 <div class="swiper-slide">
 79 |                     <div class="testimonial-rate">
 80 |                         <i class="fa-solid fa-star"></i>
 81 |                         <i class="fa-solid fa-star"></i>
 82 |                         <i class="fa-solid fa-star"></i>
 83 |                         <i class="fa-solid fa-star"></i>
 84 |                         <i class="fa-solid fa-star"></i>
 85 |                     </div>
 86 | 
 87 |                     <blockquote class="testimonial-quote">
 88 |                         "Experiência incrível! Desde o primeiro contato, fui muito bem atendido e recebi 
 89 | 						todas as informações de forma clara. Recomendo para todos!"
 90 |                     </blockquote>
 91 | 
 92 |                     <div class="testimonial-author">
 93 |                         <div class="author-avatar">
 94 |                             <img src="src/images/avatar3.jpg" alt="Imagem de uma pessoa">
 95 |                         </div>
 96 | 
 97 |                         <div class="author-info">
 98 |                             <h3>Fulano de Tal</h3>
 99 |                             <p>Cliente desde 2020</p>
100 |                         </div>
101 |                     </div>
102 |                 </div>
103 | 
104 |                 <div class="swiper-slide">
105 |                     <div class="testimonial-rate">
106 |                         <i class="fa-solid fa-star"></i>
107 |                         <i class="fa-solid fa-star"></i>
108 |                         <i class="fa-solid fa-star"></i>
109 |                         <i class="fa-solid fa-star"></i>
110 |                         <i class="fa-solid fa-star"></i>
111 |                     </div>
112 | 
113 |                     <blockquote class="testimonial-quote">
114 |                         "Experiência incrível! Desde o primeiro contato, fui muito bem atendido e recebi 
115 | 						todas as informações de forma clara. Recomendo para todos!"
116 |                     </blockquote>
117 | 
118 |                     <div class="testimonial-author">
119 |                         <div class="author-avatar">
120 |                             <img src="src/images/avatar1.jpg" alt="Imagem de uma pessoa">
121 |                         </div>
122 | 
123 |                         <div class="author-info">
124 |                             <h3>Fulano de Tal</h3>
125 |                             <p>Cliente desde 2020</p>
126 |                         </div>
127 |                     </div>
128 |                 </div>
129 |             </div>
130 |             <div class="swiper-pagination"></div>
131 |         
132 |             <div class="swiper-button-prev"></div>
133 |             <div class="swiper-button-next"></div>
134 |         </div>
135 |     </main>
136 | 
137 |     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
138 |     <script src="src/javascript/script.js"></script>
139 | </body>
140 | </html>


--------------------------------------------------------------------------------