add slider

package.json

@@ -26,5 +26,8 @@
     "parcel-reporter-clean-dist": "^1.0.4",
     "posthtml-include": "^1.7.4"
   },
-  "browserslist": "> 0.5%, last 2 versions, not dead"
+  "browserslist": "> 0.5%, last 2 versions, not dead",
+  "jquery": "^3.6.0",
+  "modern-normalize": "^1.1.0",
+  "slick-carousel": "^1.8.1"
 }

src/index.html

@@ -40,5 +40,6 @@
     <script type="module" src="./js/ice-cream.js"></script>
     <script type="module" src="./js/schemes.js"></script>
     <script type="module" src="./js/header.js"></script>
+    <script type="module" src="./js/slick.js"></script>
   </body>
 </html>

src/js/slick.js

@@ -0,0 +1,14 @@
+// import $ from 'jquery';
+// import 'slick-carousel';
+
+$('.carousel').slick({
+  dots: true,
+  arrows: false,
+  speed: 1000,
+  easing: 'ease',
+  autoplay: true,
+  autoplaySpeed: 5000,
+  pauseOnFocus: true,
+  pauseOnHover: true,
+  pauseOnDotsHover: true,
+});

src/partials/header.html

@@ -2,7 +2,7 @@
 <header class="header" id="header">
   <div class="container">
     <div class="header-wrapper">
-      <a href="/" aria-label="site logo">
+      <a href="./index.html" aria-label="site logo">
         <svg class="logo" width="199" height="50">
           <use href="./images/icons-sprite.svg#icon-logo"></use>
         </svg>

src/partials/reviews.html

@@ -2,77 +2,138 @@
 <section class="reviews">
   <div class="container">
     <h2 class="section__title visual-hidden">Reviews</h2>
-    <ul class="reviews__slider">
-      <li class="reviews-slider__item">
+    <ul class="carousel reviews__slider">
+      <li class="carousel__item reviews-slider__item">
         <article class="reviews__clients">
-          <img
-            class="reviews__img"
-            src="./images/reviews/userpic1.jpg"
-            alt="Client's photo"
-          />
+          <picture>
+            <source
+              srcset="
+                ./images/reviews/user1-1x.jpg 1x,
+                ./images/reviews/user1-2x.jpg 2x
+              "
+              media="(min-width: 1200px)"
+            />
+            <source
+              srcset="
+                ./images/reviews/user1-1x.jpg 1x,
+                ./images/reviews/user1-2x.jpg 2x
+              "
+              media="(min-width: 768px)"
+            />
+            <source
+              srcset="
+                ./images/reviews/user1-1x.jpg 1x,
+                ./images/reviews/user1-2x.jpg 2x
+              "
+              media="(min-width: 320px)"
+            />
+            <img
+              class="reviews__img"
+              src="./images/reviews/user1-1x.jpg"
+              alt="Client's photo"
+            />
+          </picture>
+
           <div class="reviews__bg">
             <div class="reviews__bg-line">
               <p class="reviews__text">
-                Nullam viverra consectetuer. Quisque cursus et, porttitor risus.
-                Aliquam sem. In hendrerit nulla quam nunc, accumsan congue.
-                Lorem ipsum primis in nibh vel risus.
+                The best ice coffee here. This is a refreshing and very tasty
+                drink for coffee lovers in the summer, which also invigorates.
+                Especially, when it's made with passion.
               </p>
             </div>
           </div>
-          <p class="reviews__name">Emily, Los Angeles</p>
+          <p class="reviews__name">Yuliya Khovrych, New York</p>
         </article>
       </li>
 
-      <li class="reviews-slider__item visual-hidden">
+      <li class="carousel__item reviews-slider__item">
         <article class="reviews__clients">
-          <img
-            class="reviews__img"
-            src="./images/reviews/userpic1.jpg"
-            alt="Client's photo"
-          />
+          <picture>
+            <source
+              srcset="
+                ./images/reviews/user2-1x.jpg 1x,
+                ./images/reviews/user2-2x.jpg 2x
+              "
+              media="(min-width: 1200px)"
+            />
+            <source
+              srcset="
+                ./images/reviews/user2-1x.jpg 1x,
+                ./images/reviews/user2-2x.jpg 2x
+              "
+              media="(min-width: 768px)"
+            />
+            <source
+              srcset="
+                ./images/reviews/user2-1x.jpg 1x,
+                ./images/reviews/user2-2x.jpg 2x
+              "
+              media="(min-width: 320px)"
+            />
+            <img
+              class="reviews__img"
+              src="./images/reviews/user2-1x.jpg"
+              alt="Client's photo"
+            />
+          </picture>
+
           <div class="reviews__bg">
             <div class="reviews__bg-line">
               <p class="reviews__text">
-                Nullam viverra consectetuer. Quisque cursus et, porttitor risus.
-                Aliquam sem. In hendrerit nulla quam nunc, accumsan congue.
-                Lorem ipsum primis in nibh vel risus.
+                Great cafe with a good selection of quality ice cream. Any can
+                be taken and given to children, because it is made from natural
+                products and no chemicals. We go here often with my son.
               </p>
             </div>
           </div>
-          <p class="reviews__name">Emily, Los Angeles</p>
+          <p class="reviews__name">Andrew Burlachenko, Chicago</p>
         </article>
       </li>
 
-      <li class="reviews-slider__item visual-hidden">
+      <li class="carousel__item reviews-slider__item">
         <article class="reviews__clients">
-          <img
-            class="reviews__img"
-            src="./images/reviews/userpic1.jpg"
-            alt="Client's photo"
-          />
+          <picture>
+            <source
+              srcset="
+                ./images/reviews/user3-1x.jpg 1x,
+                ./images/reviews/user3-2x.jpg 2x
+              "
+              media="(min-width: 1200px)"
+            />
+            <source
+              srcset="
+                ./images/reviews/user3-1x.jpg 1x,
+                ./images/reviews/user3-2x.jpg 2x
+              "
+              media="(min-width: 768px)"
+            />
+            <source
+              srcset="
+                ./images/reviews/user3-1x.jpg 1x,
+                ./images/reviews/user3-2x.jpg 2x
+              "
+              media="(min-width: 320px)"
+            />
+            <img
+              class="reviews__img"
+              src="./images/reviews/user3-1x.jpg"
+              alt="Client's photo"
+            />
+          </picture>
           <div class="reviews__bg">
             <div class="reviews__bg-line">
               <p class="reviews__text">
-                Nullam viverra consectetuer. Quisque cursus et, porttitor risus.
-                Aliquam sem. In hendrerit nulla quam nunc, accumsan congue.
-                Lorem ipsum primis in nibh vel risus.
+                In this cafe you can order a milkshake with any taste. It's
+                great that it is made with the addition of fresh fruits and
+                berries. I am sure even those who do not like dairy products
+                will like it.
               </p>
             </div>
           </div>
-          <p class="reviews__name">Emily, Los Angeles</p>
+          <p class="reviews__name">Daria Zakharova, Los Angeles</p>
         </article>
       </li>
     </ul>
-    <ul class="reviews__nav-list">
-      <li class="reviews__nav-item">
-        <button class="reviews_btn">
-          <!-- <svg class="about__icon" width="12px" height="12px">
-            <use href="../src/images/icons-sprite.svg#icon-house"></use>
-          </svg> -->
-        </button>
-      </li>
-      <li class="reviews__nav-item"><button class="reviews_btn"></button></li>
-      <li class="reviews__nav-item"><button class="reviews_btn"></button></li>
-    </ul>
   </div>
 </section>