fix: RTL support (#267)

* add RTL example

* add quickfix

makes the carousel functional, but just via overriding the direction

* internal rtl support

relying on a global attribute selector feels a bit hacky

* fix import

* simplify style

* include dot group in rtl example for demonstration purposes

* lint

Author: seleb

src/App/App.jsx

@@ -13,6 +13,7 @@ import {
   Example11,
   Example12,
   Example13,
+  Example14,
 } from './examples';
 import s from './style.scss';
 
@@ -247,6 +248,13 @@ class DevelopmentApp extends React.Component {
               </section>
               )}
 
+              {(value === '0' || value === '14') && (
+              <section id="example--14">
+                <hr />
+                <Example14 />
+              </section>
+              )}
+
             </div>
           </div>
         </div>

src/App/examples/Example14/Example14.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import
+{
+  ButtonBack,
+  ButtonFirst,
+  ButtonLast,
+  ButtonNext,
+  CarouselProvider,
+  Slide,
+  Slider,
+  ImageWithZoom,
+  DotGroup,
+} from '../../..';
+
+import s from '../../style.scss';
+
+export default () => (
+  <CarouselProvider
+    visibleSlides={2}
+    totalSlides={8}
+    step={1}
+    naturalSlideWidth={400}
+    naturalSlideHeight={500}
+  >
+    <h2 className={s.headline}>RTL</h2>
+    <p>
+      A carousel wrapped in an element with
+      {' '}
+      <code>dir=&quot;rtl&quot;</code>
+, demonstrating support for use with right-to-left languages.
+    </p>
+    <div dir="rtl">
+      <Slider className={s.slider}>
+        <Slide index={0}>
+          <ImageWithZoom src="./media/img01.jpeg" />
+        </Slide>
+        <Slide index={1}>
+          <ImageWithZoom src="./media/img02.jpeg" />
+        </Slide>
+        <Slide index={2}>
+          <ImageWithZoom src="./media/img03.jpeg" />
+        </Slide>
+        <Slide index={3}>
+          <ImageWithZoom src="./media/img04.jpeg" />
+        </Slide>
+        <Slide index={4}>
+          <ImageWithZoom src="./media/img05.jpeg" />
+        </Slide>
+        <Slide index={5}>
+          <ImageWithZoom src="./media/img06.jpeg" />
+        </Slide>
+        <Slide index={6}>
+          <ImageWithZoom src="./media/img07.jpeg" />
+        </Slide>
+        <Slide index={7}>
+          <ImageWithZoom src="./media/img08.jpeg" />
+        </Slide>
+      </Slider>
+      <ButtonFirst>First</ButtonFirst>
+      <ButtonBack>Back</ButtonBack>
+      <ButtonNext>Next</ButtonNext>
+      <ButtonLast>Last</ButtonLast>
+      <DotGroup dotNumbers />
+    </div>
+  </CarouselProvider>
+);

src/App/examples/Example14/index.js

@@ -0,0 +1,3 @@
+import Example14 from './Example14';
+
+export default Example14;

src/App/examples/index.js

@@ -11,3 +11,4 @@ export { default as Example10 } from './Example10';
 export { default as Example11 } from './Example11';
 export { default as Example12 } from './Example12';
 export { default as Example13 } from './Example13';
+export { default as Example14 } from './Example14';

src/Slide/Slide.scss

@@ -12,6 +12,11 @@
 
   &Horizontal {
     float: left;
+
+    [dir='rtl'] & {
+      direction: rtl;
+      transform: scaleX(-1);
+    }
   }
 
   &Inner {

src/Slider/Slider.scss

@@ -2,6 +2,11 @@
   position: relative;
   overflow: hidden;
 
+  [dir='rtl'] & {
+    direction: ltr;
+    transform: scaleX(-1);
+  }
+
   &Tray {
     overflow: hidden;
     width: 100%;