Widget:Carousel: Difference between revisions

Revision as of 00:56, October 28, 2023

 <style>
  .carousel-indicators {
     bottom: 50px;
  }
 </style>
 <script>
 $.ajaxSetup({ cache: true });

 $.when(
   mw.loader.getScript( 'https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js' )
 )
 .then(

 $(".carousel").swipe({

   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="#" role="button" data-slide="prev">Previous</a>
 <a class="carousel-control-next" href="#" role="button" data-slide="next">Next</a>

@@ Line 1: / Line 1: @@
-   <a class="carousel-control-prev" href="#<!--{$id}-->" role="button" data-slide="prev">
+  <style>
-    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+   .carousel-indicators {
-    <span class="sr-only">Previous</span>
+      bottom: 50px;
-  </a>
+   }
-   <a class="carousel-control-next" href="#<!--{$id}-->" role="button" data-slide="next">
+  </style>
-    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+  <script>
-    <span class="sr-only">Next</span>
+  $.ajaxSetup({ cache: true });
-  </a>
+  $.when(
+    mw.loader.getScript( 'https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js' )
+  )
+  .then(
+  $(".carousel").swipe({
+    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"><!--
+--><span class="carousel-control-next-icon" aria-hidden="true"></span><!--
+--><span class="sr-only">Next</span></a>