Example: Demo Integration of react-slick Carousel

.editorconfig

@@ -18,3 +18,6 @@ indent_size = 2
 
 [*.md]
 trim_trailing_whitespace = false
+
+[*.css]
+indent_size = 2

README.md

@@ -14,9 +14,9 @@ Features tinted guide lens, interaction hint, hover intent, long-press gesture,
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
 ## Demo
-[Responsive Example](https://ethanselzer.github.io/react-image-magnify/#/)
+[Basic Example](https://ethanselzer.github.io/react-image-magnify/#/)
 
-[In-Place Example](https://ethanselzer.github.io/react-image-magnify/#/in-place)
+[Integration with react-slick carousel](https://ethanselzer.github.io/react-image-magnify/#/react-slick)
 
 <img src="https://raw.githubusercontent.com/ethanselzer/react-image-magnify/master/images/qrcode.png" width="50" height="50" alt="demo"/>
 

example/package.json

@@ -10,8 +10,10 @@
   "dependencies": {
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "react-image-magnify": "2.3.1",
-    "react-router": "3.0.5"
+    "react-image-magnify": "2.3.3",
+    "react-router": "3.0.5",
+    "react-slick": "^0.15.4",
+    "slick-carousel": "^1.8.1"
   },
   "scripts": {
     "start": "react-scripts start",

example/src/components/SpacedSpan.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function SpacedSpan({ className, children }) {
+    return (
+        <span className={className}>
+            &nbsp;{children}&nbsp;
+        </span>
+    );
+}

example/src/pages/App.css

@@ -2,12 +2,9 @@ body {
   font-family: Arial;
 }
 
-.layout {
-  max-width: 960px;
-  margin: 0 auto;
-}
-
 .fluid {
+  max-width: 1200px;
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
 }
@@ -17,18 +14,30 @@ body {
   margin: 0 20px;
 }
 
+a {
+  color: black;
+}
+
+a:hover {
+  color: #666;
+}
+
+.code {
+  font-family: Courier New, Courier, monospace;
+}
+
 @media (min-width: 480px) {
   .fluid {
     flex-direction: row;
   }
 
   .fluid__image-container{
     flex: 0 0 30%;
-    margin: 20px;
+    margin: 20px 0 20px 20px;
   }
 
   .fluid__instructions {
     flex: 0 0 50%;
-    padding-top: 20px;
+    padding-top: 30px;
   }
 }

example/src/pages/ReactSlick.js

@@ -0,0 +1,133 @@
+import React, { Component } from 'react';
+import ReactImageMagnify from '../pkg-lnk/ReactImageMagnify';
+import ReactSlick from 'react-slick';
+import SpacedSpan from '../components/SpacedSpan';
+
+import front_500 from '../images/versace-blue/front-500.jpg'
+import front_779 from '../images/versace-blue/front-779.jpg';
+import front_1020 from '../images/versace-blue/front-1020.jpg';
+import front_1200 from '../images/versace-blue/front-1200.jpg';
+import front_1426 from '../images/versace-blue/front-1426.jpg';
+
+import back_500 from '../images/versace-blue/back-500.jpg'
+import back_779 from '../images/versace-blue/back-779.jpg';
+import back_1020 from '../images/versace-blue/back-1020.jpg';
+import back_1200 from '../images/versace-blue/back-1200.jpg';
+import back_1426 from '../images/versace-blue/back-1426.jpg';
+
+import './App.css';
+import './react-slick.css';
+
+const frontSrcSet = [
+    { src: front_500, setting: '500w' },
+    { src: front_779, setting: '779w' },
+    { src: front_1020, setting: '1020w' },
+    { src: front_1200, setting: '1200w' },
+    { src: front_1426, setting: '1426w' }
+]
+    .map(item => `${item.src} ${item.setting}`)
+    .join(', ');
+
+const backSrcSet = [
+    { src: back_500, setting: '500w' },
+    { src: back_779, setting: '779w' },
+    { src: back_1020, setting: '1020w' },
+    { src: back_1200, setting: '1200w' },
+    { src: back_1426, setting: '1426w' }
+]
+    .map(item => `${item.src} ${item.setting}`)
+    .join(', ');
+
+const dataSource = [
+    {
+        srcSet: frontSrcSet,
+        small: front_500,
+        large: front_1426
+    },
+    {
+        srcSet: backSrcSet,
+        small: back_500,
+        large: back_1426
+    }
+];
+
+export default class ReactSlickExample extends Component {
+    render() {
+        return (
+            <div className="fluid react-slick">
+                <div className="fluid__image-container">
+                    <ReactSlick {...{
+                        dots: true,
+                        infinite: true,
+                        speed: 500,
+                        slidesToShow: 1,
+                        slidesToScroll: 1
+                    }}>
+                        {dataSource.map((src, index) => (
+                            <div key={index}>
+                                <ReactImageMagnify {...{
+                                    largeImage: {
+                                        alt: '',
+                                        src: src.large,
+                                        width: 1426,
+                                        height: 2000
+                                    },
+                                    smallImage: {
+                                        isFluidWidth: true,
+                                        alt: 'Wristwatch by Versace',
+                                        src: src.small,
+                                        srcSet: src.srcSet,
+                                        sizes: '(max-width: 480px) 100vw, (max-width: 1200px) 30vw, 360px'
+                                    },
+                                    isHintEnabled: true,
+                                    shouldHideHintAfterFirstActivation: false,
+                                    enlargedImagePosition: 'over'
+                                }} />
+                            </div>
+                        ))}
+                    </ReactSlick>
+                </div>
+                <div id="hello" className="fluid__instructions">
+                    <h3>Carousel Example</h3>
+                    <p className="App-intro">
+                        Integration with&nbsp;
+                        <a href="https://www.npmjs.com/package/react-slick">
+                            react-slick
+                        </a>
+                        .
+                    </p>
+                    <p className="App-intro">
+                        In-place enlargement for mouse and touch input.
+                    </p>
+                    <p className="App-intro">
+                        Side-by-side enlargement not yet compatible with react-slick.
+                    </p>
+                    <p className="App-intro">
+                        Responsive and fluid between breakpoints.
+                    </p>
+                    <p className="App-intro">
+                        Initial file size optimized via
+                        <SpacedSpan className="code">
+                            srcSet
+                        </SpacedSpan>
+                        and
+                        <SpacedSpan className="code">
+                            sizes
+                        </SpacedSpan>
+                        attributes.
+                    </p>
+                    <p className="App-intro">
+                        Please see
+                        <SpacedSpan>
+                            <a href="https://github.com/ethanselzer/react-image-magnify/tree/master/example">
+                                source code
+                            </a>
+                        </SpacedSpan>
+                        for details.
+                    </p>
+                </div>
+                <div style={{height: '1000px'}} />
+            </div>
+        );
+    }
+}