Question

我在一组图像上使用了光滑的灯箱。 https://github.com/mreq/slick-lightbox

我目前正在一家阿拉伯语网站上工作，这就是为什么我希望该轮播在从右到左的方向上工作。当我将dir =“ html”属性放在html标签中时，它会破坏轮播。只能在光滑灯箱的父级上使用rtl标签。

Codepen：https://codepen.io/shivanit2/pen/jQBrwB

HTML标记

    <html dir="rtl">
  <body>
      <div class="content">
        <h1 class="content-title">Gallery</h1>

        <div class="gallery js-gallery">
          <div class="gallery-item">
            <div class="gallery-img-holder js-gallery-popup">
              <img src="https://picsum.photos/600/500" alt="" class="gallery-img">
            </div>
          </div>
          <div class="gallery-item">
            <div class="gallery-img-holder js-gallery-popup">
              <img src="https://picsum.photos/700/500" alt="" class="gallery-img">
            </div>
          </div>
          <div class="gallery-item">
            <div class="gallery-img-holder js-gallery-popup">
              <img src="https://picsum.photos/800/500" alt="" class="gallery-img">
            </div>
          </div>
        </div>
      </div>
  </body>
</html>

JS

  $('.js-gallery').slickLightbox({
    src: 'src',
    itemSelector: '.js-gallery-popup img',
    background: 'rgba(0, 0, 0, .7)'
  });

我可以做些什么修改才能使插件支持RTL？

光滑的灯箱在RTL方向上不起作用

0 个答案: