Feature/issue 54

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+### 2.2.0 (September 19, 2021)
+
+- add className for image slider
+  - `.rsis-container`
+  - `.rsis-image`
+
 ### 2.1.2 (June 16, 2021)
 
 - add 'startIndex' props.

README.md

@@ -93,6 +93,25 @@ If You want to see more detail,<br>
 
 - [`example/app.tsx`](https://github.com/kimcoder/react-simple-image-slider/blob/master/example/App.tsx)<br>
 
+# Style customize
+
+- can customize by className with `!important`;
+
+```
+.your-app {
+  .rsis-container {
+    // do something
+  }
+}
+
+.your-app {
+  .rsis-image {
+    background-size: contain !important;
+  }
+}
+
+```
+
 # Development
 
 ### directory & source

example/App.tsx

@@ -13,6 +13,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import Select from '@material-ui/core/Select';
 import SimpleImageSlider from '../dist';
 import Input from '@material-ui/core/Input';
+import './app.scss';
 
 const IMAGES = [
   { url: 'images/1.jpg' },
@@ -100,7 +101,7 @@ const App: React.FC = () => {
   );
 
   return (
-    <div style={{ textAlign: 'center' }}>
+    <div style={{ textAlign: 'center' }} className="root">
       <CssBaseline />
       <AppBar style={{ position: 'relative', height: 140, textAlign: 'center' }}>
         <h1 style={{ marginBottom: 5 }}>React Simple Image Slider Example</h1>

example/app.scss

@@ -0,0 +1,5 @@
+.root {
+  .rsis-image {
+    background-size: cover !important;
+  }
+}