Swiper Update

Author: smashedr

screenshots.html

@@ -22,8 +22,14 @@
     <style>
         html,
         body {
+            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+            font-size: 14px;
+            margin: 0;
+            padding: 0;
             position: relative;
             height: 100%;
+            background: #111;
+            color: #111;
         }
         body {
             background: #343432;
@@ -35,36 +41,25 @@
         }
         .swiper {
             width: 100%;
-            height: 100%;
+            height: 300px;
+            margin-left: auto;
+            margin-right: auto;
         }
         .swiper-slide {
             text-align: center;
             font-size: 18px;
-            background: #343432;
             display: flex;
             justify-content: center;
             align-items: center;
+            background-size: cover;
+            background: #343432 center;
         }
         .swiper-slide img {
             display: block;
             max-width: 100%;
             max-height: 100%;
             object-fit: cover;
         }
-        body {
-            background: #111;
-            color: #111;
-        }
-        .swiper {
-            width: 100%;
-            height: 300px;
-            margin-left: auto;
-            margin-right: auto;
-        }
-        .swiper-slide {
-            background-size: cover;
-            background-position: center;
-        }
         .mySwiper2 {
             height: 80%;
             width: 100%;
@@ -149,18 +144,24 @@
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
+
 <script>
     var swiper = new Swiper(".mySwiper", {
-        spaceBetween: 10,
-        slidesPerView: 5,
         freeMode: true,
+        grabCursor: true,
+        loop: true,
+        mousewheel: true,
+        slidesPerView: 5,
+        spaceBetween: 10,
         watchSlidesProgress: true,
     });
     var swiper2 = new Swiper(".mySwiper2", {
-        spaceBetween: 10,
-        mousewheel: true,
         grabCursor: true,
+        effect: 'fade',
         loop: true,
+        mousewheel: true,
+        spaceBetween: 10,
+        zoom: true,
         keyboard: {
             enabled: true,
         },