I have a group of images on which I have used slick lightbox. https://github.com/mreq/slick-lightbox
I am currently working for an arabic site and that is why I want the carousel to work in Right-to-left direction.When I put the dir="html" attribute in the html tag,it breaks the carousel.It works with the rtl tag strictly on the parent of slick lightbox.
Codepen : https://codepen.io/shivanit2/pen/jQBrwB
HTML markup
<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)'
});
What modifications can I do to make the plugin to support RTL?
You can add the following style rule to reset the direction.