From 8a36ee7ad6115918d9abca2b9cb79b2e4721ff98 Mon Sep 17 00:00:00 2001
From: Enrique Mora <enriquebeta7@gmail.com>
Date: Thu, 19 May 2022 16:39:25 -0300
Subject: [PATCH 1/2] fix: use slide prop to render slider container

---
 src/inner-slider.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/inner-slider.js b/src/inner-slider.js
index 7cbdb27ad..97348de96 100644
--- a/src/inner-slider.js
+++ b/src/inner-slider.js
@@ -304,7 +304,8 @@ export class InnerSlider extends React.Component {
   };
   checkImagesLoad = () => {
     let images =
-      (this.list && this.list.querySelectorAll &&
+      (this.list &&
+        this.list.querySelectorAll &&
         this.list.querySelectorAll(".slick-slide img")) ||
       [];
     let imagesCount = images.length,
@@ -643,7 +644,7 @@ export class InnerSlider extends React.Component {
       "targetSlide",
       "useCSS"
     ]);
-    const { pauseOnHover } = this.props;
+    const { pauseOnHover, slide = "div" } = this.props;
     trackProps = {
       ...trackProps,
       onMouseEnter: pauseOnHover ? this.onTrackOver : null,
@@ -749,8 +750,11 @@ export class InnerSlider extends React.Component {
       listProps = { className: "slick-list" };
       innerSliderProps = { className };
     }
-    return (
-      <div {...innerSliderProps}>
+
+    return React.createElement(
+      slide,
+      innerSliderProps,
+      <>
         {!this.props.unslick ? prevArrow : ""}
         <div ref={this.listRefHandler} {...listProps}>
           <Track ref={this.trackRefHandler} {...trackProps}>
@@ -759,7 +763,7 @@ export class InnerSlider extends React.Component {
         </div>
         {!this.props.unslick ? nextArrow : ""}
         {!this.props.unslick ? dots : ""}
-      </div>
+      </>
     );
   };
 }

From b724c10885d37a1543b6a235ee0f0dbe1a1b9e07 Mon Sep 17 00:00:00 2001
From: Enrique Mora <enriquebeta7@gmail.com>
Date: Thu, 19 May 2022 16:39:51 -0300
Subject: [PATCH 2/2] docs: add example of Custom Slider Container

---
 docs/demos.js                     |  2 ++
 examples/CustomSliderContainer.js | 40 +++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 examples/CustomSliderContainer.js

diff --git a/docs/demos.js b/docs/demos.js
index a03cf825b..7c6d7f910 100644
--- a/docs/demos.js
+++ b/docs/demos.js
@@ -32,6 +32,7 @@ import CustomPaging from "../examples/CustomPaging";
 import CustomSlides from "../examples/CustomSlides";
 import AsNavFor from "../examples/AsNavFor";
 import AppendDots from "../examples/AppendDots";
+import CustomSliderContainer from "../examples/CustomSliderContainer";
 
 export default class App extends React.Component {
   render() {
@@ -59,6 +60,7 @@ export default class App extends React.Component {
         <CustomPaging />
         <CustomArrows />
         <CustomSlides />
+        <CustomSliderContainer />
         <PreviousNextMethods />
         <DynamicSlides />
         <VerticalMode />
diff --git a/examples/CustomSliderContainer.js b/examples/CustomSliderContainer.js
new file mode 100644
index 000000000..8a12ae08e
--- /dev/null
+++ b/examples/CustomSliderContainer.js
@@ -0,0 +1,40 @@
+import React, { Component } from "react";
+import Slider from "../src/slider";
+
+export default class CustomSliderContainer extends Component {
+  render() {
+    const settings = {
+      dots: true,
+      slide: "section",
+      infinite: true,
+      speed: 500,
+      slidesToShow: 1,
+      slidesToScroll: 1
+    };
+    return (
+      <div>
+        <h2>Custom Slider Container</h2>
+        <Slider {...settings}>
+          <div>
+            <h3>1</h3>
+          </div>
+          <div>
+            <h3>2</h3>
+          </div>
+          <div>
+            <h3>3</h3>
+          </div>
+          <div>
+            <h3>4</h3>
+          </div>
+          <div>
+            <h3>5</h3>
+          </div>
+          <div>
+            <h3>6</h3>
+          </div>
+        </Slider>
+      </div>
+    );
+  }
+}