Merge pull request #15 from elrouss/feat/section-roads-slider

feat: 1) добавить библиотеку Splide; 2) сделать слайдер в секции Roads

blocks/bicycles/bicycles.css

@@ -1,6 +1,6 @@
 .bicycles {
   margin: 0;
-  margin-top: 120px;
+  margin-top: 223px;
   margin-bottom: 121px;
   margin-left: calc(120/1440 * 100%);
   padding-top: 0;

blocks/roads/__container/roads__container.css

@@ -0,0 +1,10 @@
+.roads__container {
+  grid-area: slider;
+  padding-top: 83px;
+}
+
+@media screen and (max-width: 770px) {
+  .roads__container {
+    padding-top: 40px;
+  }
+}

blocks/roads/__paragraph/roads__paragraph.css

@@ -5,7 +5,8 @@
 
 @media screen and (max-width: 770px) {
   .roads__paragraph {
-    margin-top: 36px;
+    margin-top: 40px;
     max-width: 100%;
+    min-height: 90px;
   }
 }

blocks/roads/__photo/roads__photo.css

@@ -1,12 +1,13 @@
 .roads__photo {
-  max-width: 650px;
+  width: 650px;
   max-height: 400px;
+  height: 100%;
   object-fit: cover;
 }
 
 @media screen and (max-width: 770px) {
   .roads__photo {
-    max-width: calc(284px + (399.38 + 399.38 * .7) * (100vw - 320px) / 770);
-    width: 100%;
+    width: calc(284px + (400 + 400 * .7) * (100vw - 320px) / 770);
+    max-height: calc(175px + (225 + 225 * .7) * (100vw - 320px) / 770);
   }
 }

blocks/roads/__slide/roads__slide.css

@@ -0,0 +1,3 @@
+.roads__slide {
+  width: 650px;
+}

blocks/roads/__slider-arrow/roads__slider-arrow.css

@@ -9,25 +9,42 @@
   border-radius: 50%;
   border: none;
   cursor: pointer;
+  opacity: 1;
   transition: opacity .6s ease;
+  top: 110%;
 }
 
 .roads__slider-arrow:hover {
   opacity: .6;
 }
 
+.roads__slider-arrow:focus {
+  outline: none;
+}
+
 .roads__slider-arrow:nth-child(1) {
   background-image: url(../../../images/slider-arrow-left.svg);
+  left: 0;
 }
 
 .roads__slider-arrow:nth-child(2) {
   background-image: url(../../../images/slider-arrow-right.svg);
+  left: 70px;
 }
 
 @media screen and (max-width: 770px) {
   .roads__slider-arrow {
     width: calc(24px + (26 + 26 * .7) * (100vw - 320px) / 770);
     height: calc(24px + (26 + 26 * .7) * (100vw - 320px) / 770);
     background-size: 4.5px 10px;
+    top: calc(58px + (12 + 12 * .7) * (100vw - 320px) / 770);
+  }
+
+  .roads__slider-arrow:nth-child(1) {
+    left: calc(226px + (340 + 340 * .7) * (100vw - 320px) / 770);
+  }
+
+  .roads__slider-arrow:nth-child(2) {
+    left: calc(260px + (374 + 374 * .7) * (100vw - 320px) / 770);
   }
 }

blocks/roads/__vector/_visibility/roads__vector_visibility_is-visible.css

@@ -0,0 +1,3 @@
+.roads__vector_visibility_is-visible {
+  display: inline-block;
+}

blocks/roads/__vector/roads__vector.css

@@ -1,13 +1,14 @@
 .roads__vector {
+  display: none;
   max-width: 100px;
   position: absolute;
-  bottom: 20px;
+  bottom: 15px;
   left: 0;
 }
 
 @media screen and (max-width: 770px) {
   .roads__vector {
     max-width: calc(70px + (30 + 30 * .7) * (100vw - 320px) / 770);
-    bottom: 18px;
+    bottom: 14px;
   }
 }

blocks/roads/roads.css

@@ -1,27 +1,27 @@
 .roads {
-  margin-top: 123px;
+  padding-top: 73px;
   margin-bottom: 46px;
   max-width: 1320px;
   margin-left: calc(120/1440 * 100%);
   display: grid;
   grid-template-columns: 1fr;
   grid-template-areas:
-    'title'
-    'paragraph'
-    'slider'
-    'buttons';
+  'title'
+  'paragraph'
+  'slider';
+
 }
 
 @media screen and (max-width: 770px) {
   .roads {
+    padding-top: 0;
     margin-top: 80px;
     margin-left: calc(18/320 * 100%);
     margin-right: calc(18/320 * 100%);
     border-top: 1px solid #e3e3e3;
-    grid-template-columns: 1fr 1fr;
     grid-template-areas:
-      'title buttons'
-      'slider slider'
-      'paragraph paragraph';
+    'title'
+    'slider'
+    'paragraph';
   }
 }

index.html

@@ -5,9 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="distribution" content="global">
-  <meta name="description" content="Сайт рассказывает о разнообразии маршрутов для велотренировок,
-    различных типах велосипедов, полезных сервисах и приложениях для построения тренировочного плана.
-    Он реализован в качестве конкурсной работы студентов Яндекс.Практикума, обучающихся профессии веб-разработчика.">
+  <meta name="description"
+    content="Сайт рассказывает о разнообразии маршрутов для велотренировок, различных типах велосипедов, полезных сервисах и приложениях для построения тренировочного плана.">
   <meta name="author" content="Софья Пешехонова, Борис Зашляпин">
   <title>Велотренировки</title>
   <link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-touch-icon.png">
@@ -16,6 +15,7 @@
   <link rel="mask-icon" href="./images/favicon/safari-pinned-tab.svg" color="#5bbad5">
   <meta name="msapplication-TileColor" content="#da532c">
   <meta name="theme-color" content="#ffffff">
+  <link rel="stylesheet" href="./vendor/splidejs/dist/css/splide.min.css">
   <link rel="stylesheet" href="./pages/index.css">
 </head>
 
@@ -63,20 +63,34 @@ <h1 class="section-title">Шоссе, ТТ и&nbsp;Грэвел</h1>
       <div class="line"></div>
     </section>
 
-    <section class="roads" id="roadway" aria-label="Cлайдер с описанием велотренировок на различных местностях">
+    <section class="splide roads" id="roadway" aria-label="Cлайдер с описанием велотренировок на различных местностях"
+      role="group">
       <h2 class="section-title roads__title">Шоссе</h2>
       <p class="section-paragraph roads__paragraph">
         На шоссейном велосипеде можно ездить по асфальту на разных градиентах: будь то горы или равнины.
         Гонки проходят в командном пелотоне, но тренироваться можно и самостоятельно.
-      <ul class="roads__slider">
-        <li><img src="./images/highway.jpg" alt="Дорога в горах (серпантин)" class="roads__photo"></li>
-        <li><img src="./images/forest-path.jpg" alt="Дорога в лесу" class="roads__photo"></li>
-        <li><img src="./images/vector-highway.svg" alt="Иконка с изображением линии местности" class="roads__vector">
-        </li>
-      </ul>
-      <div class="roads__slider-arrows">
-        <button type="button" aria-label="Переключение слайдера влево" class="roads__slider-arrow"></button>
-        <button type="button" aria-label="Переключение слайдера вправо" class="roads__slider-arrow"></button>
+      </p>
+      <div class="splide__track roads__container">
+        <ul class="splide__list">
+          <li class="splide__slide roads__slide">
+            <img src="./images/highway.jpg" alt="Дорога в горах (серпантин)" class="roads__photo">
+            <img src="./images/vector-highway.svg" alt="Иконка с изображением линии местности" class="roads__vector">
+          </li>
+          <li class="splide__slide roads__slide">
+            <img src="./images/forest-path.jpg" alt="Дорога в лесу" class="roads__photo">
+            <img src="./images/vector-gravel.svg" alt="Иконка с изображением линии местности" class="roads__vector">
+          </li>
+          <li class="splide__slide roads__slide">
+            <img src="./images/TT.jpg" alt="Равнинный асфальт" class="roads__photo">
+            <img src="./images/vector-tt.svg" alt="Иконка с изображением линии местности" class="roads__vector">
+          </li>
+        </ul>
+      </div>
+      <div>
+        <div class="splide__arrows">
+          <button class="splide__arrow splide__arrow--prev roads__slider-arrow roads__slider-arrow-prev"></button>
+          <button class="splide__arrow splide__arrow--next roads__slider-arrow roads__slider-arrow-next"></button>
+        </div>
       </div>
     </section>
 
@@ -106,8 +120,8 @@ <h3 class="bicycles__gallery-image-caption" lang="en">Cervelo Caledonia-5</h3>
         <article class="bicycles__gallery-card">
           <a href="https://www.sigmasports.com/item/Cannondale/SystemSix-HiMOD-Ultegra-Di2-Disc-Road-Bike-2021/R82J"
             target="_blank">
-            <img src="./images/Cannondale-Systemsix-Himod.png" alt="Велосипед модели &laquo;Cannondale Systemsix Himod&raquo;"
-              class="bicycles__gallery-image">
+            <img src="./images/Cannondale-Systemsix-Himod.png"
+              alt="Велосипед модели &laquo;Cannondale Systemsix Himod&raquo;" class="bicycles__gallery-image">
           </a>
           <h3 class="bicycles__gallery-image-caption" lang="en">Cannondale Systemsix Himod</h3>
         </article>
@@ -122,7 +136,8 @@ <h3 class="bicycles__gallery-image-caption" lang="en">Trek Domane SL-7</h3>
       </div>
       <ul class="bicycles__gallery-pagination">
         <li>
-          <button type="button" class="bicycles__gallery-pagination-btn bicycles__gallery-pagination-btn_type_active"></button>
+          <button type="button"
+            class="bicycles__gallery-pagination-btn bicycles__gallery-pagination-btn_type_active"></button>
         </li>
         <li>
           <button type="button" class="bicycles__gallery-pagination-btn"></button>
@@ -148,6 +163,7 @@ <h2 class="workout__title">Тренировки</h2>
       <div class="line"></div>
     </section>
   </main>
+
   <footer class="footer">
     <h2 class="footer__title">Подпишитесь на рассылку &mdash;</h2>
     <form class="form">
@@ -157,6 +173,12 @@ <h2 class="footer__title">Подпишитесь на рассылку &mdash;</
     </form>
     <p class="footer__copyright" lang="en">&copy; Road Club 2021</p>
   </footer>
+
+  <script src="./vendor/splidejs/dist/js/splide.min.js"></script>
+  <script src="./scripts/utils/constants.js"></script>
+  <script src="./scripts/splide/sliders.js"></script>
+  <script src="./scripts/pages/index.js"></script>
+
 </body>
 
 </html>

pages/index.css

@@ -1,5 +1,6 @@
 @import url(../vendor/normalize.css);
 @import url(../vendor/fonts/fonts.css);
+@import url(../variables/variables.css);
 @import url(../blocks/page/page.css);
 
 @import url(../blocks/content/content.css);
@@ -34,13 +35,14 @@
 
 /* ROADS (WITH SLIDER) */
 @import url(../blocks/roads/roads.css);
+@import url(../blocks/roads/__container/roads__container.css);
 @import url(../blocks/roads/__title/roads__title.css);
 @import url(../blocks/roads/__paragraph/roads__paragraph.css);
-@import url(../blocks/roads/__slider/roads__slider.css);
+@import url(../blocks/roads/__slide/roads__slide.css);
 @import url(../blocks/roads/__slider-arrow/roads__slider-arrow.css);
-@import url(../blocks/roads/__slider-arrows/roads__slider-arrows.css);
 @import url(../blocks/roads/__photo/roads__photo.css);
 @import url(../blocks/roads/__vector/roads__vector.css);
+@import url(../blocks/roads/__vector/_visibility/roads__vector_visibility_is-visible.css);
 
 /* BICYCLES */
 @import url(../blocks/bicycles/bicycles.css);