Fix editor swiper's width (#931)

* Fix removing defined width on swiper's images (#836) * Fix disable swiper's auto resize (#836)
ocaml · Feb 20, 2023 · 9b0d5b3 · 9b0d5b3
1 parent 393a08e
commit 9b0d5b3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 16 deletions.
diff --git a/src/ocamlorg_frontend/css/styles.css b/src/ocamlorg_frontend/css/styles.css
@@ -78,10 +78,6 @@ body {
   width: 2px;
 }
 
-.mySwiper2 {
-  width: 793px;
-}
-
 .codebox {
   height: 462px;
 }

diff --git a/src/ocamlorg_frontend/pages/home.eml b/src/ocamlorg_frontend/pages/home.eml
@@ -168,18 +168,16 @@ Layout.render
           </div>
         </div>
         <div class="lg:flex-1 lg:mr-24 lg:mt-0 mt-10 flex justify-center">
-          <div class="xl:-ml-40">
-            <div style="--swiper-navigation-color: #fff;--swiper-pagination-color: #fff;" class="swiper mySwiper2">
-              <div class="swiper-wrapper">
-                <div class="swiper-slide">
-                  <img width="785" src="/img/home/vscode-preview.png" alt="An OCaml program being edited in VSCode">
-                </div>
-                <div class="swiper-slide">
-                  <img width="785" src="/img/home/vim-preview.png" alt="Writing an OCaml program using vim">
-                </div>
-                <div class="swiper-slide">
-                  <img width="785" src="/img/home/emac-preview.png" alt="Writing an OCaml program using emacs">
-                </div>
+          <div style="--swiper-navigation-color: #fff;--swiper-pagination-color: #fff;" class="swiper mySwiper2">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide">
+                <img src="/img/home/vscode-preview.png" alt="An OCaml program being edited in VSCode">
+              </div>
+              <div class="swiper-slide">
+                <img src="/img/home/vim-preview.png" alt="Writing an OCaml program using vim">
+              </div>
+              <div class="swiper-slide">
+                <img src="/img/home/emac-preview.png" alt="Writing an OCaml program using emacs">
               </div>
             </div>
           </div>
@@ -427,6 +425,7 @@ Layout.render
   var swiper2 = new Swiper(".mySwiper2", {
     loop: true,
     autoplay: { delay: 5000, disableOnInteraction: false, },
+    slidesPerView: 'auto',
     spaceBetween: 10,
     thumbs: {
       swiper: swiper,