Widget:Carousel: Difference between revisions

From MoHA Wiki
No edit summary
No edit summary
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
  <style>
<style>
  .carousel-indicators {
  .mw-content-ltr ol.carousel-indicators { margin: revert !important; }
      bottom: 50px;
   .carousel {
  }
      overflow-y: hidden;
   </style>
      object-fit: cover;
  <script>
      display: flex;
  $.ajaxSetup({ cache: true });
      align-items: center;
 
      max-height: 300px;
  $.when(
   }
    mw.loader.getScript( 'https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js' )
</style>
  )
<a class="carousel-control-prev" href="#<!--{$id}-->" role="button" data-slide="prev"><!--
  .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="carousel-control-prev-icon" aria-hidden="true"></span><!--
--><span class="sr-only">Previous</span></a>
--><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="carousel-control-next-icon" aria-hidden="true"></span><!--
--><span class="sr-only">Next</span></a>
--><span class="sr-only">Next</span></a>

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>