diff --git a/demos/full-width-slide-definition.html b/demos/full-width-slide-definition.html
new file mode 100644
index 0000000..a6b74fe
--- /dev/null
+++ b/demos/full-width-slide-definition.html
@@ -0,0 +1,207 @@
+﻿<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Full Width Slider - with slider defination - Jssor Slider</title>
+    <style>
+    .jssorl-009-spin img {
+        animation-name: jssorl-009-spin;
+        animation-duration: 1.6s;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+    }
+    .white {
+        color: white;
+    }
+    .btn-color {
+        background-color: #34b79d;
+        color: #fff !important;
+    }
+    .btn-black {
+        background-color: #333;
+        color: #fff !important;
+    }
+    .btn-md {
+        padding: 15px 35px !important;
+        display: inline-block;
+    }
+    .btn, button {
+        font-size: 12px;
+        line-height: 1;
+        font-weight: 400;
+        font-family: "Montserrat",sans-serif;
+        text-decoration: none !important;
+        text-transform: uppercase;
+        text-align: center;
+        outline: none;
+        border-width: 1px;
+        border-style: solid;
+        display: inline-block;
+        vertical-align: middle;
+        transition: all 0.3s ease 0s !important;
+        -moz-transition: all 0.3s ease 0s !important;
+        -webkit-transition: all 0.3s ease 0s !important;
+        -o-transition: all 0.3s ease 0s !important;
+        border-radius: 50px;
+        -moz-border-radius: 50px;
+        -webkit-border-radius: 50px;
+    }
+    @keyframes jssorl-009-spin {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+    .jssorb032 {
+        position:absolute;
+    }
+    .jssorb032 .i {
+        position:absolute;
+        cursor:pointer;
+    }
+    .jssorb032 .i .b {
+        fill:#fff;
+        fill-opacity:0.7;
+        stroke:#000;
+        stroke-width:1200;
+        stroke-miterlimit:10;
+        stroke-opacity:0.25;
+    }
+    .jssorb032 .i:hover .b {
+        fill:#000;
+        fill-opacity:.6;
+        stroke:#fff;
+        stroke-opacity:.35;
+    }
+    .jssorb032 .iav .b {
+        fill:#000;
+        fill-opacity:1;
+        stroke:#fff;
+        stroke-opacity:.35;
+    }
+    .jssorb032 .i.idn {
+        opacity:.3;
+    }
+    .jssora051 {
+        display:block;
+        position:absolute;
+        cursor:pointer;
+    }
+    .jssora051 .a {
+        fill:none;
+        stroke:#fff;
+        stroke-width:360;
+        stroke-miterlimit:10;
+    }
+    .jssora051:hover {
+        opacity:.8;
+    }
+    .jssora051.jssora051dn {
+        opacity:.5;
+    }
+    .jssora051.jssora051ds {
+        opacity:.3;
+        pointer-events:none;
+    }
+    </style>
+</head>
+<body style="margin:0;padding:0;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; background-color: #262626;">
+    <div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1300px;height:500px;overflow:hidden;visibility:hidden;">
+        <!-- Loading Screen -->
+        <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
+            <img style="margin-top:-19px;position:relative;top:50%;left: 50%;width:38px;height:38px;" src="../svg/loading/static-svg/tail-spin.svg">
+        </div>
+
+        <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1300px;height:500px;overflow:hidden;">
+            <div>
+                <img data-u="image" src="../img/gallery/1920x980/img_1.jpg">
+
+                <div style="position: absolute; top: 50%; left: 50%; margin: -33px 0px 0px -165px; width: 350px; height: 50px; text-align: center; line-height: 50px; z-index: 1;">
+                    <h2 class="white">Lorem ipsum dolor sit amet,</h2>
+                    <a href="https://github.com/hirenkeraliya" class="submit btn btn-md btn-black header-button">Menu</a>
+                </div>
+            </div>
+
+            <div>
+                <img data-u="image" src="../img/gallery/1920x980/img_2.jpg">
+
+                <div style="position: absolute; top: 50%; left: 50%; margin: -33px 0px 0px -165px; width: 350px; height: 50px; text-align: center; line-height: 50px; z-index: 1;">
+                    <h2 class="white">Lorem ipsum dolor sit amet,</h2>
+                    <a href="https://github.com/hirenkeraliya" class="submit btn btn-md btn-color header-button">Menu</a>
+                </div>
+            </div>
+
+            <div>
+                <img data-u="image" src="../img/gallery/1920x980/img_3.jpg">
+
+                <div style="position: absolute; top: 50%; left: 50%; margin: -33px 0px 0px -165px; width: 350px; height: 50px; text-align: center; line-height: 50px; z-index: 1;">
+                    <h2 class="white">Lorem ipsum dolor sit amet,</h2>
+                    <a href="https://github.com/hirenkeraliya" class="submit btn btn-md btn-color header-button">Menu</a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Arrow Navigator -->
+        <div data-u="arrowleft" class="jssora051" style="width:65px;height:65px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
+            <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
+                <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
+            </svg>
+        </div>
+
+        <div data-u="arrowright" class="jssora051" style="width:65px;height:65px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
+            <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
+                <polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
+            </svg>
+        </div>
+    </div>
+
+    <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
+    <script type="text/javascript">
+    jssor_1_slider_init = function() {
+        var jssor_1_SlideoTransitions = [
+            [{b:-1,d:1,o:-0.7}],
+            [{b:900,d:2000,x:-379,e:{x:7}}],
+            [{b:900,d:2000,x:-379,e:{x:7}}],
+            [
+                {b:-1,d:1,o:-1,sX:2,sY:2},
+                {b:0,d:900,x:-171,y:-341,o:1,sX:-2,sY:-2,e:{x:3,y:3,sX:3,sY:3}},
+                {b:900,d:1600,x:-283,o:-1,e:{x:16}}
+            ]
+        ];
+        var jssor_1_options = {
+            $AutoPlay: 0,
+            $SlideDuration: 800,
+            $SlideEasing: $Jease$.$OutQuint,
+            $CaptionSliderOptions: {
+                $Class: $JssorCaptionSlideo$,
+                $Transitions: jssor_1_SlideoTransitions
+            },
+            $ArrowNavigatorOptions: {
+                $Class: $JssorArrowNavigator$
+            },
+        };
+        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
+
+        /*#region responsive code begin*/
+        var MAX_WIDTH = 3000;
+
+        function ScaleSlider() {
+            var bodyWidth = document.body.clientWidth;
+            if (bodyWidth)
+            jssor_1_slider.$ScaleWidth(Math.min(bodyWidth, 1920));
+            else
+            $Jssor$.$Delay(ScaleSlider, 30);
+        }
+        ScaleSlider();
+
+        $Jssor$.$AddEvent(window, "load", ScaleSlider);
+        $Jssor$.$AddEvent(window, "resize", ScaleSlider);
+        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
+    };
+
+    jssor_1_slider_init();
+    </script>
+</body>
+</html>
diff --git a/img/gallery/1920x980/img_1.jpg b/img/gallery/1920x980/img_1.jpg
new file mode 100644
index 0000000..3f69a3a
Binary files /dev/null and b/img/gallery/1920x980/img_1.jpg differ
diff --git a/img/gallery/1920x980/img_2.jpg b/img/gallery/1920x980/img_2.jpg
new file mode 100644
index 0000000..cca6dcc
Binary files /dev/null and b/img/gallery/1920x980/img_2.jpg differ
diff --git a/img/gallery/1920x980/img_3.jpg b/img/gallery/1920x980/img_3.jpg
new file mode 100644
index 0000000..f0de911
Binary files /dev/null and b/img/gallery/1920x980/img_3.jpg differ
