From 0c4ae0714589cace5c77210de1403196791ddc40 Mon Sep 17 00:00:00 2001
From: jssor <zazanaire@live.com>
Date: Sun, 2 Apr 2017 10:46:15 +0800
Subject: [PATCH] fix demo pages, update skin pages

---
 README.md                                     |   6 +-
 bower.json                                    |  15 +-
 component.json                                |   2 +-
 demos/banner-rotator-2.html                   |   3 +-
 demos/banner-rotator.html                     |   1 -
 demos/banner-slider.html                      |   5 +-
 demos/carousel-slider.html                    |   3 +-
 demos/content-slider.html                     | 163 +++++++++---------
 demos/different-size-photo-slider.html        |   7 +-
 demos/full-width-slider.html                  |   1 -
 demos/grid-slider.html                        |   3 +-
 demos/html5-ad.html                           |   2 -
 ...image-gallery-with-vertical-thumbnail.html |   6 +-
 demos/image-gallery.html                      |   6 +-
 demos/image-slider-2.html                     |   6 +-
 demos/image-slider.html                       |   3 -
 demos/introduction-slider.html                |   5 -
 demos/list-slider.html                        |   5 +-
 .../nearby-image-partial-visible-slider.html  |   5 +-
 demos/nested-slider.html                      |   5 +-
 demos/responsive-slider-div-span.html         |   7 +-
 demos/responsive-slider-float-text.html       |   7 +-
 demos/scrolling-logo-thumbnail-slider.html    |  10 +-
 demos/simple-fade-slideshow.html              |   6 +-
 demos/simple-layer-animation-slider.html      |   4 +-
 demos/slider-cluster.html                     |  13 +-
 demos/tab-slider-text-vertical.html           |   4 +-
 demos/tab-slider-text.html                    |   4 +-
 demos/tab-slider.html                         |   4 +-
 demos/thumbnail-navigator-with-arrows.html    |   6 +-
 demos/tiled-menu-slider.html                  |   6 +-
 examples/auto-center-with-no-scale.html       |   6 +-
 examples/full-screen-contain-in-window.html   |   5 +-
 examples/full-screen-cover-window.html        |   5 +-
 examples/layout-arrangement.html              |   6 +-
 examples/overlay-cover.html                   |   6 +-
 ...se-playto-goto-next-prev-autoplay-api.html |  27 ++-
 examples/simple-slider.html                   |   3 +-
 examples/slide-definition.html                |   6 +-
 examples/slider-with-arrow-navigator.html     |   6 +-
 examples/slider-with-bullet-navigator.html    |   5 +-
 .../slider-with-fixed-static-element.html     |   4 +-
 examples/slider-with-progress-bar-api.html    |   3 +-
 examples/slider-with-slideshow.html           |   6 +-
 examples/sync-2-sliders-api.html              |   4 +-
 examples/ui-definition-1.html                 |   6 +-
 examples/ui-definition-2.html                 |   8 +-
 examples/validated-html.html                  |  20 +--
 package.json                                  |  17 +-
 skin/arrow-01.source.html                     |  14 +-
 skin/arrow-02.source.html                     |  14 +-
 skin/arrow-03.source.html                     |  14 +-
 skin/arrow-04.source.html                     |  14 +-
 skin/arrow-05.source.html                     |  14 +-
 skin/arrow-06.source.html                     |  14 +-
 skin/arrow-07.source.html                     |  14 +-
 skin/arrow-08.source.html                     |  14 +-
 skin/arrow-09.source.html                     |  14 +-
 skin/arrow-10.source.html                     |  14 +-
 skin/arrow-11.source.html                     |  14 +-
 skin/arrow-12.source.html                     |  14 +-
 skin/arrow-13.source.html                     |  14 +-
 skin/arrow-14.source.html                     |  14 +-
 skin/arrow-15.source.html                     |  14 +-
 skin/arrow-16.source.html                     |  14 +-
 skin/arrow-18.source.html                     |  14 +-
 skin/arrow-19.source.html                     |  14 +-
 skin/arrow-20.source.html                     |  14 +-
 skin/arrow-21.source.html                     |  14 +-
 skin/arrow-22.source.html                     |  14 +-
 skin/bullet-01.source.html                    |  13 +-
 skin/bullet-02.source.html                    |  13 +-
 skin/bullet-03.source.html                    |  13 +-
 skin/bullet-05.source.html                    |  13 +-
 skin/bullet-06.source.html                    |   5 +-
 skin/bullet-07.source.html                    |   5 +-
 skin/bullet-09.source.html                    |  13 +-
 skin/bullet-10.source.html                    |  13 +-
 skin/bullet-11.source.html                    |  13 +-
 skin/bullet-12.source.html                    |  13 +-
 skin/bullet-13.source.html                    |  13 +-
 skin/bullet-14.source.html                    |  13 +-
 skin/bullet-16.source.html                    |  13 +-
 skin/bullet-17.source.html                    |  13 +-
 skin/bullet-18.source.html                    |  13 +-
 skin/bullet-20.source.html                    |  13 +-
 skin/bullet-21.source.html                    |  13 +-
 skin/img/slide.png                            | Bin 0 -> 1966 bytes
 skin/img/thumb.png                            | Bin 0 -> 1634 bytes
 skin/thumbnail-01.source.html                 |  52 +++---
 skin/thumbnail-02.source.html                 |  60 +++----
 skin/thumbnail-03.source.html                 |  44 ++---
 skin/thumbnail-04.source.html                 |  48 ++----
 skin/thumbnail-05.source.html                 |  52 +++---
 skin/thumbnail-06.source.html                 |  60 +++----
 skin/thumbnail-07.source.html                 |  52 +++---
 skin/thumbnail-08.source.html                 |  36 ++--
 skin/thumbnail-09.source.html                 |  11 +-
 skin/thumbnail-10.source.html                 |  11 +-
 skin/thumbnail-15.source.html                 |  44 ++---
 skin/thumbnail-16.source.html                 |  16 +-
 101 files changed, 684 insertions(+), 767 deletions(-)
 create mode 100644 skin/img/slide.png
 create mode 100644 skin/img/thumb.png

diff --git a/README.md b/README.md
index db5cd7f..20883f4 100644
--- a/README.md
+++ b/README.md
@@ -15,11 +15,11 @@ Responsive Javascript Image/Text Slider/Carousel/Slideshow/Gallery/HTML5 Ad
 # Download from GitHub
 https://github.com/jssor/slider/archive/master.zip
 
-# Bower
-bower install jssor-slider --save
-
 # NPM
 npm install jssor-slider
+
+# Bower
+bower install jssor-slider --save
 ```
 
 --------------------------------------
diff --git a/bower.json b/bower.json
index 672ed24..010fc5c 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
     "name": "jssor-slider",
     "description": "Responsive Javascript Image/Content Slider/Slideshow/Carousel/Gallery/Banner/HTML5 AD",
-    "version": "23.0.2",
+    "version": "23.0.3",
     "homepage": "http://www.jssor.com",
     "keywords": [
         "javascript",
@@ -31,8 +31,17 @@
         "js/jssor.slider.min.js"
     ],
     "ignore": [
-        "demos",
-        "examples",
+        "demos/",
+        "examples/",
+        "transitions/",
+
+        "img/alila/",
+        "img/landscape/",
+        "img/motor/",
+        "img/nested-thumb/",
+        "img/photography/",
+        "img/travel/",
+
         "img/1920",
         "img/ancient-lady",
         "img/appicon",
diff --git a/component.json b/component.json
index d40a4a9..9e8df4a 100644
--- a/component.json
+++ b/component.json
@@ -2,7 +2,7 @@
     "name": "jssor-slider",
     "repo": "jssor/slider",
     "description": "Responsive Javascript Image/Content Slider/Slideshow/Carousel/Gallery/Banner/HTML5 AD",
-    "version": "23.0.1",
+    "version": "23.0.3",
     "homepage": "http://www.jssor.com",
     "keywords": [
         "javascript",
diff --git a/demos/banner-rotator-2.html b/demos/banner-rotator-2.html
index ee91548..90ed09b 100644
--- a/demos/banner-rotator-2.html
+++ b/demos/banner-rotator-2.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Banner Rotator Demo - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="background:#fff;">
     <!-- Jssor Slider Begin -->
@@ -214,7 +214,6 @@
         <!-- Arrow Right -->
         <span u="arrowright" class="jssora05r" style="top: 123px; right: 8px;">
         </span>
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger -->
         <script>
             jssor_2_slider_init('slider2_container');
diff --git a/demos/banner-rotator.html b/demos/banner-rotator.html
index 06b06e1..0994856 100644
--- a/demos/banner-rotator.html
+++ b/demos/banner-rotator.html
@@ -164,7 +164,6 @@
         <!-- Arrow Navigator -->
         <span data-u="arrowleft" class="jssora05l" style="top:0px;left:8px;width:40px;height:40px;" data-autocenter="2"></span>
         <span data-u="arrowright" class="jssora05r" style="top:0px;right:8px;width:40px;height:40px;" data-autocenter="2"></span>
-        <a href="http://www.jssor.com" style="display:none">Bootstrap Carousel</a>
     </div>
     <script>
         jssor_1_slider_init();
diff --git a/demos/banner-slider.html b/demos/banner-slider.html
index 482af81..84e32de 100644
--- a/demos/banner-slider.html
+++ b/demos/banner-slider.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Banner Slider Demo - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="background:#fff;">
     <!-- Jssor Slider Begin -->
@@ -87,7 +87,7 @@
         };
     </script>
     <!-- Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="jssor_2_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden; ">
 
         <!-- Loading Screen -->
@@ -215,7 +215,6 @@
         <!-- Arrow Right -->
         <span u="arrowright" class="jssora05r" style="top: 123px; right: 8px;">
         </span>
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger -->
         <script>
             jssor_2_slider_init('jssor_2_container');
diff --git a/demos/carousel-slider.html b/demos/carousel-slider.html
index 991ff40..c258e50 100644
--- a/demos/carousel-slider.html
+++ b/demos/carousel-slider.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Carousel Demo - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -186,7 +186,6 @@
         <span u="arrowright" class="jssora03r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/demos/content-slider.html b/demos/content-slider.html
index ee44d5a..96a7977 100644
--- a/demos/content-slider.html
+++ b/demos/content-slider.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Content Slider - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="padding: 0; margin: 0; font-family: Arial, Verdana; background-color: #fff;">
     <script type="text/javascript" src="../js/jssor.slider.min.js"></script>
@@ -273,99 +273,98 @@
                 </span>
                 <!--#endregion Arrow Navigator Skin End -->
                 
-            <!--#region Thumbnail Navigator Skin Begin -->
-            <!-- Help: http://www.jssor.com/development/slider-with-thumbnail-navigator-no-jquery.html -->
-            <style>
-                /* jssor slider thumbnail navigator skin 04 css */
-                /*
-                .jssort04 .p            (normal)
-                .jssort04 .p:hover      (normal mouseover)
-                .jssort04 .pav          (active)
-                .jssort04 .pav:hover    (active mouseover)
-                .jssort04 .pdn          (mousedown)
-                */
-
-                .jssort04 {
-                    position: absolute;
-                    /* size of thumbnail navigator container */
-                    width: 600px;
-                    height: 60px;
-                }
+                <!--#region Thumbnail Navigator Skin Begin -->
+                <!-- Help: http://www.jssor.com/development/slider-with-thumbnail-navigator-no-jquery.html -->
+                <style>
+                    /* jssor slider thumbnail navigator skin 04 css */
+                    /*
+                    .jssort04 .p            (normal)
+                    .jssort04 .p:hover      (normal mouseover)
+                    .jssort04 .pav          (active)
+                    .jssort04 .pav:hover    (active mouseover)
+                    .jssort04 .pdn          (mousedown)
+                    */
 
-                    .jssort04 .p {
+                    .jssort04 {
                         position: absolute;
-                        top: 0;
-                        left: 0;
-                        width: 62px;
-                        height: 32px;
+                        /* size of thumbnail navigator container */
+                        width: 600px;
+                        height: 60px;
                     }
 
-                    .jssort04 .t {
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        width: 100%;
-                        height: 100%;
-                        border: none;
-                    }
+                        .jssort04 .p {
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 62px;
+                            height: 32px;
+                        }
 
-                    .jssort04 .w, .jssort04 .pav:hover .w {
-                        position: absolute;
-                        width: 60px;
-                        height: 30px;
-                        border: #0099FF 1px solid;
-                        box-sizing: content-box;
-                    }
+                        .jssort04 .t {
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 100%;
+                            height: 100%;
+                            border: none;
+                        }
 
-                    .jssort04 .pdn .w, .jssort04 .pav .w {
-                        border-style: dashed;
-                    }
+                        .jssort04 .w, .jssort04 .pav:hover .w {
+                            position: absolute;
+                            width: 60px;
+                            height: 30px;
+                            border: #0099FF 1px solid;
+                            box-sizing: content-box;
+                        }
 
-                    .jssort04 .c {
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        width: 62px;
-                        height: 32px;
-                        background-color: #000;
-                        filter: alpha(opacity=45);
-                        opacity: .45;
-                        transition: opacity .6s;
-                        -moz-transition: opacity .6s;
-                        -webkit-transition: opacity .6s;
-                        -o-transition: opacity .6s;
-                    }
+                        .jssort04 .pdn .w, .jssort04 .pav .w {
+                            border-style: dashed;
+                        }
 
-                    .jssort04 .p:hover .c, .jssort04 .pav .c {
-                        filter: alpha(opacity=0);
-                        opacity: 0;
-                    }
+                        .jssort04 .c {
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 62px;
+                            height: 32px;
+                            background-color: #000;
+                            filter: alpha(opacity=45);
+                            opacity: .45;
+                            transition: opacity .6s;
+                            -moz-transition: opacity .6s;
+                            -webkit-transition: opacity .6s;
+                            -o-transition: opacity .6s;
+                        }
 
-                    .jssort04 .p:hover .c {
-                        transition: none;
-                        -moz-transition: none;
-                        -webkit-transition: none;
-                        -o-transition: none;
-                    }
+                        .jssort04 .p:hover .c, .jssort04 .pav .c {
+                            filter: alpha(opacity=0);
+                            opacity: 0;
+                        }
 
-                    * html .jssort04 .w {
-                        width /**/: 62px;
-                        height /**/: 32px;
-                    }
-            </style>
-            <!-- thumbnail navigator container -->
-            <div u="thumbnavigator" class="jssort04" style="right: 0px; bottom: 0px;">
-                <!-- Thumbnail Item Skin Begin -->
-                <div u="slides" style="bottom: 25px; right: 30px; cursor: default;">
-                    <div u="prototype" class="p">
-                        <div class=w><div u="thumbnailtemplate" class="t"></div></div>
-                        <div class=c></div>
+                        .jssort04 .p:hover .c {
+                            transition: none;
+                            -moz-transition: none;
+                            -webkit-transition: none;
+                            -o-transition: none;
+                        }
+
+                        * html .jssort04 .w {
+                            width /**/: 62px;
+                            height /**/: 32px;
+                        }
+                </style>
+                <!-- thumbnail navigator container -->
+                <div u="thumbnavigator" class="jssort04" style="right: 0px; bottom: 0px;">
+                    <!-- Thumbnail Item Skin Begin -->
+                    <div u="slides" style="bottom: 25px; right: 30px; cursor: default;">
+                        <div u="prototype" class="p">
+                            <div class=w><div u="thumbnailtemplate" class="t"></div></div>
+                            <div class=c></div>
+                        </div>
                     </div>
+                    <!-- Thumbnail Item Skin End -->
                 </div>
-                <!-- Thumbnail Item Skin End -->
-            </div>
-            <!--#endregion Thumbnail Navigator Skin End -->
-                <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+                <!--#endregion Thumbnail Navigator Skin End -->
             </div>
             <!-- Trigger -->
             <script>
diff --git a/demos/different-size-photo-slider.html b/demos/different-size-photo-slider.html
index 60e4124..913e956 100644
--- a/demos/different-size-photo-slider.html
+++ b/demos/different-size-photo-slider.html
@@ -3,9 +3,10 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Different Size Images Slider Example - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="background:#fff;">
+    <!-- Jssor Slider Begin -->
     <script type="text/javascript" src="../js/jssor.slider.min.js"></script>
     <script>
         jssor_slider1_starter = function (containerId) {
@@ -94,8 +95,6 @@
             //responsive code end
         };
     </script>
-    <!-- Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
     <div id="slider1_container" style="position: relative; width: 600px; height: 500px; background-color: #000; overflow: hidden; ">
 
         <!-- Loading Screen -->
@@ -180,7 +179,7 @@
             <div u="prototype"></div>
         </div>
         <!--#endregion Bullet Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/demos/full-width-slider.html b/demos/full-width-slider.html
index 2e9d505..d2bc009 100644
--- a/demos/full-width-slider.html
+++ b/demos/full-width-slider.html
@@ -135,7 +135,6 @@
                     <div style="position:absolute;top:60px;left:15px;width:500px;height:40px;z-index:0;font-size:22px;color:#000000;line-height:38px;">windows, android, mac</div>
                 </div>
             </div>
-            <a data-u="any" href="http://www.jssor.com" style="display:none">jQuery Slider</a>
             <div>
                 <img data-u="image" src="../img/full-width/windows.jpg" />
                 <div style="position:absolute;top:85px;left:100px;width:600px;height:120px;z-index:0;background-color:rgba(0,0,0,0.5);">
diff --git a/demos/grid-slider.html b/demos/grid-slider.html
index fd685e9..c97b81e 100644
--- a/demos/grid-slider.html
+++ b/demos/grid-slider.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Grid Slider Demo - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -123,7 +123,6 @@
     </style>
     <!-- sliderh style end -->
 
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
     <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 809px; height: 456px; overflow: hidden; ">
             <!-- Slides Container -->
             <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 809px; height: 456px;
diff --git a/demos/html5-ad.html b/demos/html5-ad.html
index 0110dda..32467fd 100644
--- a/demos/html5-ad.html
+++ b/demos/html5-ad.html
@@ -8,8 +8,6 @@
 <body style="padding:0px; margin:0px; background-color:#fff;font-family:Arial, sans-serif">
 
     <!-- #region Jssor Slider Begin -->
-    <!-- Source: http://www.jssor.com/demos/html5-ad.slider/=edit -->
-    <!-- Generator: Jssor Slider Maker -->
     <script type="text/javascript" src="../js/jssor.slider.min.js"></script>
     <script>
         jssor_html5_AdWords_slider_init = function() {
diff --git a/demos/image-gallery-with-vertical-thumbnail.html b/demos/image-gallery-with-vertical-thumbnail.html
index 1b09a49..ba78e42 100644
--- a/demos/image-gallery-with-vertical-thumbnail.html
+++ b/demos/image-gallery-with-vertical-thumbnail.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Image Gallery Vertical Thumbnail Navigation Bar Theme - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="padding: 0px; margin: 0px; font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -102,7 +102,7 @@
             //responsive code end
         };
     </script>
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 960px;
         height: 480px; background: #191919; overflow: hidden;">
 
@@ -319,7 +319,7 @@
             <!-- Thumbnail Item Skin End -->
         </div>
         <!--#endregion Thumbnail Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/demos/image-gallery.html b/demos/image-gallery.html
index eb5c128..626b45f 100644
--- a/demos/image-gallery.html
+++ b/demos/image-gallery.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Image Gallery Theme - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="padding: 0; margin: 0; font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -114,7 +114,7 @@
             //responsive code end
         };
     </script>
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 800px;
         height: 456px; background: #191919; overflow: hidden;">
 
@@ -323,7 +323,7 @@
             <!-- Thumbnail Item Skin End -->
         </div>
         <!--#endregion Thumbnail Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/demos/image-slider-2.html b/demos/image-slider-2.html
index 353ed78..e4f96c5 100644
--- a/demos/image-slider-2.html
+++ b/demos/image-slider-2.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Image Slider Theme - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -71,7 +71,7 @@
             //responsive code end
         };
     </script>
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider2_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden; ">
 
         <!-- Loading Screen -->
@@ -265,7 +265,7 @@
             <!-- Thumbnail Item Skin End -->
         </div>
         <!--#endregion Thumbnail Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             jssor_slider2_starter('slider2_container');
diff --git a/demos/image-slider.html b/demos/image-slider.html
index b2df333..769450e 100644
--- a/demos/image-slider.html
+++ b/demos/image-slider.html
@@ -8,8 +8,6 @@
 <body style="padding:0px; margin:0px; background-color:#fff;font-family:Arial, sans-serif">
 
     <!-- #region Jssor Slider Begin -->
-    <!-- Source: http://www.jssor.com/demos/image-slider.slider/=edit -->
-    <!-- Generator: Jssor Slider Maker -->
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
     <script type="text/javascript">
         jssor_1_slider_init = function() {
@@ -192,7 +190,6 @@
                     </div>
                 </div>
             </div>
-            <a data-u="any" href="http://www.jssor.com" style="display:none">jQuery Slider</a>
         </div>
         <!-- Bullet Navigator -->
         <div data-u="navigator" class="jssorb01" style="bottom:16px;right:16px;">
diff --git a/demos/introduction-slider.html b/demos/introduction-slider.html
index a42286a..f1d4305 100644
--- a/demos/introduction-slider.html
+++ b/demos/introduction-slider.html
@@ -8,9 +8,6 @@
 <body style="padding:0px; margin:0px; background-color:#fff;font-family:Arial, sans-serif">
     
     <!-- #region Jssor Slider Begin -->
-    <!-- Source: http://www.jssor.com/demos/introduction-slider.slider/=edit -->
-    <!-- Generator: Jssor Slider Maker -->
-    <!-- Generator: Jssor Slider Maker -->
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
     <script type="text/javascript">
         jssor_1_slider_init = function() {
@@ -368,8 +365,6 @@
                     <img data-u="caption" data-t="79" style="position:absolute;top:0px;left:295px;width:8px;height:8px;z-index:0;" src="../img/present/01/dot.png" />
                     <img data-u="caption" data-t="80" style="position:absolute;top:0px;left:313px;width:8px;height:8px;z-index:0;" src="../img/present/01/dot.png" />
                 </div>
-                <a href="http://www.jssor.com/demos/introduction-slider.slider/=edit" target="_blank" style="display:block; position:absolute;top:22px;left:500px;width:220px;height:36px;z-index:0;font-size:22px;color:#ffffff;line-height:36px;text-align:center;">Edit This Slider</a>
-                <a href="https://www.jssor.com/action/sign_up.aspx" target="_blank" style="display:block; position:absolute;top:22px;left:720px;width:220px;height:36px;z-index:0;font-size:22px;color:#ffffff;line-height:36px;text-align:center;">Sign up Now!</a>
             </div>
         </div>
         <!-- Bullet Navigator -->
diff --git a/demos/list-slider.html b/demos/list-slider.html
index a02c9ba..5ea35ea 100644
--- a/demos/list-slider.html
+++ b/demos/list-slider.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>List Slider Demo - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -71,7 +71,7 @@
             //responsive code end
         };
     </script>
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 810px; height: 300px; background: #000; overflow: hidden; ">
 
         <!-- Loading Screen -->
@@ -244,7 +244,6 @@
             <!-- Thumbnail Item Skin End -->
         </div>
         <!--#endregion ThumbnailNavigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/demos/nearby-image-partial-visible-slider.html b/demos/nearby-image-partial-visible-slider.html
index ba90251..69d7d07 100644
--- a/demos/nearby-image-partial-visible-slider.html
+++ b/demos/nearby-image-partial-visible-slider.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Nearby Image Partial Visible Slider - Jssor Slider, Carousel, Slideshow</title>
+    <title></title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -50,7 +50,7 @@
         };
     </script>
     
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 800px;
         height: 300px; overflow: hidden;">
         <!-- Slides Container -->
@@ -107,7 +107,6 @@
         <span u="arrowright" class="jssora13r" style="top: 123px; right: 30px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/demos/nested-slider.html b/demos/nested-slider.html
index e1c027e..4866f75 100644
--- a/demos/nested-slider.html
+++ b/demos/nested-slider.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Nested Slider Demo - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -143,7 +143,7 @@
     </style>
     <!-- sliderh style end -->
 
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 400px; overflow: hidden; ">
 
         <!-- Loading Screen -->
@@ -367,7 +367,6 @@
         </div>
         <!--#endregion Thumbnail Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/demos/responsive-slider-div-span.html b/demos/responsive-slider-div-span.html
index 171b400..5f4a47b 100644
--- a/demos/responsive-slider-div-span.html
+++ b/demos/responsive-slider-div-span.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Responsive Slider with Float Text - Jssor Slider, Carousel, Slideshow</title>
+    <title></title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
 
@@ -79,7 +79,7 @@
     </script>
     <div style="display: block; overflow: hidden; margin: 20px auto 0 auto; padding: 10px 5px 5px 10px; width: 96%; max-width:940px; min-width: 240px; border: 1px solid #ccc; background-color: #fff; box-shadow: 2px 2px 10px 2px #dddddd; -webkit-box-shadow: 0px 0px 5px 0px #dddddd; font-size: .8em; line-height: 1.5em;">
     <!-- Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
         <div id="slider2_container" style="position: relative; margin: 0px 5px 5px 0px; float: left; top: 0px; left: 0px; width: 600px;
             height: 300px; overflow: hidden;">
             <!-- Slides Container -->
@@ -106,7 +106,6 @@
                     <div u="caption" t="FLTTR|R" style="position:absolute;left:380px;top:80px;width:130px;height:40px;font-size:36px;color:#fff;line-height:40px;">Please!</div>
                 </div>
             </div>
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
             <!-- Trigger -->
             <script>
                 jssor_slider2_starter('slider2_container');
@@ -114,7 +113,7 @@
         </div>
         <!-- Jssor Slider End -->
         <div id="clearFixDiv" style="display: table; padding: 5px; margin: 0px 5px 5px 0px; border: 1px solid #ccc;">
-            <img src="../img/icon-slider-12-jquery.png" style="float: left; margin-right: 5px;" />
+            <img src="../img/icons/icon_chrome.png" style="float: left; margin-right: 5px;" />
             <p style="margin:0px;">Jssor Slider is responsive touch swipe javascript slider, <strong>Responsive Web Design (RWD)</strong> is a new web design approach aimed at crafting sites to provide an optimal viewing experience-easy reading and navigation with a minimum of resizing, panning, and scrolling-across a wide range of devices (from desktop computer monitors to mobile phones).</p>
         </div>
         <p style="margin-top:10px;"><span style="padding: 2px; background-color: #ddd;">Jssor Slider designed with (RWD) adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images.</span></p>
diff --git a/demos/responsive-slider-float-text.html b/demos/responsive-slider-float-text.html
index 9e89123..e79a61b 100644
--- a/demos/responsive-slider-float-text.html
+++ b/demos/responsive-slider-float-text.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Responsive Slider with Float Text - Jssor Slider, Carousel, Slideshow</title>
+    <title></title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
 
@@ -74,7 +74,7 @@
     </script>
     <div style="display: block; margin: 20px auto 0 auto; padding: 10px 5px 5px 10px; width: 96%; max-width:940px; min-width: 240px; border: 1px solid #ccc; background-color: #fff; box-shadow: 2px 2px 10px 2px #dddddd; -webkit-box-shadow: 0px 0px 5px 0px #dddddd; font-size: .8em; line-height: 1.5em;">
         <!-- Jssor Slider Begin -->
-        <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+        
         <div id="slider1_container" style="position: relative; margin: 0px 5px 5px 0px; float: left; top: 0px; left: 0px; width: 600px;
             height: 300px; overflow: hidden;">
             <!-- Slides Container -->
@@ -101,14 +101,13 @@
                     <div u="caption" t="FLTTR|R" style="position:absolute;left:380px;top:80px;width:130px;height:40px;font-size:36px;color:#fff;line-height:40px;">Please!</div>
                 </div>
             </div>
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
             <!-- Trigger -->
             <script>
                 jssor_slider1_starter('slider1_container');
             </script>
         </div>
         <!-- Jssor Slider End -->
-        <img src="../img/icon-slider.png" style="float: left; margin-right: 5px;" /><p style="margin-top:0px;">Jssor Slider is responsive touch swipe javascript slider, <strong>Responsive Web Design (RWD)</strong> is a new web design approach aimed at crafting sites to provide an optimal viewing experience-easy reading and navigation with a minimum of resizing, panning, and scrolling-across a wide range of devices (from desktop computer monitors to mobile phones).</p>
+        <img src="../img/icons/icon_chrome.png" style="float: left; margin-right: 5px;" /><p style="margin-top:0px;">Jssor Slider is responsive touch swipe javascript slider, <strong>Responsive Web Design (RWD)</strong> is a new web design approach aimed at crafting sites to provide an optimal viewing experience-easy reading and navigation with a minimum of resizing, panning, and scrolling-across a wide range of devices (from desktop computer monitors to mobile phones).</p>
         <p style="margin-top:0px;">Jssor Slider designed with (RWD) adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images.</p>
         <p style="margin-top:0px;">The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.</p>
         <p style="margin-top:0px;">Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.</p>
diff --git a/demos/scrolling-logo-thumbnail-slider.html b/demos/scrolling-logo-thumbnail-slider.html
index 30c3be2..cb04f93 100644
--- a/demos/scrolling-logo-thumbnail-slider.html
+++ b/demos/scrolling-logo-thumbnail-slider.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Scrolling Logo/Thumbnail Slider Demo - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -51,7 +51,6 @@
             //responsive code end
         };
     </script>
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
     <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 980px; height: 100px; overflow: hidden; ">
 
         <!-- Loading Screen -->
@@ -66,13 +65,10 @@
 
         <!-- Slides Container -->
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 980px; height: 100px; overflow: hidden;">
-            <div><img u="image" alt="amazon" src="../img/logo/amazon.jpg" /></div>
             <div><img u="image" alt="android" src="../img/logo/android.jpg" /></div>
-            <div><img u="image" alt="bitly" src="../img/logo/bitly.jpg" /></div>
             <div><img u="image" alt="blogger" src="../img/logo/blogger.jpg" /></div>
             <div><img u="image" alt="dnn" src="../img/logo/dnn.jpg" /></div>
             <div><img u="image" alt="drupal" src="../img/logo/drupal.jpg" /></div>
-            <div><img u="image" alt="ebay" src="../img/logo/ebay.jpg" /></div>
             <div><img u="image" alt="facebook" src="../img/logo/facebook.jpg" /></div>
             <div><img u="image" alt="google" src="../img/logo/google.jpg" /></div>
             <div><img u="image" alt="ibm" src="../img/logo/ibm.jpg" /></div>
@@ -80,15 +76,11 @@
             <div><img u="image" alt="joomla" src="../img/logo/joomla.jpg" /></div>
             <div><img u="image" alt="linkedin" src="../img/logo/linkedin.jpg" /></div>
             <div><img u="image" alt="mac" src="../img/logo/mac.jpg" /></div>
-            <div><img u="image" alt="magento" src="../img/logo/magento.jpg" /></div>
             <div><img u="image" alt="pinterest" src="../img/logo/pinterest.jpg" /></div>
-            <div><img u="image" alt="samsung" src="../img/logo/samsung.jpg" /></div>
             <div><img u="image" alt="twitter" src="../img/logo/twitter.jpg" /></div>
             <div><img u="image" alt="windows" src="../img/logo/windows.jpg" /></div>
             <div><img u="image" alt="wordpress" src="../img/logo/wordpress.jpg" /></div>
-            <div><img u="image" alt="youtube" src="../img/logo/youtube.jpg" /></div>
         </div>
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/demos/simple-fade-slideshow.html b/demos/simple-fade-slideshow.html
index 7b8ed88..daba081 100644
--- a/demos/simple-fade-slideshow.html
+++ b/demos/simple-fade-slideshow.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Simple Fade Slideshow Theme - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -83,7 +83,7 @@
             //responsive code end
         };
     </script>
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden; ">
 
         <!-- Loading Screen -->
@@ -206,7 +206,7 @@
         <span u="arrowright" class="jssora12r" style="top: 123px; right: 0px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/demos/simple-layer-animation-slider.html b/demos/simple-layer-animation-slider.html
index e662b1e..470d1d3 100644
--- a/demos/simple-layer-animation-slider.html
+++ b/demos/simple-layer-animation-slider.html
@@ -3,13 +3,11 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Simple Layer Animation Slider - Jssor Slider</title>
+    <title>Simple Layer Animation - Jssor Slider</title>
 </head>
 <body style="padding:0px; margin:0px; background-color:#fff;font-family:Arial, sans-serif">
 
     <!-- #region Jssor Slider Begin -->
-    <!-- Source: http://www.jssor.com/demos/simple-layer-animation.slider/=edit -->
-    <!-- Generator: Jssor Slider Maker -->
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
     <script type="text/javascript">
         jssor_1_slider_init = function() {
diff --git a/demos/slider-cluster.html b/demos/slider-cluster.html
index 797a85a..d737349 100644
--- a/demos/slider-cluster.html
+++ b/demos/slider-cluster.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Slider Cluster Demo - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
     <style>
         /* jssor slider bullet navigator skin 01 css */
         /*
@@ -380,7 +380,7 @@
     </script>
     <div style="position: relative; margin-top: 10px; top: 0px; left: 0px; width:100%; text-align: center; background-image: url(../img/home/back-dice-02.jpg); border-top: 1px solid gray; border-bottom: 1px solid gray; overflow: hidden;">
         <!-- Jssor Slider Begin -->
-        <!-- To move inline styles to css file/block, please specify a class name for each element. -->  
+         
         <div id="sliderc_container" style="position: relative; margin: 0 auto; width: 960px;
             height: 450px; text-align: left; overflow: hidden;">
  
@@ -389,7 +389,7 @@
                 overflow: hidden;">
                 <div>
                     <!-- Jssor Slider Begin -->
-                    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+                    
                     <div id="slider1_container" style="position: relative; top: 90px; left: 0px; width: 600px;
                         height: 300px; overflow: hidden; border-radius: 8px;">
 
@@ -482,7 +482,6 @@
                         </span>
                         <!--#endregion Arrow Navigator Skin End -->
         
-                        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
                     </div>
                     <!-- Jssor Slider End -->
                     <div u="caption" t="RTT*JUP|BR" t2="SPACESHIP|RB" style="position: absolute; left: 0px;top:30px;width:600px;height:30px;font-size:28px;color:#fff;line-height:30px; text-align: center;">
@@ -513,7 +512,7 @@
                 </div>
                 <div>
                     <!-- Jssor Slider Begin -->
-                    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+                    
                     <div id="slider2_container" style="position: relative; top: 30px; left: 360px; width: 600px;
                         height: 300px; overflow: hidden; border-radius: 8px; zoom: 1; filter: matrix">
 
@@ -573,7 +572,6 @@
                         <span u="arrowright" class="jssora05r" style="top: 123px; right: 8px;">
                         </span>
                         <!--#endregion Arrow Navigator Skin End -->
-                        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
                     </div>
                     <!-- Jssor Slider End -->
                     <div u="caption" t="T|IE*IE" t2="B*IB" style="position: absolute; left: 360px;top:360px;width:600px;height:30px;font-size:28px;color:#fff;line-height:30px; text-align: center;">
@@ -612,7 +610,7 @@
                 </div>
                 <div>
                     <!-- Jssor Slider Begin -->
-                    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+                    
                     <div id="slider3_container" style="position: relative; top: 90px; left: 360px; width: 600px;
                         height: 300px; overflow: hidden; border-radius: 8px;">
 
@@ -797,7 +795,6 @@
             <span u="arrowright" class="jssora20r" style="top: 123px; right: 8px;">
             </span>
             <!--#endregion Arrow Navigator Skin End -->
-            <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
             <!-- Trigger --> 
             <script>
                 jssor_sliderc_starter('sliderc_container');
diff --git a/demos/tab-slider-text-vertical.html b/demos/tab-slider-text-vertical.html
index 7654fac..cfdc0a1 100644
--- a/demos/tab-slider-text-vertical.html
+++ b/demos/tab-slider-text-vertical.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vertical Tab Slider Demo - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="background:#fff;">
     <!-- Jssor Slider Begin -->
@@ -71,7 +71,6 @@
             //responsive code end
         };
     </script>
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
     <div id="slider3_container" style="position: relative; top: 0px; left: 0px; width: 701px; height: 302px; background: #fff; overflow: hidden; ">
         
         <!-- Slides Container -->
@@ -170,7 +169,6 @@
         </div>
         <!--#endregion ThumbnailNavigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger -->
         <script>
             jssor_slider3_starter('slider3_container');
diff --git a/demos/tab-slider-text.html b/demos/tab-slider-text.html
index 5737a33..1dc6cbd 100644
--- a/demos/tab-slider-text.html
+++ b/demos/tab-slider-text.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Tab Slider Demo - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="background:#fff;">
     <!-- Jssor Slider Begin -->
@@ -70,7 +70,7 @@
             //responsive code end
         };
     </script>
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider2_container" style="position: relative; top: 0px; left: 0px; width: 602px; height: 331px; background: #fff; overflow: hidden; ">
         
         <!-- Slides Container -->
diff --git a/demos/tab-slider.html b/demos/tab-slider.html
index 104ebb8..fb37a16 100644
--- a/demos/tab-slider.html
+++ b/demos/tab-slider.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Tab Slider Demo - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
 </head>
 <body style="background:#fff;">
     <!-- Jssor Slider Begin -->
@@ -181,7 +181,7 @@
             <!-- Thumbnail Item Skin End -->
         </div>
         <!--#endregion ThumbnailNavigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/demos/thumbnail-navigator-with-arrows.html b/demos/thumbnail-navigator-with-arrows.html
index 501c35d..79c395d 100644
--- a/demos/thumbnail-navigator-with-arrows.html
+++ b/demos/thumbnail-navigator-with-arrows.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow for Thumbnail Navigator Slider Theme - Jssor Slider</title>
+    <title>Thumbnail Navigator with Arrows - Jssor Slider</title>
 </head>
 <body style="background:#fff;">
     <!-- Jssor Slider Begin -->
@@ -57,7 +57,7 @@
             //responsive code end
         };
     </script>
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 720px;
         height: 480px; overflow: hidden;">
 
@@ -262,7 +262,7 @@
             <!--#endregion Arrow Navigator Skin End -->
         </div>
         <!--#endregion Thumbnail Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/demos/tiled-menu-slider.html b/demos/tiled-menu-slider.html
index 0d0de81..ff757d7 100644
--- a/demos/tiled-menu-slider.html
+++ b/demos/tiled-menu-slider.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Tiled Menu Slider Demo - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title></title>
     <style>
         .appicon01
         {
@@ -104,7 +104,7 @@
         };
     </script>
 
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 800px; height: 350px; overflow: hidden; ">
         <!-- Loading Screen -->
         <div u="loading" style="position: absolute; top: 0px; left: 0px;">
@@ -292,7 +292,7 @@
             </div>
         </div>
         <!--#endregion Bullet Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/examples/auto-center-with-no-scale.html b/examples/auto-center-with-no-scale.html
index 1744bdd..206063b 100644
--- a/examples/auto-center-with-no-scale.html
+++ b/examples/auto-center-with-no-scale.html
@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>Auto Center with No Scale Example - Jssor Slider, Carousel, Slideshow</title>
+    <title>Auto Center with No Scale Example - Jssor Slider</title>
 </head>
 <body style="margin:0;font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -48,7 +48,7 @@
     <div style="position: relative; width: 100%; background-color: #003399; overflow: hidden;">
         <div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">
             <!-- Jssor Slider Begin -->
-            <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+            
             <div id="slider1_container" style="position: relative; margin: 0 auto;
         top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
                 <!-- Loading Screen -->
@@ -112,7 +112,7 @@
                     <div u="prototype"></div>
                 </div>
                 <!--#endregion Bullet Navigator Skin End -->
-                <a style="display: none" href="http://www.jssor.com">Image Slider</a>
+
                 <!-- Trigger -->
                 <script>
                     jssor_slider1_starter('slider1_container');
diff --git a/examples/full-screen-contain-in-window.html b/examples/full-screen-contain-in-window.html
index 4e899a5..d2a0996 100644
--- a/examples/full-screen-contain-in-window.html
+++ b/examples/full-screen-contain-in-window.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Full Screen Slider Contain in Window with Javascript Source Code - Jssor Slider</title>
+    <title>Full Screen Slider Contain in Window - Jssor Slider</title>
 </head>
 <body style="background:#fff; margin: 0px; overflow: hidden;">
     <script type="text/javascript" src="../js/jssor.slider.min.js"></script>
@@ -95,7 +95,8 @@
                         <img u=image src="../img/landscape/04.jpg" />
                     </div>
                 </div>
-                <a style="display: none" href="http://www.jssor.com">Image Slider</a>                <!-- Trigger -->
+
+                <!-- Trigger -->
                 <script>
                     jssor_slider1_starter('slider1_container');
                 </script>
diff --git a/examples/full-screen-cover-window.html b/examples/full-screen-cover-window.html
index bcaab7f..6486e53 100644
--- a/examples/full-screen-cover-window.html
+++ b/examples/full-screen-cover-window.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Full Screen Slider Cover Window with Javascript Source Code - Jssor Slider</title>
+    <title>Full Screen Slider Cover Window - Jssor Slider</title>
 </head>
 <body style="background:#fff; margin: 0px; overflow: hidden;">
     <script type="text/javascript" src="../js/jssor.slider.min.js"></script>
@@ -88,7 +88,8 @@
                         <img u=image src="../img/landscape/04.jpg" />
                     </div>
                 </div>
-                <a style="display: none" href="http://www.jssor.com">Image Slider</a>                <!-- Trigger -->
+                
+                <!-- Trigger -->
                 <script>
                     jssor_slider1_starter('slider1_container');
                 </script>
diff --git a/examples/layout-arrangement.html b/examples/layout-arrangement.html
index dae3286..9e8b459 100644
--- a/examples/layout-arrangement.html
+++ b/examples/layout-arrangement.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Layout Arrangement Example - Jssor Slider, Carousel, Slideshow</title>
+    <title>Layout Arrangement Example - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -26,7 +26,7 @@
             var jssor_slider1 = new $JssorSlider$(containerId, options);
         }
     </script>
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" class=slider1 title="Outer Container" style="position: relative; width: 800px; height: 400px; background-color: Gray;">
 
         <!-- Loading Screen -->
@@ -144,7 +144,7 @@
         <span u="arrowright" class="jssora03r" title="This is arrow right" style="bottom: 10px; right: 50px; background-color: darkgreen;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/examples/overlay-cover.html b/examples/overlay-cover.html
index f826890..6efc605 100644
--- a/examples/overlay-cover.html
+++ b/examples/overlay-cover.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Overlay Cover Example - Jssor Slider, Carousel, Slideshow</title>
+    <title>Overlay Cover Example - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -16,7 +16,7 @@
             var jssor_slider1 = new $JssorSlider$(containerId, options);
         };
     </script>
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px;
         height: 300px;">
         <!-- Loading Screen -->
@@ -53,7 +53,7 @@
         <div style="position:absolute;top:27px;left:-20px;width:50px;height:235px;background-image:url(img/cover/0001-L.png)"></div>
         <div style="position:absolute;top:27px;right:-20px;width:50px;height:235px;background-image:url(img/cover/0001-R.png)"></div>
         <!-- Cover End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/examples/play-pause-playto-goto-next-prev-autoplay-api.html b/examples/play-pause-playto-goto-next-prev-autoplay-api.html
index 7759561..41b721d 100644
--- a/examples/play-pause-playto-goto-next-prev-autoplay-api.html
+++ b/examples/play-pause-playto-goto-next-prev-autoplay-api.html
@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>Simple Slider Example - Jssor Slider, Carousel, Slideshow</title>
+    <title>Api Example - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -180,49 +180,49 @@
         <!-- Loading Screen -->
         <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
             <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
-            <div style="position: absolute; display: block; background: url(/theme/img/loading.gif) no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
+            <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
         </div>
         <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden;">
             <div data-p="112.50" style="display: none;">
-                <img data-u="image" src="/demos/img/photography/002.jpg" />
+                <img data-u="image" src="../img/photography/002.jpg" />
                 <div data-u="caption" data-t="0" style="position: absolute; top: 320px; left: 30px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">mobile ready, touch swipe</div>
             </div>
             <div data-p="112.50" style="display: none;">
-                <img data-u="image" src="/demos/img/photography/007.jpg" />
+                <img data-u="image" src="../img/photography/007.jpg" />
                 <div data-u="caption" data-t="1" data-3d="1" style="position: absolute; top: -50px; left: 125px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">time lined layer animation</div>
             </div>
             <div data-p="112.50" style="display: none;">
-                <img data-u="image" src="/demos/img/photography/003.jpg" />
+                <img data-u="image" src="../img/photography/003.jpg" />
                 <div data-u="caption" data-t="2" style="position: absolute; top: 30px; left: -380px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">finger catchable right to left</div>
             </div>
             <div data-p="112.50" style="display: none;">
-                <img data-u="image" src="/demos/img/photography/004.jpg" />
+                <img data-u="image" src="../img/photography/004.jpg" />
                 <div data-u="caption" data-t="3" style="position: absolute; top: 30px; left: 30px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">responsive, scale smoothly</div>
             </div>
             <div data-p="112.50" style="display: none;">
-                <img data-u="image" src="/demos/img/photography/005.jpg" />
+                <img data-u="image" src="../img/photography/005.jpg" />
                 <div data-u="caption" data-t="4" style="position: absolute; top: 30px; left: 30px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.6); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">image, text, and custom layers</div>
             </div>
             <div data-p="112.50" style="display: none;">
-                <img data-u="image" src="/demos/img/photography/006.jpg" />
+                <img data-u="image" src="../img/photography/006.jpg" />
                 <div data-u="caption" data-t="5" style="position: absolute; top: 30px; left: 600px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">tons of transition type</div>
             </div>
             <div data-p="112.50" style="display: none;">
-                <img data-u="image" src="/demos/img/photography/009.jpg" />
+                <img data-u="image" src="../img/photography/009.jpg" />
                 <div data-u="caption" data-t="6" style="position: absolute; top: 30px; left: 30px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">visual slider maker</div>
             </div>
             <div data-b="0" data-p="112.50" style="display: none;">
-                <img data-u="image" src="/demos/img/photography/008.jpg" />
+                <img data-u="image" src="../img/photography/008.jpg" />
                 <div data-u="caption" data-t="7" style="position: absolute; top: -50px; left: 30px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">play in and play out</div>
             </div>
             <div data-p="112.50" style="display: none;">
-                <img data-u="image" src="/demos/img/photography/011.jpg" />
+                <img data-u="image" src="../img/photography/011.jpg" />
                 <div data-u="caption" data-t="8" data-3d="1" style="position: absolute; top: 25px; left: 150px; width: 250px; height: 250px; background-color: rgba(40,177,255,0.6); overflow: hidden;">
                     <div data-u="caption" data-t="9" style="position: absolute; top: 100px; left: 25px; width: 200px; height: 50px; font-size: 24px; line-height: 50px;">A Child Layer</div>
                 </div>
             </div>
             <div data-p="112.50" style="display: none;">
-                <img data-u="image" src="/demos/img/photography/010.jpg" />
+                <img data-u="image" src="../img/photography/010.jpg" />
                 <div data-u="caption" data-t="10" data-3d="1" style="position: absolute; top: 25px; left: 100px; width: 250px; height: 250px; background-color: rgba(40,177,255,0.6);">
                     <div style="margin: 15px; font-size: 20px;">
                         <p>This is full customized content layer.<br />
@@ -234,7 +234,7 @@
                         <a href="http://www.jssor.com">
                             a link
                         </a> or an image
-                        <img src="/demos/img/icons/icon_chrome.png" /> here.
+                        <img src="../img/icons/icon_chrome.png" /> here.
                     </div>
                 </div>
             </div>
@@ -246,7 +246,6 @@
         <!-- Arrow Navigator -->
         <span data-u="arrowleft" class="jssora02l" style="top:0px;left:8px;width:55px;height:55px;" data-autocenter="2"></span>
         <span data-u="arrowright" class="jssora02r" style="top:0px;right:8px;width:55px;height:55px;" data-autocenter="2"></span>
-        <a href="http://www.jssor.com" style="display:none">javascript slider</a>
     </div>
 
     <!-- #endregion Jssor Slider End -->
diff --git a/examples/simple-slider.html b/examples/simple-slider.html
index d179a43..54b8784 100644
--- a/examples/simple-slider.html
+++ b/examples/simple-slider.html
@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>Simple Slider Example - Jssor Slider, Carousel, Slideshow</title>
+    <title>Simple Slider Example - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -30,7 +30,6 @@
             <div><img u="image" src="../img/landscape/07.jpg" /></div>
             <div><img u="image" src="../img/landscape/08.jpg" /></div>
         </div>
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/examples/slide-definition.html b/examples/slide-definition.html
index 1a62948..4f9fb71 100644
--- a/examples/slide-definition.html
+++ b/examples/slide-definition.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Slide Definition Example - Jssor Slider, Carousel, Slideshow</title>
+    <title>Slide Definition Example - Jssor Slider</title>
 </head>
 <body>
     <!-- Jssor Slider Begin -->
@@ -20,7 +20,7 @@
         }
     </script>
 
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px; height: 300px;">
     
         <!-- Loading Screen -->
@@ -43,7 +43,7 @@
                 </div>
             </div>
         </div>
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/examples/slider-with-arrow-navigator.html b/examples/slider-with-arrow-navigator.html
index c4e4bcb..69addd3 100644
--- a/examples/slider-with-arrow-navigator.html
+++ b/examples/slider-with-arrow-navigator.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Example - Jssor Slider, Carousel, Slideshow</title>
+    <title>Arrow Navigator Example - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -23,7 +23,7 @@
             var jssor_slider1 = new $JssorSlider$(containerId, options);
         };
     </script>
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px;
         height: 300px; ">
 
@@ -80,7 +80,7 @@
         <span u="arrowright" class="jssora03r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/examples/slider-with-bullet-navigator.html b/examples/slider-with-bullet-navigator.html
index d1ca766..04e7ed6 100644
--- a/examples/slider-with-bullet-navigator.html
+++ b/examples/slider-with-bullet-navigator.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bullet Navigator Example - Jssor Slider, Carousel, Slideshow</title>
+    <title>Bullet Navigator Example - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -28,7 +28,7 @@
             var jssor_slider1 = new $JssorSlider$(containerId, options);
         };
     </script>
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px;
         height: 300px;">
 
@@ -94,7 +94,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/examples/slider-with-fixed-static-element.html b/examples/slider-with-fixed-static-element.html
index 161115e..5828593 100644
--- a/examples/slider-with-fixed-static-element.html
+++ b/examples/slider-with-fixed-static-element.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Simple Slider Example - Jssor Slider, Carousel, Slideshow</title>
+    <title>Slider with Fixed Static Element - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <!-- Jssor Slider Begin -->
@@ -48,7 +48,7 @@
                 <!-- reference: http://www.jssor.com/development/slider-with-fixed-static-element.html -->
             </div>
         </div>
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/examples/slider-with-progress-bar-api.html b/examples/slider-with-progress-bar-api.html
index e5758c8..399a2ed 100644
--- a/examples/slider-with-progress-bar-api.html
+++ b/examples/slider-with-progress-bar-api.html
@@ -7,7 +7,7 @@
 </head>
 <body style="padding:0px; margin:0px; background-color:#fff;font-family:Arial, sans-serif">
 
-    <!-- #region Jssor Slider Begin -->>
+    <!-- #region Jssor Slider Begin -->
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
     <script type="text/javascript">
         jssor_1_slider_init = function() {
@@ -149,7 +149,6 @@
                     </div>
                 </div>
             </div>
-            <a data-u="any" href="http://www.jssor.com" style="display:none">jQuery Slider</a>
             <div id="progress-element" u="progress" style="position: absolute; left: 0; bottom: 20px; width: 0%; height: 5px; background-color: rgba(255,255,255,0.7); z-index: 100;"></div>
         </div>
         <!-- Arrow Navigator -->
diff --git a/examples/slider-with-slideshow.html b/examples/slider-with-slideshow.html
index 823759d..7fadc64 100644
--- a/examples/slider-with-slideshow.html
+++ b/examples/slider-with-slideshow.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Slider with Slideshow Demo - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Slider with Slideshow - Jssor Slider</title>
 </head>
 <body style="background:#fff;">
     <!-- Jssor Slider Begin -->
@@ -34,7 +34,7 @@
             var jssor_slider1 = new $JssorSlider$(containerId, options);
         }
     </script>
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position:relative;width:600px;height:300px;">
 
         <!-- Loading Screen -->
@@ -63,7 +63,7 @@
                 <img u=image src="../img/landscape/04.jpg" />
             </div>
         </div>
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/examples/sync-2-sliders-api.html b/examples/sync-2-sliders-api.html
index c18a0bf..76d43f1 100644
--- a/examples/sync-2-sliders-api.html
+++ b/examples/sync-2-sliders-api.html
@@ -144,7 +144,7 @@
     </script>
 
     <!-- Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden; ">
 
         <!-- Loading Screen -->
@@ -306,7 +306,7 @@
     <br />
 
     <!-- Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider2_container" style="position: relative; top: 0px; left: 0px; width: 809px; height: 150px; overflow: hidden; ">
 
         <!-- Loading Screen -->
diff --git a/examples/ui-definition-1.html b/examples/ui-definition-1.html
index a5aacb5..bb74640 100644
--- a/examples/ui-definition-1.html
+++ b/examples/ui-definition-1.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>UI Definition Demo 1 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>UI Definition Demo 1 - Jssor Slider</title>
 </head>
 <body style="background-color: #ffffff; font-family: Arial, Verdana, Sans-Serif;">
     <!-- Jssor Slider Begin -->
@@ -87,7 +87,7 @@
             //responsive code end
         }
     </script>
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px;">
 
@@ -232,7 +232,7 @@
         <!-- Arrow Right -->
         <span u="arrowright" class="jssora05r" style="top: 123px; right: 8px;">
         </span>
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             jssor_slider1_starter('slider1_container');
diff --git a/examples/ui-definition-2.html b/examples/ui-definition-2.html
index 8b6e649..5237444 100644
--- a/examples/ui-definition-2.html
+++ b/examples/ui-definition-2.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>UI Definition Demo 2 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>UI Definition Demo 2 - Jssor Slider</title>
 </head>
 <body style="background-color: #191919;">
     <!-- Jssor Slider Begin -->
@@ -73,7 +73,7 @@
             //responsive code end
         }
     </script>
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider2_container" style="position: relative; width: 800px;
         height: 400px; overflow: hidden;">
 
@@ -94,7 +94,7 @@
                 <img u=image src="../img/landscape/01.jpg" />
                 <div u="thumb">This is thumbnail as well.<br />
                 Do you know that you can place thumbnail navigator anywhere?<br /><br />
-                <img src="../img/icon-slider-12-jquery.png" style="float: left; margin-right: 8px;" />
+                <img src="../img/icons/icon_chrome.png" style="float: left; margin-right: 8px;" />
                 Do you know that thumbnail can be any format?
                 </div>
             </div>
@@ -231,7 +231,7 @@
         <span u="arrowright" class="jssora05r" style="bottom: 60px; right: 330px">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             jssor_slider2_starter('slider2_container');
diff --git a/examples/validated-html.html b/examples/validated-html.html
index a9ca8aa..f6091f9 100644
--- a/examples/validated-html.html
+++ b/examples/validated-html.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Full Width Slider (html5 validation demostration) - Jssor Slider, Carousel, Slideshow</title>
+    <title>html5 validation - Jssor Slider</title>
 
     <!-- Bullet Navigator Style -->
     <style>
@@ -147,7 +147,7 @@
         };
     </script>
 
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; margin: 0 auto;
         top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
         <!-- Loading Screen -->
@@ -164,20 +164,6 @@
             height: 500px; overflow: hidden;">
             <div>
                 <img data-u="image" src="../img/1920/red.jpg" alt="" />
-                <div data-u="caption" data-t="NO" data-t3="RTT|2" data-r3="137.5%" data-du3="3000" data-d3="500" style="position: absolute; width: 445px; height: 300px; top: 100px; left: 600px;">
-                    <img src="../img/new-site/c-phone.png" style="position: absolute; width: 445px; height: 300px; top: 0px; left: 0px;" alt="" />
-                    <img data-u="caption" data-t="CLIP|LR" data-du="4000" data-t2="NO" src="../img/new-site/c-jssor-slider.png" style="position: absolute; width: 102px; height: 78px; top: 70px; left: 130px;" alt="" />
-                    <img data-u="caption" data-t="ZMF|10" data-t2="NO" src="../img/new-site/c-text.png" style="position: absolute; width: 80px; height: 53px; top: 153px; left: 163px;" alt="" />
-                    <img data-u="caption" data-t="RTT|10" data-t2="NO" src="../img/new-site/c-fruit.png" style="position: absolute; width: 140px; height: 90px; top: 60px; left: 220px;" alt="" />
-                    <img data-u="caption" data-t="T" data-du="4000" data-t2="NO" src="../img/new-site/c-navigator.png" style="position: absolute; width: 200px; height: 155px; top: 57px; left: 121px;" alt="" />
-                </div>
-                <div data-u="caption" data-t="RTT|2" data-r="-75%" data-du="1600" data-d="2500" data-t2="NO" style="position: absolute; width: 470px; height: 220px; top: 120px; left: 650px;">
-                    <img src="../img/new-site/c-phone-horizontal.png" style="position: absolute; width: 470px; height: 220px; top: 0px; left: 0px;" alt="" />
-                    <img data-u="caption" data-t3="MCLIP|L" data-du3="2000" src="../img/new-site/c-slide-1.jpg" style="position: absolute; width: 379px; height: 213px; top: 4px; left: 45px;" alt="" />
-                    <img data-u="caption" data-t="MCLIP|R" data-du="2000" data-t2="NO" src="../img/new-site/c-slide-3.jpg" style="position: absolute; width: 379px; height: 213px; top: 4px; left: 45px;" alt="" />
-                    <img data-u="caption" data-t="RTTL|BR" data-x="500%" data-y="500%" data-du="1000" data-d="-3000" data-r="-30%" data-t3="L" data-x3="70%" data-du3="1600" src="../img/new-site/c-finger-pointing.png" style="position: absolute; width: 257px; height: 300px; top: 80px; left: 200px;" alt="" />
-                    <img src="../img/new-site/c-navigator-horizontal.png" style="position: absolute; width: 379px; height: 213px; top: 4px; left: 45px;" alt="" />
-                </div>
                 <div style="position: absolute; width: 480px; height: 120px; top: 30px; left: 30px; padding: 5px;
                     text-align: left; line-height: 60px; text-transform: uppercase; font-size: 50px;
                         color: #FFFFFF;">Touch Swipe Slider
@@ -230,7 +216,7 @@
         <span u="arrowright" class="jssora21r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
     </div>
     <!-- Trigger -->
     <script>
diff --git a/package.json b/package.json
index 5195c24..0785db8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jssor-slider",
-  "version": "23.0.2",
+  "version": "23.0.3",
   "description": "Responsive Javascript Image/Content Slider/Slideshow/Carousel/Gallery/Banner/HTML5 AD",
   "main": "js/jssor.slider.min.js",
   "homepage": "http://www.jssor.com",
@@ -39,16 +39,11 @@
   "files": [
     "js/",
     "skin/",
-    "transitions/",
     "README.md",
-    "lib/",
-    
-    "img/alila/",
-    "img/landscape/",
-    "img/motor/",
-    "img/nested-thumb/",
-    "img/photography/",
-    "img/travel/",
+    "bower.json",
+    "component.json",
+    "package.json",
+    "MIT-LICENSE.txt",
 
     "img/a01.png",
     "img/a02.png",
@@ -94,4 +89,4 @@
     "img/loading2.gif",
     "img/loading3.gif"
   ]
-}
+}
\ No newline at end of file
diff --git a/skin/arrow-01.source.html b/skin/arrow-01.source.html
index 6bb5b8a..147929f 100644
--- a/skin/arrow-01.source.html
+++ b/skin/arrow-01.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 01 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 01 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -28,17 +28,17 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -83,7 +83,7 @@
         <span u="arrowright" class="jssora01r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-02.source.html b/skin/arrow-02.source.html
index 1bbbdd7..88cb97a 100644
--- a/skin/arrow-02.source.html
+++ b/skin/arrow-02.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 02 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 02 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -27,17 +27,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -81,7 +81,7 @@
         <span u="arrowright" class="jssora02r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-03.source.html b/skin/arrow-03.source.html
index 9ea19bf..1acf821 100644
--- a/skin/arrow-03.source.html
+++ b/skin/arrow-03.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 03 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 03 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -27,17 +27,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -81,7 +81,7 @@
         <span u="arrowright" class="jssora03r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-04.source.html b/skin/arrow-04.source.html
index c3389b6..ec48fd8 100644
--- a/skin/arrow-04.source.html
+++ b/skin/arrow-04.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 04 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 04 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -27,17 +27,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/motor/002.jpg" /></div>
-            <div><img u="image" src="../img/motor/003.jpg" /></div>
-            <div><img u="image" src="../img/motor/004.jpg" /></div>
-            <div><img u="image" src="../img/motor/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -81,7 +81,7 @@
         <span u="arrowright" class="jssora04r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-05.source.html b/skin/arrow-05.source.html
index 3d88f35..6bb022d 100644
--- a/skin/arrow-05.source.html
+++ b/skin/arrow-05.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 05 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 05 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -27,17 +27,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -81,7 +81,7 @@
         <span u="arrowright" class="jssora05r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-06.source.html b/skin/arrow-06.source.html
index b5e9172..f15e440 100644
--- a/skin/arrow-06.source.html
+++ b/skin/arrow-06.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 06 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 06 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -27,17 +27,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -81,7 +81,7 @@
         <span u="arrowright" class="jssora06r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-07.source.html b/skin/arrow-07.source.html
index 295bd88..4730fa1 100644
--- a/skin/arrow-07.source.html
+++ b/skin/arrow-07.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 07 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 07 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -28,17 +28,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -82,7 +82,7 @@
         <span u="arrowright" class="jssora07r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-08.source.html b/skin/arrow-08.source.html
index 7690672..aa966e9 100644
--- a/skin/arrow-08.source.html
+++ b/skin/arrow-08.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 08 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 08 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -29,17 +29,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -85,7 +85,7 @@
         <span u="arrowright" class="jssora08r" style="bottom: 8px; left: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-09.source.html b/skin/arrow-09.source.html
index 3c0146f..94f0bdd 100644
--- a/skin/arrow-09.source.html
+++ b/skin/arrow-09.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 09 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 09 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -28,17 +28,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -84,7 +84,7 @@
         <span u="arrowright" class="jssora09r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-10.source.html b/skin/arrow-10.source.html
index fd94a51..4a63b53 100644
--- a/skin/arrow-10.source.html
+++ b/skin/arrow-10.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 10 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 10 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -27,17 +27,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -81,7 +81,7 @@
         <span u="arrowright" class="jssora10r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-11.source.html b/skin/arrow-11.source.html
index 5de2c51..e9285a6 100644
--- a/skin/arrow-11.source.html
+++ b/skin/arrow-11.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 11 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 11 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -27,17 +27,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -81,7 +81,7 @@
         <span u="arrowright" class="jssora11r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-12.source.html b/skin/arrow-12.source.html
index 621c050..d3f5c89 100644
--- a/skin/arrow-12.source.html
+++ b/skin/arrow-12.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 12 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 12 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -27,17 +27,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -81,7 +81,7 @@
         <span u="arrowright" class="jssora12r" style="top: 123px; right: 0px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-13.source.html b/skin/arrow-13.source.html
index 2e4e1e3..14ba782 100644
--- a/skin/arrow-13.source.html
+++ b/skin/arrow-13.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 13 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 13 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -27,17 +27,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -81,7 +81,7 @@
         <span u="arrowright" class="jssora13r" style="top: 123px; right: 0px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-14.source.html b/skin/arrow-14.source.html
index dcbc71d..296984d 100644
--- a/skin/arrow-14.source.html
+++ b/skin/arrow-14.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 14 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 14 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -27,17 +27,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -81,7 +81,7 @@
         <span u="arrowright" class="jssora14r" style="top: 123px; right: 0px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-15.source.html b/skin/arrow-15.source.html
index 32922df..2b03d36 100644
--- a/skin/arrow-15.source.html
+++ b/skin/arrow-15.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 15 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 15 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -27,17 +27,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -81,7 +81,7 @@
         <span u="arrowright" class="jssora15r" style="top: 123px; right: 18px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-16.source.html b/skin/arrow-16.source.html
index bd789b1..a289fcd 100644
--- a/skin/arrow-16.source.html
+++ b/skin/arrow-16.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 16 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 16 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -27,17 +27,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -81,7 +81,7 @@
         <span u="arrowright" class="jssora16r" style="top: 123px; right: 18px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-18.source.html b/skin/arrow-18.source.html
index 9b5fd60..aec1748 100644
--- a/skin/arrow-18.source.html
+++ b/skin/arrow-18.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 18 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 18 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -27,17 +27,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -81,7 +81,7 @@
         <span u="arrowright" class="jssora18r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-19.source.html b/skin/arrow-19.source.html
index b344dfe..2401b0f 100644
--- a/skin/arrow-19.source.html
+++ b/skin/arrow-19.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 19 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 19 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -27,17 +27,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -81,7 +81,7 @@
         <span u="arrowright" class="jssora19r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-20.source.html b/skin/arrow-20.source.html
index cfbb5f0..ff79377 100644
--- a/skin/arrow-20.source.html
+++ b/skin/arrow-20.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 20 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 20 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -27,17 +27,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -81,7 +81,7 @@
         <span u="arrowright" class="jssora20r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-21.source.html b/skin/arrow-21.source.html
index a06e176..4cfd33d 100644
--- a/skin/arrow-21.source.html
+++ b/skin/arrow-21.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 21 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 21 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -27,17 +27,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -81,7 +81,7 @@
         <span u="arrowright" class="jssora21r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/arrow-22.source.html b/skin/arrow-22.source.html
index e7c1d29..26bdf64 100644
--- a/skin/arrow-22.source.html
+++ b/skin/arrow-22.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Arrow Navigator Skin 22 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Arrow Navigator Skin 22 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -27,17 +27,17 @@
         };
     </script>
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Arrow Navigator Skin Begin -->
@@ -81,7 +81,7 @@
         <span u="arrowright" class="jssora22r" style="top: 123px; right: 8px;">
         </span>
         <!--#endregion Arrow Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/bullet-01.source.html b/skin/bullet-01.source.html
index c71b3db..92bd8e0 100644
--- a/skin/bullet-01.source.html
+++ b/skin/bullet-01.source.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Bullet Navigator Skin 01 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Bullet Navigator Skin 01 - Jssor Slider</title>
 </head> 
 <body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -31,17 +31,17 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
         
         <!--#region Bullet Navigator Skin Begin -->
@@ -81,7 +81,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger --> 
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/bullet-02.source.html b/skin/bullet-02.source.html
index 89bc30d..291e303 100644
--- a/skin/bullet-02.source.html
+++ b/skin/bullet-02.source.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Bullet Navigator Skin 02 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Bullet Navigator Skin 02 - Jssor Slider</title>
 </head> 
 <body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -31,17 +31,17 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
         
         <!--#region Bullet Navigator Skin Begin -->
@@ -83,7 +83,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger --> 
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/bullet-03.source.html b/skin/bullet-03.source.html
index d260c0c..92f668d 100644
--- a/skin/bullet-03.source.html
+++ b/skin/bullet-03.source.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Bullet Navigator Skin 03 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Bullet Navigator Skin 03 - Jssor Slider</title>
 </head> 
 <body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -31,17 +31,17 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Bullet Navigator Skin Begin -->
@@ -83,7 +83,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger --> 
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/bullet-05.source.html b/skin/bullet-05.source.html
index 090ec09..7217cfb 100644
--- a/skin/bullet-05.source.html
+++ b/skin/bullet-05.source.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Bullet Navigator Skin 05 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Bullet Navigator Skin 05 - Jssor Slider</title>
 </head> 
 <body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -31,17 +31,17 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Bullet Navigator Skin Begin -->
@@ -79,7 +79,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger --> 
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/bullet-06.source.html b/skin/bullet-06.source.html
index d4eab26..6cf8eda 100644
--- a/skin/bullet-06.source.html
+++ b/skin/bullet-06.source.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Bullet Navigator Skin 06 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Bullet Navigator Skin 06 - Jssor Slider</title>
 </head> 
 <body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -32,7 +32,7 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 960px;
         height: 380px; overflow: hidden;">
  
@@ -80,7 +80,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger --> 
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/bullet-07.source.html b/skin/bullet-07.source.html
index 891cae1..d5f0955 100644
--- a/skin/bullet-07.source.html
+++ b/skin/bullet-07.source.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Bullet Navigator Skin 07 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Bullet Navigator Skin 07 - Jssor Slider</title>
 </head> 
 <body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -32,7 +32,7 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 960px;
         height: 380px; overflow: hidden;">
  
@@ -80,7 +80,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger --> 
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/bullet-09.source.html b/skin/bullet-09.source.html
index 4bd2e6c..1ba9459 100644
--- a/skin/bullet-09.source.html
+++ b/skin/bullet-09.source.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Bullet Navigator Skin 09 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Bullet Navigator Skin 09 - Jssor Slider</title>
 </head> 
 <body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -31,17 +31,17 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
         
         <!--#region Bullet Navigator Skin Begin -->
@@ -81,7 +81,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger --> 
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/bullet-10.source.html b/skin/bullet-10.source.html
index 7b87d4c..8a1d23b 100644
--- a/skin/bullet-10.source.html
+++ b/skin/bullet-10.source.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Bullet Navigator Skin 10 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Bullet Navigator Skin 10 - Jssor Slider</title>
 </head> 
 <body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -31,17 +31,17 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Bullet Navigator Skin Begin -->
@@ -79,7 +79,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger --> 
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/bullet-11.source.html b/skin/bullet-11.source.html
index ae9f5ea..60ba341 100644
--- a/skin/bullet-11.source.html
+++ b/skin/bullet-11.source.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Bullet Navigator Skin 11 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Bullet Navigator Skin 11 - Jssor Slider</title>
 </head> 
 <body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -31,17 +31,17 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Bullet Navigator Skin Begin -->
@@ -79,7 +79,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger --> 
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/bullet-12.source.html b/skin/bullet-12.source.html
index c78b89d..46ae0bd 100644
--- a/skin/bullet-12.source.html
+++ b/skin/bullet-12.source.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Bullet Navigator Skin 12 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Bullet Navigator Skin 12 - Jssor Slider</title>
 </head> 
 <body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -31,17 +31,17 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Bullet Navigator Skin Begin -->
@@ -79,7 +79,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger --> 
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/bullet-13.source.html b/skin/bullet-13.source.html
index 931f819..400e0d2 100644
--- a/skin/bullet-13.source.html
+++ b/skin/bullet-13.source.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Bullet Navigator Skin 13 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Bullet Navigator Skin 13 - Jssor Slider</title>
 </head> 
 <body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -31,17 +31,17 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Bullet Navigator Skin Begin -->
@@ -79,7 +79,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger --> 
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/bullet-14.source.html b/skin/bullet-14.source.html
index 493c063..d7cb88e 100644
--- a/skin/bullet-14.source.html
+++ b/skin/bullet-14.source.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Bullet Navigator Skin 14 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Bullet Navigator Skin 14 - Jssor Slider</title>
 </head> 
 <body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -31,17 +31,17 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Bullet Navigator Skin Begin -->
@@ -79,7 +79,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger --> 
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/bullet-16.source.html b/skin/bullet-16.source.html
index 437958a..a73683d 100644
--- a/skin/bullet-16.source.html
+++ b/skin/bullet-16.source.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Bullet Navigator Skin 16 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Bullet Navigator Skin 16 - Jssor Slider</title>
 </head> 
 <body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -31,17 +31,17 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Bullet Navigator Skin Begin -->
@@ -79,7 +79,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger --> 
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/bullet-17.source.html b/skin/bullet-17.source.html
index 308eeba..c357798 100644
--- a/skin/bullet-17.source.html
+++ b/skin/bullet-17.source.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Bullet Navigator Skin 17 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Bullet Navigator Skin 17 - Jssor Slider</title>
 </head> 
 <body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -31,17 +31,17 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Bullet Navigator Skin Begin -->
@@ -79,7 +79,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger --> 
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/bullet-18.source.html b/skin/bullet-18.source.html
index 2e5d7ab..68b2fce 100644
--- a/skin/bullet-18.source.html
+++ b/skin/bullet-18.source.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Bullet Navigator Skin 18 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Bullet Navigator Skin 18 - Jssor Slider</title>
 </head> 
 <body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -31,17 +31,17 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Bullet Navigator Skin Begin -->
@@ -86,7 +86,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger --> 
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/bullet-20.source.html b/skin/bullet-20.source.html
index dcc2a3e..964d5d2 100644
--- a/skin/bullet-20.source.html
+++ b/skin/bullet-20.source.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Bullet Navigator Skin 20 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Bullet Navigator Skin 20 - Jssor Slider</title>
 </head> 
 <body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -31,17 +31,17 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Bullet Navigator Skin Begin -->
@@ -83,7 +83,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger --> 
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/bullet-21.source.html b/skin/bullet-21.source.html
index 306c189..55e895c 100644
--- a/skin/bullet-21.source.html
+++ b/skin/bullet-21.source.html
@@ -3,7 +3,7 @@
 <head> 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-    <title>Bullet Navigator Skin 21 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Bullet Navigator Skin 21 - Jssor Slider</title>
 </head> 
 <body style="margin:0;padding:0; background:#fff; font-family: Arial, Verdana, Sans-Serif;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -31,17 +31,17 @@
     </script>
 
     <!--#region Jssor Slider Begin -->
-    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
+    
     <div id="slider1_container" style="position: relative; width: 600px;
         height: 300px; overflow: hidden;">
  
         <!-- Slides Container --> 
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
-            <div><img u="image" src="../img/photography/002.jpg" /></div>
-            <div><img u="image" src="../img/photography/003.jpg" /></div>
-            <div><img u="image" src="../img/photography/004.jpg" /></div>
-            <div><img u="image" src="../img/photography/005.jpg" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
+            <div><img u="image" src="img/slide.png" /></div>
         </div>
 
         <!--#region Bullet Navigator Skin Begin -->
@@ -83,7 +83,6 @@
         </div>
         <!--#endregion Bullet Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger --> 
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/img/slide.png b/skin/img/slide.png
new file mode 100644
index 0000000000000000000000000000000000000000..dda60a54b040d05d5dbad25414d70d4cfafb86c7
GIT binary patch
literal 1966
zcmc(gYfzJC7RLh^P!pt}Kn0DqT<ma*?Q#<cRFT1mpn|~{ESMk{B^wa}Sx5}ZvIWG7
zwpeZo6xui?Z-7@W0Ro93hzJ-{xg;7EvX~}<p(vLC5tD3SreAkvKlRgj&i_2~%x}(z
z-*e+sM5y_8yX`O-%p7~{Xe10~48UMUZd*+Z$rp0WFNU%^GX%(tN=wfC2O%Q~b~rID
zA!$FBL`X@BOd=%aqz@(q7%m+=b>d7&V`HOIsjRN9E-EUL$z<=}zwhho6N|;2ot-^B
zJ#;!<Bob*fnxUZ~y<X4daubm2C>YFa7xw7kGuhI)Nfo8u4|e^<h;yP#IZr=<nrO(*
z+XB^i!B<zwnQh=C;&aCZ#TDNkti>NiZxv79;;0uxW6^~YiS2A1mxqd<DrwRkyFI5s
zvx4@GnD`5*CSmw(Zh7!Bz7=2`X1viDS|`X6+ET{<;jap}*cf08C>sz~K(6)w<Wj$5
zMio8OyF9s*dW{C5>fTO_b+O+%*V^d<_dM5+TqS?A93gAwJ(P)P4?l=#TAglThu9tb
zZ6&JT)Gd^?J`8;jMCQZA)rBAvJ?0GYIm5WQVJAcVnRu4;k@W?_4YIlG@g(Zf+NXez
zt-OhCieR-L5cG;>ULUbT731^TTU>m8;Mma_U$Jm`Y9v%(67AA*6Q7qQ*$P&rOY-1i
zOp1UC4}kcw)W*+(<}MGMgdtdrYl?%kV<rezq2RcjtVjjoMm^ODKo(h@39*sjkiPO!
z?Tfp3dd$VDh8XX-EKagzFvbjw=xbfCsBAM4JEx|gNhQ6k&abPQ9)!1@Z)<@#%<68v
zx%i3cJ9_JDy<5Tftv5R;F+f&DRqTuF?ZP9u((&5_1|@^}*pub)w}E<NVriC^8iOD(
zo;lvf0&x^30hiydAWs(?3BLl$Tb-Go6r9fShpPlQ`@a5GTba~URX+X<UDJsWf6dV9
z4rco|8{T~HF!pBWCAioIY_e6l0qXXx(f57(<ApeF#oDTBDShUq&(q!yledzc2bi<D
zNY`+SNhTKfjC}F<=uY!q>94FV2Z<FxQaT*=G6J91EJo^EyF>BXb1|b}W=lEGmY?dJ
zJn@m<OfhW5Vg%f~ucd|%M<~@mL74mJVc^h??t7N3()NZ9KTH{4I&;{yJ25N4ec2cw
z<(5fiGJ;*`E8q%ka5}~tj!mD9oyh?h{npbq(QbS1R#o08!jq<<ADNWF&A|;XwL6RL
zdrMhDtHf&soKI3DM?`(aPUb#$IE#ZG^DE@(B~p+0yL3htBpuPX#`hgp46D}nCSu-{
z<jy90)<*ZbL|B<iEDA<F`Lmw`-MU|1ie2$^i=U+-5HlC+4)}9<*3o>I=FYSxLVpNE
zg;sDCzKPf2ViVJI^3yf|9`lngCj@B&wC4Y+B(sxqkU>>XHIMk)!w*61$4rq-XIKDA
z-EhTDTv9F%*vGp30x3-OV$qr|z#+<5Jyt=$u-KW7&%W6YCx*6%H3d!?fxd)kWm!b)
zgzHZykzj0w$9JIFJH`4nAD=qa;^T@YQ)0JmgA`uaZe4C4k>9~yuIacEyfS$KS!Y5F
z8`pkJ{kBbKJbV31ca7Vr`x2g9v8$U`;`MK%=P1j9aSOE_ps~!s)GWof?6i%uG*U@W
zEg6V8)xx){PS7IodM%O~@a|~o`hTE-IxYF{m+!s0D(_K3@o-}Hqz5^*`(NXUt4_1h
zDVOS7s1^^3{L{wM+=}mUQ(iep)iTGYu+B4QDGeaVl5#ua;%~mxgwM=VwM+dD!v2wB
zFn_R~YcCi(<b6Vh3ryRek(KBtG9~h*^G=1iYu+=>yL%TX4!j?s=lKnUq=cb)?@|xm
zfz)ha=aNuD2_iWQMTq%8aUbWU)obD~n4MsK;IiWb9o46Csg-o0ZL*3z=Q7pNMN%TX
zgDW_}aldgT?%EoB{dtXlG^lp1L!i&mPY9}}piIfVJAwVk5$7-!k82+x+H+~!zTH42
zCXLcVS}Z*gKL3CX@1k{7PUFA@tk>_WIkozFGUR<pm2vWwyvU#2wx&ZBQ<u@D_LhuM
z-;Zsw=;~VHRgG}hz^ZKZY*fHRLa`t5_Y`#3qS;G5`opWUvs*Vry{Txt;b2hZrY7^8
zHk(azZa5u}-4Og=5gH>l0RMFPqwW6(7ei(iMomQ5LOViZMuKT{|2+gQ_xSBUc8aHu
h83v(e^xF=?{8)my^{a<U4Sy>P8xnD}=?MOx{{@2;rPBZa

literal 0
HcmV?d00001

diff --git a/skin/img/thumb.png b/skin/img/thumb.png
new file mode 100644
index 0000000000000000000000000000000000000000..506791fe53ca52ecb96f27373e71693e3e327fbf
GIT binary patch
literal 1634
zcmd5-`#aMM9R8w^)=4FjGL@l=+vK**5V?*Kk4rKYYmdZoo%=jGo|5QsIg1XBG~}{~
z4${_SIC7~_E@Lip$#re6ZMGf#4d?uDe)zoa^ZxSw@IKG`e$w4s?GGp%R{#LufTM%$
zm0f21I(gY$yfSu2ZkJS}F8f4z;BQ3{ZbV=K>mdA1tcGLg4IK6g_C`=#co!A{0J3`=
zZLK|HN0(WCcqQx!##F&xC%>1qZaU?IRvN7`Q;JeDwh&&5ot^<tjVHA&jrlW{a~Y3-
z*rjTHwml`Qnd*65N9p`5h;qM<*xkSy9e-X+VI@8Ly*9M5zJ5m3`_4$1qizlx%(f~z
zx2<gjXaI_UJg^6l2BcDe|6Kkn*OWzHpKkd3I*ZUaWmfZW(Rjhz-up6LchUHm_ZZnr
zG&=X`Z<7pqRJV~rapa;2eqEbD--g1y^<_#h6OCsT%dFlkj-^$XkA3p0aquIl<dSwO
zVnnafgMaJE0FuA=Q1gT%bpNimv+Z?pp&+r-CrWaG^c0BE^UyiBy`2)=#>tqQhZWtv
zjZ&`m{llb_Q#DjCJgBbKHei7d^&1^)GV}d$QCNr%q_a;RW`Hp4JY~Wi7nZ%8zm1qC
zBkZ4vK=%{)gAQm(P0;m4E>pLChw5~#-1BMjNu<wkPC!+nV8j7OA-6M#k?4{n(ddil
zY2QF$#4^)?p#C9B_>PE%?FhlX++5ea<*bg$&%-9k0!WLO9?YXSZic~bNa9kXJQg(m
zZr4DpW2U~E8TEW~mwawX)6JEWFzF`}TWZbK@d=R7qA;?GE=u{%NFFtFYn?bjpl7y$
zl`t7b_kg)N66r-8$2r&!L60<T2HW$uj}Y>l<d~}~X>aQ5EDafcB+cGZd$zrbK9=UO
z1?f`~#!!|p6Qr;QuM#Avu#U*-W*(e_EB~_Pd3Lma%U^J{j+S#wZIkP2YMWPPwdM(0
zZ7m6ETAQz48rttGVWM9XvtIwSN=UR_t=tqdfyb@e<Bxp_3v_1j<I;%4qr^@m*fP6F
zzi7?W_?GwS;zZb+IGd}8xN|LDt4W;`hBbmkVK%jY=wWFxXh+^qygc@lO5JD)=>v`y
z!pR#b^_@Uha<5>z+AY4sXC*1UR5a6SsWr#R-CRL^v)D*Aom(ok=dpR#^a_49JZp0|
ztNbQ;WHMAuB6eOH@Y>C`ddwYqt(laG-p7aQe!U2*5S9tWgBf2Y^u+LCgC9Do@%=-`
zGb@+fElxkEw?Q7Q+z649@-&<7qli>3IG~>O!hA7eWxQax1Jwu@;;{$$o#(wZrHci2
za^t0{XPR>n8%YA~5xa@Z8H_l#Ykz&D3JQn@GkS2pidX@0afu93I7F7&H8KwE%J|8t
zqIHEzxp~>7`DO8}`=iKEOEk}%fg;3wt8smjDR-Cl*O1)4VuhPi!^|&GT~Y#D4L%SZ
z87|pc)_H&JG;+_QgRRryV`r;2jIE_BQkyc5H68(jXVuumDudt=D@4|Y$<Lg7&00u9
z@%N$+b1$8>V(@71d2-7A0bGbg;^U*>4yn5h4S25D4MCcF>dZABTZ8Q51@kAbLko!(
zDomuYiB<;7ORF0xuC2WwL1<DB@Ue$ak+29ZcB&7E^ts@!<F9w<p0;fK!X$V5R#2a4
zeodaw3LI(P0g<?CgRPe1uR*vJ^O;pzkcMS^J4ahY+aZLpsfpp<Z$<s)M7_BVGT~8S
zy7^kiW`i+!yY2(Of3{jbz{7GAw$Sj(eE}zlCI^DgixTp}&XnCf8Gysxq=c|4U*zk9
zmTAw{$=r{ExwdS}C%?9DD%OPt-FxYOxqbOq;(i051ZMWJ>AP$A?$ZDqFT2`OFI`Xl
E2b-zCF8}}l

literal 0
HcmV?d00001

diff --git a/skin/thumbnail-01.source.html b/skin/thumbnail-01.source.html
index a004a16..0977d6e 100644
--- a/skin/thumbnail-01.source.html
+++ b/skin/thumbnail-01.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Thumbnail Navigator Skin 01 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Thumbnail Navigator Skin 01 - Jssor Slider</title>
 </head>
 <body style="padding: 0; margin: 0; font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -45,53 +45,53 @@
         <!-- Slides Container -->
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 800px; height: 356px; overflow: hidden;">
             <div>
-                <img u="image" src="../img/alila/01.jpg" />
-                <img u="thumb" src="../img/alila/thumb-01.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/02.jpg" />
-                <img u="thumb" src="../img/alila/thumb-02.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/03.jpg" />
-                <img u="thumb" src="../img/alila/thumb-03.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/04.jpg" />
-                <img u="thumb" src="../img/alila/thumb-04.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/05.jpg" />
-                <img u="thumb" src="../img/alila/thumb-05.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/06.jpg" />
-                <img u="thumb" src="../img/alila/thumb-06.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/07.jpg" />
-                <img u="thumb" src="../img/alila/thumb-07.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/08.jpg" />
-                <img u="thumb" src="../img/alila/thumb-08.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/09.jpg" />
-                <img u="thumb" src="../img/alila/thumb-09.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/10.jpg" />
-                <img u="thumb" src="../img/alila/thumb-10.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             
             <div>
-                <img u="image" src="../img/alila/11.jpg" />
-                <img u="thumb" src="../img/alila/thumb-11.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/12.jpg" />
-                <img u="thumb" src="../img/alila/thumb-12.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
         </div>
         
@@ -197,7 +197,7 @@
             <!-- Thumbnail Item Skin End -->
         </div>
         <!--#endregion Thumbnail Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/thumbnail-02.source.html b/skin/thumbnail-02.source.html
index 8581094..628a868 100644
--- a/skin/thumbnail-02.source.html
+++ b/skin/thumbnail-02.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Thumbnail Navigator Skin 02 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Thumbnail Navigator Skin 02 - Jssor Slider</title>
 </head>
 <body style="padding: 0; margin: 0; font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -47,61 +47,61 @@
         <!-- Slides Container -->
         <div u="slides" style="position: absolute; left: 240px; top: 0px; width: 720px; height: 480px; overflow: hidden;">
             <div>
-                <img u="image" src="../img/travel/01.jpg" />
-                <img u="thumb" src="../img/travel/thumb-01.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/02.jpg" />
-                <img u="thumb" src="../img/travel/thumb-02.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/03.jpg" />
-                <img u="thumb" src="../img/travel/thumb-03.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/04.jpg" />
-                <img u="thumb" src="../img/travel/thumb-04.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/05.jpg" />
-                <img u="thumb" src="../img/travel/thumb-05.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/06.jpg" />
-                <img u="thumb" src="../img/travel/thumb-06.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/07.jpg" />
-                <img u="thumb" src="../img/travel/thumb-07.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/08.jpg" />
-                <img u="thumb" src="../img/travel/thumb-08.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/09.jpg" />
-                <img u="thumb" src="../img/travel/thumb-09.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/10.jpg" />
-                <img u="thumb" src="../img/travel/thumb-10.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             
             <div>
-                <img u="image" src="../img/travel/11.jpg" />
-                <img u="thumb" src="../img/travel/thumb-11.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/12.jpg" />
-                <img u="thumb" src="../img/travel/thumb-12.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/13.jpg" />
-                <img u="thumb" src="../img/travel/thumb-13.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/14.jpg" />
-                <img u="thumb" src="../img/travel/thumb-14.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
         </div>
 
@@ -207,7 +207,7 @@
             <!-- Thumbnail Item Skin End -->
         </div>
         <!--#endregion Thumbnail Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/thumbnail-03.source.html b/skin/thumbnail-03.source.html
index b18ce1c..949e348 100644
--- a/skin/thumbnail-03.source.html
+++ b/skin/thumbnail-03.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Thumbnail Navigator Skin 03 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Thumbnail Navigator Skin 03 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -41,44 +41,44 @@
         <!-- Slides Container -->
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">
             <div>
-                <img u="image" src="../img/photography/002.jpg" />
-                <img u="thumb" src="../img/photography/thumb-002.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/003.jpg" />
-                <img u="thumb" src="../img/photography/thumb-003.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/004.jpg" />
-                <img u="thumb" src="../img/photography/thumb-004.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/005.jpg" />
-                <img u="thumb" src="../img/photography/thumb-005.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/006.jpg" />
-                <img u="thumb" src="../img/photography/thumb-006.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/007.jpg" />
-                <img u="thumb" src="../img/photography/thumb-007.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/008.jpg" />
-                <img u="thumb" src="../img/photography/thumb-008.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/009.jpg" />
-                <img u="thumb" src="../img/photography/thumb-009.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/010.jpg" />
-                <img u="thumb" src="../img/photography/thumb-010.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/011.jpg" />
-                <img u="thumb" src="../img/photography/thumb-011.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
         </div>
 
@@ -179,7 +179,7 @@
             <!-- Thumbnail Item Skin End -->
         </div>
         <!--#endregion Thumbnail Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/thumbnail-04.source.html b/skin/thumbnail-04.source.html
index bf124d5..9e27aa5 100644
--- a/skin/thumbnail-04.source.html
+++ b/skin/thumbnail-04.source.html
@@ -53,50 +53,36 @@
             <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 960px;
                 height: 400px; overflow: hidden;">
                 <div>
-                    <img u="image" src="../img/major/s1.jpg" />
-                    <img u="thumb" src="../img/major/s1t.jpg" />
+                    <img u="image" src="img/slide.png" />
+                    <img u="thumb" src="img/thumb.png" />
                 </div>
                 <div>
-                    <div style="position: absolute; width: 500px; height: 300px; top: 23px; right: 0px; background: url(../img/major/s2.png) top no-repeat;
-                        ">
-                    </div>
-                    <img u="thumb" src="../img/major/s2t.jpg" />
+                    <img u="image" src="img/slide.png" />
+                    <img u="thumb" src="img/thumb.png" />
                 </div>
                 <div>
-                    <div style="position: absolute; width: 500px; height: 300px; top: 23px; right: 0px; background: url(../img/major/s3.png) top no-repeat;
-                        ">
-                    </div>
-                    <img u="thumb" src="../img/major/s3t.jpg" />
+                    <img u="image" src="img/slide.png" />
+                    <img u="thumb" src="img/thumb.png" />
                 </div>
                 <div>
-                    <div style="position: absolute; width: 500px; height: 300px; top: 23px; right: 0px; background: url(../img/major/s4.png) top no-repeat;
-                        ">
-                    </div>
-                    <img u="thumb" src="../img/major/s4t.jpg" />
+                    <img u="image" src="img/slide.png" />
+                    <img u="thumb" src="img/thumb.png" />
                 </div>
                 <div>
-                    <div style="position: absolute; width: 500px; height: 300px; top: 23px; right: 0px; background: url(../img/major/s5.png) top no-repeat;
-                        ">
-                    </div>
-                    <img u="thumb" src="../img/major/s5t.jpg" />
+                    <img u="image" src="img/slide.png" />
+                    <img u="thumb" src="img/thumb.png" />
                 </div>
                 <div>
-                    <div style="position: absolute; width: 500px; height: 300px; top: 23px; right: 0px; background: url(../img/major/s6.png) top no-repeat;
-                        ">
-                    </div>
-                    <img u="thumb" src="../img/major/s6t.jpg" />
+                    <img u="image" src="img/slide.png" />
+                    <img u="thumb" src="img/thumb.png" />
                 </div>
                 <div>
-                    <div style="position: absolute; width: 500px; height: 300px; top: 23px; right: 0px; background: url(../img/major/s7.png) top no-repeat;
-                        ">
-                    </div>
-                    <img u="thumb" src="../img/major/s7t.jpg" />
+                    <img u="image" src="img/slide.png" />
+                    <img u="thumb" src="img/thumb.png" />
                 </div>
                 <div>
-                    <div style="position: absolute; width: 500px; height: 300px; top: 23px; right: 0px; background: url(../img/major/s8.png) top no-repeat;
-                        ">
-                    </div>
-                    <img u="thumb" src="../img/major/s8t.jpg" />
+                    <img u="image" src="img/slide.png" />
+                    <img u="thumb" src="img/thumb.png" />
                 </div>
             </div>
 
@@ -192,7 +178,7 @@
                 <!-- Thumbnail Item Skin End -->
             </div>
             <!--#endregion Thumbnail Navigator Skin End -->
-            <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         </div>
         <!-- Trigger -->
         <script>
diff --git a/skin/thumbnail-05.source.html b/skin/thumbnail-05.source.html
index c941fcd..a11530b 100644
--- a/skin/thumbnail-05.source.html
+++ b/skin/thumbnail-05.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Thumbnail Navigator Skin 05 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Thumbnail Navigator Skin 05 - Jssor Slider</title>
 </head>
 <body style="padding: 0; margin: 0; font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -46,53 +46,53 @@
         <!-- Slides Container -->
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 800px; height: 356px; overflow: hidden;">
             <div>
-                <img u="image" src="../img/alila/01.jpg" />
-                <img u="thumb" src="../img/alila/thumb-01.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/02.jpg" />
-                <img u="thumb" src="../img/alila/thumb-02.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/03.jpg" />
-                <img u="thumb" src="../img/alila/thumb-03.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/04.jpg" />
-                <img u="thumb" src="../img/alila/thumb-04.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/05.jpg" />
-                <img u="thumb" src="../img/alila/thumb-05.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/06.jpg" />
-                <img u="thumb" src="../img/alila/thumb-06.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/07.jpg" />
-                <img u="thumb" src="../img/alila/thumb-07.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/08.jpg" />
-                <img u="thumb" src="../img/alila/thumb-08.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/09.jpg" />
-                <img u="thumb" src="../img/alila/thumb-09.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/10.jpg" />
-                <img u="thumb" src="../img/alila/thumb-10.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             
             <div>
-                <img u="image" src="../img/alila/11.jpg" />
-                <img u="thumb" src="../img/alila/thumb-11.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/12.jpg" />
-                <img u="thumb" src="../img/alila/thumb-12.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
         </div>
                 
@@ -203,7 +203,7 @@
             <!-- Thumbnail Item Skin End -->
         </div>
         <!--#endregion Thumbnail Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/thumbnail-06.source.html b/skin/thumbnail-06.source.html
index 59375eb..cedb929 100644
--- a/skin/thumbnail-06.source.html
+++ b/skin/thumbnail-06.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Thumbnail Navigator Skin 06 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Thumbnail Navigator Skin 06 - Jssor Slider</title>
 </head>
 <body style="padding: 0; margin: 0; font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -47,61 +47,61 @@
         <!-- Slides Container -->
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 720px; height: 480px; overflow: hidden;">
             <div>
-                <img u="image" src="../img/travel/01.jpg" />
-                <img u="thumb" src="../img/travel/thumb-01.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/02.jpg" />
-                <img u="thumb" src="../img/travel/thumb-02.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/03.jpg" />
-                <img u="thumb" src="../img/travel/thumb-03.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/04.jpg" />
-                <img u="thumb" src="../img/travel/thumb-04.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/05.jpg" />
-                <img u="thumb" src="../img/travel/thumb-05.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/06.jpg" />
-                <img u="thumb" src="../img/travel/thumb-06.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/07.jpg" />
-                <img u="thumb" src="../img/travel/thumb-07.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/08.jpg" />
-                <img u="thumb" src="../img/travel/thumb-08.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/09.jpg" />
-                <img u="thumb" src="../img/travel/thumb-09.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/10.jpg" />
-                <img u="thumb" src="../img/travel/thumb-10.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             
             <div>
-                <img u="image" src="../img/travel/11.jpg" />
-                <img u="thumb" src="../img/travel/thumb-11.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/12.jpg" />
-                <img u="thumb" src="../img/travel/thumb-12.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/13.jpg" />
-                <img u="thumb" src="../img/travel/thumb-13.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/travel/14.jpg" />
-                <img u="thumb" src="../img/travel/thumb-14.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
         </div>
         
@@ -216,7 +216,7 @@
             <!-- Thumbnail Item Skin End -->
         </div>
         <!--#endregion Thumbnail Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/thumbnail-07.source.html b/skin/thumbnail-07.source.html
index 1c748ae..fdf2175 100644
--- a/skin/thumbnail-07.source.html
+++ b/skin/thumbnail-07.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Thumbnail Navigator Skin 07 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Thumbnail Navigator Skin 07 - Jssor Slider</title>
 </head>
 <body style="padding: 0; margin: 0; font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -45,53 +45,53 @@
         <!-- Slides Container -->
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 800px; height: 356px; overflow: hidden;">
             <div>
-                <img u="image" src="../img/alila/01.jpg" />
-                <img u="thumb" src="../img/alila/thumb-01.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/02.jpg" />
-                <img u="thumb" src="../img/alila/thumb-02.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/03.jpg" />
-                <img u="thumb" src="../img/alila/thumb-03.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/04.jpg" />
-                <img u="thumb" src="../img/alila/thumb-04.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/05.jpg" />
-                <img u="thumb" src="../img/alila/thumb-05.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/06.jpg" />
-                <img u="thumb" src="../img/alila/thumb-06.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/07.jpg" />
-                <img u="thumb" src="../img/alila/thumb-07.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/08.jpg" />
-                <img u="thumb" src="../img/alila/thumb-08.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/09.jpg" />
-                <img u="thumb" src="../img/alila/thumb-09.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/10.jpg" />
-                <img u="thumb" src="../img/alila/thumb-10.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             
             <div>
-                <img u="image" src="../img/alila/11.jpg" />
-                <img u="thumb" src="../img/alila/thumb-11.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/alila/12.jpg" />
-                <img u="thumb" src="../img/alila/thumb-12.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
         </div>
         
@@ -184,7 +184,7 @@
             <!-- Thumbnail Item Skin End -->
         </div>
         <!--#endregion Thumbnail Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/thumbnail-08.source.html b/skin/thumbnail-08.source.html
index 36d2000..8e99898 100644
--- a/skin/thumbnail-08.source.html
+++ b/skin/thumbnail-08.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Thumbnail Navigator Skin 08 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Thumbnail Navigator Skin 08 - Jssor Slider</title>
 </head>
 <body style="padding: 0; margin: 0; font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -46,36 +46,36 @@
         <div u="slides" style="position: absolute; left: 180px; top: 50px; width: 600px; height: 300px;
             overflow: hidden;">
             <div>
-                <img u="image" src="../img/landscape/01.jpg" />
-                <img u="thumb" src="../img/landscape/thumb-01.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/landscape/02.jpg" />
-                <img u="thumb" src="../img/landscape/thumb-02.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/landscape/03.jpg" />
-                <img u="thumb" src="../img/landscape/thumb-03.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/landscape/04.jpg" />
-                <img u="thumb" src="../img/landscape/thumb-04.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/landscape/05.jpg" />
-                <img u="thumb" src="../img/landscape/thumb-05.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/landscape/06.jpg" />
-                <img u="thumb" src="../img/landscape/thumb-06.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/landscape/07.jpg" />
-                <img u="thumb" src="../img/landscape/thumb-07.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/landscape/08.jpg" />
-                <img u="thumb" src="../img/landscape/thumb-08.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="thumb" src="img/thumb.png" />
             </div>
         </div>
         
@@ -172,7 +172,7 @@
             <!-- Thumbnail Item Skin End -->
         </div>
         <!--#endregion Thumbnail Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/thumbnail-09.source.html b/skin/thumbnail-09.source.html
index f3443c4..5860e06 100644
--- a/skin/thumbnail-09.source.html
+++ b/skin/thumbnail-09.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Thumbnail Navigator Skin 09 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Thumbnail Navigator Skin 09 - Jssor Slider</title>
 </head>
 <body style="background:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -36,19 +36,19 @@
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
             <div>
-                <img u=image src="../img/landscape/01.jpg" />
+                <img u="image" src="img/slide.png" />
                 <div u="thumb">Do you notice it is draggable by mouse/finger?</div>
             </div>
             <div>
-                <img u=image src="../img/landscape/02.jpg" />
+                <img u="image" src="img/slide.png" />
                 <div u="thumb">Did you drag by either horizontal or vertical?</div>
             </div>
             <div>
-                <img u=image src="../img/landscape/03.jpg" />
+                <img u="image" src="img/slide.png" />
                 <div u="thumb">Do you notice navigator responses when drag?</div>
             </div>
             <div>
-                <img u=image src="../img/landscape/04.jpg" />
+                <img u="image" src="img/slide.png" />
                 <div u="thumb">Do you notice arrow responses when click?</div>
             </div>
         </div>
@@ -70,7 +70,6 @@
         </div>
         <!--#endregion Thumbnail Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger -->
         <script>
             jssor_sliderb_starter('sliderb_container');
diff --git a/skin/thumbnail-10.source.html b/skin/thumbnail-10.source.html
index 2dacb7b..583f168 100644
--- a/skin/thumbnail-10.source.html
+++ b/skin/thumbnail-10.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Thumbnail Navigator Skin 10 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Thumbnail Navigator Skin 10 - Jssor Slider</title>
 </head>
 <body style="background:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -35,19 +35,19 @@
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
             overflow: hidden;">
             <div>
-                <img u=image src="../img/landscape/01.jpg" />
+                <img u="image" src="img/slide.png" />
                 <div u="thumb">Do you notice it is draggable by mouse/finger?</div>
             </div>
             <div>
-                <img u=image src="../img/landscape/02.jpg" />
+                <img u="image" src="img/slide.png" />
                 <div u="thumb">Did you drag by either horizontal or vertical?</div>
             </div>
             <div>
-                <img u=image src="../img/landscape/03.jpg" />
+                <img u="image" src="img/slide.png" />
                 <div u="thumb">Do you notice navigator responses when drag?</div>
             </div>
             <div>
-                <img u=image src="../img/landscape/04.jpg" />
+                <img u="image" src="img/slide.png" />
                 <div u="thumb">Do you notice arrow responses when click?</div>
             </div>
         </div>
@@ -69,7 +69,6 @@
         </div>
         <!--#endregion Thumbnail Navigator Skin End -->
 
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
         <!-- Trigger -->
         <script>
             jssor_sliderb_starter('sliderb_container');
diff --git a/skin/thumbnail-15.source.html b/skin/thumbnail-15.source.html
index 261c71a..b128046 100644
--- a/skin/thumbnail-15.source.html
+++ b/skin/thumbnail-15.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Thumbnail Navigator Skin 11 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Thumbnail Navigator Skin 11 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -41,44 +41,44 @@
         <!-- Slides Container -->
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">
             <div>
-                <img u="image" src="../img/photography/002.jpg" />
-                <img u="thumb" src="../img/photography/thumb-002.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="image" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/003.jpg" />
-                <img u="thumb" src="../img/photography/thumb-003.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="image" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/004.jpg" />
-                <img u="thumb" src="../img/photography/thumb-004.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="image" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/005.jpg" />
-                <img u="thumb" src="../img/photography/thumb-005.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="image" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/006.jpg" />
-                <img u="thumb" src="../img/photography/thumb-006.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="image" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/007.jpg" />
-                <img u="thumb" src="../img/photography/thumb-007.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="image" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/008.jpg" />
-                <img u="thumb" src="../img/photography/thumb-008.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="image" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/009.jpg" />
-                <img u="thumb" src="../img/photography/thumb-009.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="image" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/010.jpg" />
-                <img u="thumb" src="../img/photography/thumb-010.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="image" src="img/thumb.png" />
             </div>
             <div>
-                <img u="image" src="../img/photography/011.jpg" />
-                <img u="thumb" src="../img/photography/thumb-011.jpg" />
+                <img u="image" src="img/slide.png" />
+                <img u="image" src="img/thumb.png" />
             </div>
         </div>
 
@@ -152,7 +152,7 @@
             <!-- Thumbnail Item Skin End -->
         </div>
         <!--#endregion Thumbnail Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");
diff --git a/skin/thumbnail-16.source.html b/skin/thumbnail-16.source.html
index 554ea4b..4439e54 100644
--- a/skin/thumbnail-16.source.html
+++ b/skin/thumbnail-16.source.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Thumbnail Navigator Skin 12 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
+    <title>Thumbnail Navigator Skin 12 - Jssor Slider</title>
 </head>
 <body style="font-family:Arial, Verdana;background-color:#fff;">
     <script src="../js/jssor.slider.min.js" type="text/javascript"></script>
@@ -41,9 +41,9 @@
         <!-- Slides Container -->
         <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">
             <div>
-                <img u="image" src="../img/landscape/05.jpg" />
+                <img u="image" src="img/slide.png" />
                 <div u="thumb">
-                    <img src="../img/nested-thumb/landscape.jpg" />
+                    <img src="img/thumb.png" />
                     <div class="title_back"></div>
                     <div class="title">
                         Landscape
@@ -51,9 +51,9 @@
                 </div>
             </div>
             <div>
-                <img u="image" src="../img/motor/001.jpg" />
+                <img u="image" src="img/slide.png" />
                 <div u="thumb">
-                    <img src="../img/nested-thumb/motor.jpg" />
+                    <img src="img/thumb.png" />
                     <div class="title_back"></div>
                     <div class="title">
                         Motor
@@ -61,9 +61,9 @@
                 </div>
             </div>
             <div>
-                <img u="image" src="../img/photography/004.jpg" />
+                <img u="image" src="img/slide.png" />
                 <div u="thumb">
-                    <img src="../img/nested-thumb/photography.jpg" />
+                    <img src="img/thumb.png" />
                     <div class="title_back"></div>
                     <div class="title">
                         Photography
@@ -179,7 +179,7 @@
             <!-- Thumbnail Item Skin End -->
         </div>
         <!--#endregion Thumbnail Navigator Skin End -->
-        <a style="display: none" href="http://www.jssor.com">jQuery Slider</a>
+
         <!-- Trigger -->
         <script>
             init_jssor_slider1("slider1_container");