Widget:Carousel: Difference between revisions

Latest revision as of 21:27, October 28, 2023

<style>
 .mw-content-ltr ol.carousel-indicators { margin: revert !important; }
 .carousel {
      overflow-y: hidden;
      object-fit: cover;
      display: flex;
      align-items: center;
      max-height: 300px;
 }
</style>
<a class="carousel-control-prev" href="#" role="button" data-slide="prev">Previous</a>
<a class="carousel-control-next" href="#" role="button" data-slide="next">Next</a>

@@ Line 1: / Line 1: @@
+ <style>
-  <script>
+   .mw-content-ltr ol.carousel-indicators { margin: revert !important; }
-   $.ajaxSetup({ cache: true });
+   .carousel {
+       overflow-y: hidden;
-   $.when(
+       object-fit: cover;
-    mw.loader.getScript( 'https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js' )
+       display: flex;
-  )
+       align-items: center;
-  .then(
+       max-height: 300px;
+   }
-  $(".carousel").swipe({
+ </style>
+ <a class="carousel-control-prev" href="#<!--{$id}-->" role="button" data-slide="prev"><!--
-    swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
-      if (direction == 'left') $(this).carousel('next');
-      if (direction == 'right') $(this).carousel('prev');
-    },
-    allowPageScroll:"vertical"
-   });
-  );
-  </script>
-  <a class="carousel-control-prev" href="#<!--{$id}-->" role="button" data-slide="prev"><!--
 --><span class="carousel-control-prev-icon" aria-hidden="true"></span><!--
 --><span class="sr-only">Previous</span></a>
-  <a class="carousel-control-next" href="#<!--{$id}-->" role="button" data-slide="next"><!--
+ <a class="carousel-control-next" href="#<!--{$id}-->" role="button" data-slide="next"><!--
 --><span class="carousel-control-next-icon" aria-hidden="true"></span><!--
 --><span class="sr-only">Next</span></a>