fixed problems with swipper

LiliaBilous · Jun 17, 2023 · acad0d3 · acad0d3
1 parent d3c6549
commit acad0d3
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 158 deletions.
diff --git a/css/style.css b/css/style.css
@@ -76,7 +76,7 @@ body{
     background-color: #fff;
 }
 
-/* ----------------- */
+
 .background {
     position: fixed;
     width: 100%;
@@ -111,7 +111,7 @@ body{
     object-fit: cover;
     filter: grayscale(1);
 }
-/* --------------- */
+
 .text {
     overflow: hidden;
     position: absolute;
@@ -153,7 +153,7 @@ body{
         max-width: 48vw;
     }
 }
-/* ---------- */
+
 
 .open-image {
     cursor: pointer;
@@ -162,4 +162,4 @@ body{
     transform: translate(-50%, 100%);
     opacity: 0;
 
-}
+}
diff --git a/index.html b/index.html
@@ -11,14 +11,14 @@
     <div class="wrapper">
       <main class="page">
         <div class="slider">
-          <div class="slider__wrapper slider-wrapper">
+          <div class="slider__wrapper swiper-wrapper">
             <div class="slider__slide slide swiper-slide">
               <div class="slide__body">
                 <div class="slide__image">
                   <img
-                    data-title="Coffe Beans"
+                    data-title="City View"
                     class="slide-picture"
-                    src="./img/beans2.jpg"
+                    src="./img/city3.jpg"
                     alt="Image"
                   />
                 </div>
@@ -28,21 +28,21 @@
               <div class="slide__body">
                 <div class="slide__image">
                   <img
-                    data-title="City View"
+                    data-title="Coffe cups"
                     class="slide-picture"
-                    src="./img/city3.jpg"
+                    src="./img/cups.jpg"
                     alt="Image"
                   />
                 </div>
               </div>
-            </div>
+            </div>          
             <div class="slider__slide slide swiper-slide">
               <div class="slide__body">
                 <div class="slide__image">
                   <img
-                    data-title="Coffe cups"
+                    data-title="Coffe Beans"
                     class="slide-picture"
-                    src="./img/cups.jpg"
+                    src="./img/beans2.jpg"
                     alt="Image"
                   />
                 </div>
@@ -52,7 +52,7 @@
               <div class="slide__body">
                 <div class="slide__image">
                   <img
-                    data-title="Coffe Cups"
+                    data-title="Coffe Cups2"
                     class="slide-picture"
                     src="./img/cups2.jpg"
                     alt="Image"
@@ -73,7 +73,7 @@
               </div>
             </div>
           </div>
-          <div class="slider__scrolbar"></div>
+          <div class="slider__scrollbar"></div>
         </div>
       </main>
     </div>