Responsive Touch Slider/Gallery/Carousel/Banner/Slideshow html

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Touch Slider/Gallery/Carousel/Banner/Slideshow html</title> <link href="https://www.jssor.com/files/style/site/css/site-style-2.7.0.min.css" rel="stylesheet"/>  <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-45690170-1'); </script>  <style> .nav-sign a { pointer-events: none !important; } </style> <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' /> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>  <meta name="description" content="Jssor Slider is absolutely free. There is no usage restriction.Download Source Code + Development Kit" /> <link rel="canonical" href="https://www.jssor.com/" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Responsive Touch Slider/Gallery/Carousel/Banner/Slideshow html" /> <meta property="og:description" content="Jssor Slider is absolutely free. There is no usage restriction.Download Source Code + Development Kit" /> <meta property="og:url" content="https://www.jssor.com/" /> <meta property="og:site_name" content="Responsive Touch Slider/Gallery/Carousel/Banner/Slideshow html" /> <meta property="article:modified_time" content="2024-11-19T07:04:43+00:00" /> <meta name="twitter:card" content="summary_large_image" />  <script type="text/javascript"> /* <![CDATA[ */ window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/www.jssor.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.7.1"}}; /*! This file is auto-generated */ !function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83d\udc26\u200d\u2b1b","\ud83d\udc26\u200b\u2b1b")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings); /* ]]> */ </script> <style id='wp-emoji-styles-inline-css' type='text/css'> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='wp-block-library-css' href='https://www.jssor.com/wp-includes/css/dist/block-library/style.min.css?ver=6.7.1' type='text/css' media='all' /> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel="https://api.w.org/" href="https://www.jssor.com/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://www.jssor.com/wp-json/wp/v2/pages/1" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.jssor.com/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress 6.7.1" /> <link rel='shortlink' href='https://www.jssor.com/' /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://www.jssor.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.jssor.com%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://www.jssor.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.jssor.com%2F&format=xml" /> <link rel="icon" href="https://www.jssor.com/wp-content/uploads/2024/09/Jssor-Slider.png" sizes="32x32" /> <link rel="icon" href="https://www.jssor.com/wp-content/uploads/2024/09/Jssor-Slider.png" sizes="192x192" /> <link rel="apple-touch-icon" href="https://www.jssor.com/wp-content/uploads/2024/09/Jssor-Slider.png" /> <meta name="msapplication-TileImage" content="https://www.jssor.com/wp-content/uploads/2024/09/Jssor-Slider.png" /> </head> <body>    <div class="headersection"> <div class="header public clearfix"> <a class="logo" href="https://www.jssor.com">Jssor</a> <div class="nav"> <input type="checkbox" id="toggle"/> <label for="toggle" class="toggle" onclick> <span class="icon-bar" style="top: 7px;"></span> <span class="icon-bar" style="top: 14px;"></span> <span class="icon-bar" style="top: 21px;"></span> </label> <div data-u="navi-sign" data-interaction="user-commands" class="nav-sign"></div>    <div class="menu"> <a class="current" href="https://www.jssor.com">Home</a> <a href="https://www.jssor.com/demos.html">Demos</a>   <a href="https://www.jssor.com/tutorial.html">Tutorial</a> <a href="https://www.jssor.com/help.html">Help</a> <a href="https://www.jssor.com/development.html">Development</a>  <a href="https://www.jssor.com/pricing.html">Pricing</a> <a href="https://www.jssor.com/support.html">Support</a> </div> </div> </div> </div>  <div class="headerspace"></div>   <script src="https://www.jssor.com/files/script/jssor.slider-28.1.0.min.js" type="text/javascript"></script> <script type="text/javascript"> window.jssor_1_slider_init = function () { var jssor_1_SlideshowTransitions = [ { $Duration: 500, $Delay: 40, $Cols: 10, $Rows: 5, $Opacity: 2, $Clip: 15, $SlideOut: true, $Easing: $Jease$.$OutQuad }, { $Duration: 800, y: 0.3, $Cols: 2, $During: { $Top: [0.3, 0.7] }, $ChessMode: { $Column: 12 }, $Easing: { $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 }, { $Duration: 1000, x: -1, y: 2, $Rows: 2, $Zoom: 11, $Rotate: 1, $SlideOut: true, $Assembly: 2049, $ChessMode: { $Row: 15 }, $Easing: { $Left: $Jease$.$InExpo, $Top: $Jease$.$InExpo, $Zoom: $Jease$.$InExpo, $Opacity: $Jease$.$Linear, $Rotate: $Jease$.$InExpo }, $Opacity: 2, $Round: { $Rotate: 0.85 } }, { $Duration: 1200, x: 4, $Cols: 2, $Zoom: 11, $SlideOut: true, $Assembly: 2049, $ChessMode: { $Column: 15 }, $Easing: { $Left: $Jease$.$InExpo, $Zoom: $Jease$.$InExpo, $Opacity: $Jease$.$Linear }, $Opacity: 2 }, { $Duration: 1000, x: 4, y: -4, $Zoom: 11, $Rotate: 1, $SlideOut: true, $Easing: { $Left: $Jease$.$InQuint, $Top: $Jease$.$InQuint, $Zoom: $Jease$.$InQuart, $Opacity: $Jease$.$Linear, $Rotate: $Jease$.$InQuint }, $Opacity: 2, $Round: { $Rotate: 0.8 } }, { $Duration: 1500, x: 0.3, y: -0.3, $Delay: 80, $Cols: 10, $Rows: 5, $Opacity: 2, $Clip: 15, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $Easing: { $Left: $Jease$.$InJump, $Top: $Jease$.$InJump, $Clip: $Jease$.$OutQuad }, $Round: { $Left: 0.8, $Top: 2.5 } }, { $Duration: 1000, x: -3, y: 1, $Rows: 2, $Zoom: 11, $Rotate: 1, $SlideOut: true, $Assembly: 2049, $ChessMode: { $Row: 28 }, $Easing: { $Left: $Jease$.$InExpo, $Top: $Jease$.$InExpo, $Zoom: $Jease$.$InExpo, $Opacity: $Jease$.$Linear, $Rotate: $Jease$.$InExpo }, $Opacity: 2, $Round: { $Rotate: 0.7 } }, { $Duration: 1000, x: 0.5, y: 0.5, $Zoom: 1, $Rotate: 1, $SlideOut: true, $Easing: { $Left: $Jease$.$InCubic, $Top: $Jease$.$InCubic, $Zoom: $Jease$.$InCubic, $Opacity: $Jease$.$Linear, $Rotate: $Jease$.$InCubic }, $Opacity: 2, $Round: { $Rotate: 0.5 } }, { $Duration: 1200, x: -0.6, y: -0.6, $Zoom: 1, $Rotate: 1, $During: { $Left: [0.2, 0.8], $Top: [0.2, 0.8], $Zoom: [0.2, 0.8], $Rotate: [0.2, 0.8] }, $Opacity: 2, $Round: { $Rotate: 0.5 } }, { $Duration: 1200, y: -0.5, $Delay: 30, $Cols: 15, $Opacity: 2, $SlideOut: true, $Formation: $JssorSlideshowFormations$.$FormationCircle, $Easing: { $Top: $Jease$.$InWave, $Opacity: $Jease$.$Linear }, $Round: { $Top: 1.5 } }, { $Duration: 500, $Delay: 12, $Cols: 10, $Rows: 5, $Opacity: 2, $Clip: 15, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 2050, $Easing: { $Clip: $Jease$.$InSine } }, { $Duration: 800, $Delay: 20, $Clip: 3, $SlideOut: true, $Assembly: 260, $Easing: { $Clip: $Jease$.$OutCubic, $Opacity: $Jease$.$Linear }, $Opacity: 2 } ]; var jssor_1_SlideoTransitions = [ [{ b: 0, d: 1200, y: 0, o: 1, e: { y: 24, o: 6 } }, { b: 5600, d: 800, y: -200, o: 0, e: { y: 5 } }], [{ b: 400, d: 800, x: 0, o: 1, e: { x: 27, o: 6 } }, { b: 5600, d: 800, x: -200, o: 0, e: { x: 5 } }], [{ b: 400, d: 800, x: 220, o: 1, e: { x: 27, o: 6 } }, { b: 5600, d: 800, x: 420, o: 0, e: { x: 5 } }], [{ b: 1600, d: 600, x: 100, y: 155, o: 1, e: { x: 3, y: 3 } }, { b: 5600, d: 800, o: 0 }], [{ b: 4600, d: 960, x: -206, e: { x: 1 } }], [{ b: -1, d: 1, sX: 0, sY: 0 }, { b: 3400, d: 400, sX: 1, sY: 1 }, { b: 3800, d: 300, o: 0, sX: 1.1, sY: 1.1 }], [{ b: -1, d: 1, sX: 0, sY: 0 }, { b: 3520, d: 400, sX: 1, sY: 1 }, { b: 3920, d: 300, o: 0, sX: 1.1, sY: 1.1 }], [{ b: 2200, d: 1200, x: 165, y: 76, o: 1, e: { x: 7, y: 7 } }, { b: 4600, d: 640, x: 35, e: { x: 1 } }], [{ b: 4600, d: 240, x: 180, o: 1 }, { b: 4840, d: 480, x: 30 }, { b: 5320, d: 240, x: -45, o: 0 }], [{ b: 2800, d: 600, y: 220, sX: 0.5, sY: 0.5, e: { y: 5 } }, { b: 6000, d: 600, y: 270, r: -10 }, { b: 7000, d: 400, o: 0, rX: 30, rY: -30 }], [{ b: 0, d: 600, x: 288, sX: 5, sY: 5, e: { x: 6 } }, { b: 900, d: 600, sX: 1, sY: 1 }], [{ b: 400, d: 500, o: 1, e: { o: 5 } }], [{ b: -1, d: 1, r: -180 }, { b: 1500, d: 500, o: 1, r: 0, e: { r: 27 } }], [{ b: -1, d: 1, r: 180 }, { b: 2000, d: 500, o: 1, r: 0, e: { r: 27 } }], [{ b: 2800, d: 600, y: 90, e: { y: 6 } }], [{ b: 6000, d: 600, y: -30, r: -10, e: { y: 6 } }, { b: 7000, d: 400, o: 0, rX: -30, rY: 30 }], [{ b: -1, d: 1, sX: 0, sY: 0 }, { b: 3400, d: 400, sX: 1.33, sY: 1.33, e: { sX: 7, sY: 7 } }, { b: 3800, d: 200, sX: 1, sY: 1, e: { sX: 16, sY: 16 } }], [{ b: 3400, d: 600, o: 1 }, { b: 4000, d: 1000, r: 360, e: { r: 1 } }], [{ b: 3400, d: 600, y: 125, o: 1, e: { y: 27 } }], [{ b: -1, d: 1, sX: 0, sY: 0 }, { b: 3700, d: 400, sX: 1.33, sY: 1.33, e: { sX: 7, sY: 7 } }, { b: 4100, d: 200, sX: 1, sY: 1, e: { sX: 16, sY: 16 } }], [{ b: 3700, d: 600, o: 1 }, { b: 4300, d: 1000, r: 360 }], [{ b: 3700, d: 600, x: 16, o: 1, e: { x: 27 } }], [{ b: -1, d: 1, sX: 0, sY: 0 }, { b: 4000, d: 400, sX: 1.33, sY: 1.33, e: { sX: 7, sY: 7 } }, { b: 4400, d: 200, sX: 1, sY: 1, e: { sX: 16, sY: 16 } }], [{ b: 4000, d: 600, o: 1 }, { b: 4600, d: 1000, r: 360 }], [{ b: 4000, d: 600, x: 504, o: 1, e: { x: 27 } }], [{ b: 9300, d: 600, o: 0, r: 540, sX: 0.5, sY: 0.5, e: { r: 5 } }], [{ b: -1, d: 1, sX: 3, sY: 3 }, { b: 6880, d: 20, o: 1 }, { b: 6900, d: 300, sX: 0.92, sY: 0.92, e: { sX: 27, sY: 27 } }, { b: 7200, d: 240, sX: 1, sY: 1 }], [{ b: -1, d: 1, sX: 6, sY: 6 }, { b: 6300, d: 600, o: 1, sX: 1, sY: 1 }], [{ b: 7200, d: 440, o: 1 }], [{ b: -1, d: 1, sX: 0.1, sY: 0.1 }, { b: 7420, d: 20, o: 1 }, { b: 7440, d: 200, r: 180, sX: 0.5, sY: 0.5 }, { b: 7640, d: 200, r: 360, sX: 1, sY: 1 }], [{ b: -1, d: 1, r: -60, sX: 0.1, sY: 0.1 }, { b: 7620, d: 20, o: 1 }, { b: 7640, d: 300, r: 0, sX: 1.2, sY: 1.2 }, { b: 7940, d: 160, sX: 1, sY: 1 }], [{ b: -1, d: 1, sX: 0.1, sY: 0.1 }, { b: 7920, d: 20, o: 1 }, { b: 7940, d: 300, sX: 1.5, sY: 1.5 }, { b: 8240, d: 160, sX: 1, sY: 1 }], [{ b: -1, d: 1, sX: 0.1, sY: 0.1 }, { b: 7620, d: 20, o: 1 }, { b: 7640, d: 200, r: 180, sX: 0.5, sY: 0.5 }, { b: 7840, d: 200, r: 360, sX: 1, sY: 1 }], [{ b: -1, d: 1, r: -60, sX: 0.1, sY: 0.1 }, { b: 7820, d: 20, o: 1 }, { b: 7840, d: 300, r: 0, sX: 1.2, sY: 1.2 }, { b: 8140, d: 160, sX: 1, sY: 1 }], [{ b: -1, d: 1, sX: 0.1, sY: 0.1 }, { b: 8120, d: 20, o: 1 }, { b: 8140, d: 300, sX: 1.5, sY: 1.5 }, { b: 8440, d: 160, sX: 1, sY: 1 }], [{ b: -1, d: 1, sX: 0.1, sY: 0.1 }, { b: 7820, d: 20, o: 1 }, { b: 7840, d: 200, r: 180, sX: 0.5, sY: 0.5 }, { b: 8040, d: 200, r: 360, sX: 1, sY: 1 }], [{ b: -1, d: 1, r: -60, sX: 0.1, sY: 0.1 }, { b: 8020, d: 20, o: 1 }, { b: 8040, d: 300, r: 0, sX: 1.2, sY: 1.2 }, { b: 8340, d: 160, sX: 1, sY: 1 }], [{ b: -1, d: 1, sX: 0.1, sY: 0.1 }, { b: 8320, d: 20, o: 1 }, { b: 8340, d: 300, sX: 1.5, sY: 1.5 }, { b: 8640, d: 160, sX: 1, sY: 1 }], [{ b: -1, d: 1, sX: 0.1, sY: 0.1 }, { b: 8020, d: 20, o: 1 }, { b: 8040, d: 200, r: 180, sX: 0.5, sY: 0.5 }, { b: 8240, d: 200, r: 360, sX: 1, sY: 1 }], [{ b: -1, d: 1, r: -60, sX: 0.1, sY: 0.1 }, { b: 8220, d: 20, o: 1 }, { b: 8240, d: 300, r: 0, sX: 1.2, sY: 1.2 }, { b: 8540, d: 160, sX: 1, sY: 1 }], [{ b: -1, d: 1, sX: 0.1, sY: 0.1 }, { b: 8520, d: 20, o: 1 }, { b: 8540, d: 300, sX: 1.5, sY: 1.5 }, { b: 8840, d: 160, sX: 1, sY: 1 }], [{ b: -1, d: 1, sX: 0.1, sY: 0.1 }, { b: 8220, d: 20, o: 1 }, { b: 8240, d: 200, r: 180, sX: 0.5, sY: 0.5 }, { b: 8440, d: 200, r: 360, sX: 1, sY: 1 }], [{ b: -1, d: 1, r: -60, sX: 0.1, sY: 0.1 }, { b: 8420, d: 20, o: 1 }, { b: 8440, d: 300, r: 0, sX: 1.2, sY: 1.2 }, { b: 8740, d: 160, sX: 1, sY: 1 }], [{ b: -1, d: 1, sX: 0.1, sY: 0.1 }, { b: 8720, d: 20, o: 1 }, { b: 8740, d: 300, sX: 1.5, sY: 1.5 }, { b: 9040, d: 160, sX: 1, sY: 1 }], [{ b: -1, d: 1, sX: 0.1, sY: 0.1 }, { b: 8220, d: 20, o: 1 }, { b: 8240, d: 200, r: 180, sX: 0.5, sY: 0.5 }, { b: 8440, d: 200, r: 360, sX: 1, sY: 1 }], [{ b: -1, d: 1, r: -60, sX: 0.1, sY: 0.1 }, { b: 8420, d: 20, o: 1 }, { b: 8440, d: 300, r: 0, sX: 1.2, sY: 1.2 }, { b: 8740, d: 160, sX: 1, sY: 1 }], [{ b: -1, d: 1, sX: 0.1, sY: 0.1 }, { b: 8720, d: 20, o: 1 }, { b: 8740, d: 300, sX: 1.5, sY: 1.5 }, { b: 9040, d: 160, sX: 1, sY: 1 }], [{ b: -1, d: 1, sX: 0.8, sY: 0.8 }, { b: 0, d: 400, y: 120, e: { y: 1 } }, { b: 900, d: 400, y: 170, rX: 70, e: { y: 1, rX: 1 } }, { b: 20700, d: 1000, y: 75, rX: 0, sX: 1, sY: 1, e: { y: 16, rX: 16, sX: 16, sY: 16 } }, { b: 22700, d: 900, y: 100, o: 0, rX: 60 }], [{ b: 900, d: 400, o: 0 }], [{ b: -1, d: 1, sX: 0.8, sY: 0.8 }, { b: 1700, d: 400, y: 100, e: { y: 1 } }, { b: 2600, d: 400, y: 150, rX: 70, e: { y: 1, rX: 1 } }, { b: 19700, d: 1000, y: 170, e: { y: 1 } }, { b: 20700, d: 1000, y: 75, rX: 0, sX: 1, sY: 1, e: { y: 16, rX: 16, sX: 16, sY: 16 } }, { b: 22700, d: 900, y: 100, o: 0, rX: 60 }], [{ b: 19700, d: 1000, o: 0 }], [{ b: 2600, d: 400, o: 0 }], [{ b: -1, d: 1, sX: 0.8, sY: 0.8 }, { b: 3400, d: 400, y: 80, e: { y: 1 } }, { b: 4800, d: 400, y: 130, rX: 70, e: { y: 1, rX: 1 } }, { b: 19700, d: 1000, y: 170, e: { y: 1 } }, { b: 20700, d: 1000, y: 75, rX: 0, sX: 1, sY: 1, e: { y: 16, rX: 16, sX: 16, sY: 16 } }, { b: 22700, d: 900, y: 100, o: 0, rX: 60 }], [{ b: 19700, d: 1000, o: 0 }], [{ b: -1, d: 1, c: { t: 0 } }, { b: 3800, d: 100, c: { t: 50.40 }, e: { c: { t: 32 } } }, { b: 3900, d: 100, c: { t: 84.0 }, e: { c: { t: 32 } } }, { b: 4000, d: 100, c: { t: 114.80 }, e: { c: { t: 32 } } }, { b: 4100, d: 100, c: { t: 145.60 }, e: { c: { t: 32 } } }, { b: 4200, d: 100, c: { t: 179.20 }, e: { c: { t: 32 } } }, { b: 4300, d: 100, c: { t: 201.60 }, e: { c: { t: 32 } } }, { b: 4400, d: 100, c: { t: 229.60 }, e: { c: { t: 32 } } }, { b: 4500, d: 100, c: { t: 280 }, e: { c: { t: 32 } } }], [{ b: 4800, d: 400, o: 0 }], [{ b: -1, d: 1, sX: 0.8, sY: 0.8 }, { b: 5700, d: 400, y: 60, e: { y: 1 } }, { b: 6600, d: 400, y: 110, rX: 40, e: { y: 1, rX: 1 } }, { b: 14700, d: 500, rX: 70, e: { rX: 1 } }, { b: 19700, d: 1000, y: 170, e: { y: 1 } }, { b: 20700, d: 1000, y: 75, rX: 0, sX: 1, sY: 1, e: { y: 16, rX: 16, sX: 16, sY: 16 } }, { b: 22700, d: 900, y: 100, o: 0, rX: 60 }], [{ b: 19700, d: 1000, o: 0 }], [{ b: 6600, d: 400, o: 0.8 }, { b: 14700, d: 500, o: 0 }], [{ b: 14700, d: 500, o: 0 }], [{ b: -1, d: 1, sX: 0.8, sY: 0.8 }, { b: 7500, d: 400, y: 60, e: { y: 1 } }, { b: 8400, d: 400, y: 110, rX: 40, e: { y: 1, rX: 1 } }, { b: 14700, d: 500, rX: 70, e: { rX: 1 } }, { b: 19700, d: 1000, y: 170, e: { y: 1 } }, { b: 20700, d: 1000, y: 75, rX: 0, sX: 1, sY: 1, e: { y: 16, rX: 16, sX: 16, sY: 16 } }, { b: 22700, d: 900, y: 100, o: 0, rX: 60 }], [{ b: 8400, d: 400, o: 0 }], [{ b: 8400, d: 400, o: 0 }], [{ b: -1, d: 1, sX: 0.8, sY: 0.8 }, { b: 9300, d: 400, y: 60, e: { y: 1 } }, { b: 10200, d: 400, y: 110, rX: 40, e: { y: 1 } }, { b: 14700, d: 500, rX: 70, e: { rX: 1 } }, { b: 19700, d: 1000, y: 170, e: { y: 1 } }, { b: 20700, d: 1000, y: 75, rX: 0, sX: 1, sY: 1, e: { y: 16, rX: 16, sX: 16, sY: 16 } }, { b: 22700, d: 900, y: 100, o: 0, rX: 60 }], [{ b: 10200, d: 400, o: 0 }], [{ b: 10200, d: 400, o: 0 }], [{ b: -1, d: 1, sX: 0.8, sY: 0.8 }, { b: 11100, d: 400, y: 60, e: { y: 1 } }, { b: 12000, d: 400, y: 110, rX: 40, e: { y: 1, rX: 1 } }, { b: 14700, d: 500, rX: 70, e: { rX: 1 } }, { b: 19700, d: 1000, y: 170, e: { y: 1 } }, { b: 20700, d: 1000, y: 75, rX: 0, sX: 1, sY: 1, e: { y: 16, rX: 16, sX: 16, sY: 16 } }, { b: 22700, d: 900, y: 100, o: 0, rX: 60 }], [{ b: 12000, d: 400, o: 0 }], [{ b: 12000, d: 400, o: 0 }], [{ b: -1, d: 1, sX: 0.8, sY: 0.8 }, { b: 12900, d: 400, y: 60, e: { y: 1 } }, { b: 13800, d: 400, y: 110, rX: 40, e: { y: 1, rX: 1 } }, { b: 14700, d: 500, rX: 70, e: { rX: 1 } }, { b: 19700, d: 1000, y: 170, e: { y: 1 } }, { b: 20700, d: 1000, y: 75, rX: 0, sX: 1, sY: 1, e: { y: 16, rX: 16, sX: 16, sY: 16 } }, { b: 22700, d: 900, y: 100, o: 0, rX: 60 }], [{ b: 13800, d: 400, o: 0 }], [{ b: 13800, d: 400, o: 0 }], [{ b: -1, d: 1, sX: 0.8, sY: 0.8 }, { b: 15700, d: 400, y: 60, e: { y: 1 } }, { b: 18800, d: 400, y: 90, rX: 70, e: { y: 1, rX: 1 } }, { b: 19700, d: 1000, y: 170, e: { y: 1 } }, { b: 20700, d: 1000, y: 75, rX: 0, sX: 1, sY: 1, e: { y: 16, rX: 16, sX: 16, sY: 16 } }, { b: 22700, d: 900, y: 100, o: 0, rX: 60 }], [{ b: 19700, d: 1000, o: 0 }], [{ b: 18800, d: 400, o: 0 }], [{ b: 16100, d: 300, o: 1 }, { b: 16400, d: 500, x: 12, e: { x: 6 } }], [{ b: 16100, d: 300, o: 1 }, { b: 16400, d: 500, x: 550, e: { x: 6 } }], [{ b: 16700, d: 400, y: 200, o: 1, e: { y: 2, o: 6 } }, { b: 17100, d: 300, y: 172, e: { y: 3 } }, { b: 17400, d: 300, y: 200, e: { y: 2 } }], [{ b: 16900, d: 400, y: 200, o: 1, e: { y: 2, o: 6 } }, { b: 17300, d: 300, y: 172, e: { y: 3 } }, { b: 17600, d: 300, y: 200, e: { y: 2 } }], [{ b: 17100, d: 400, y: 200, o: 1, e: { y: 2, o: 6 } }, { b: 17500, d: 300, y: 172, e: { y: 3 } }, { b: 17800, d: 300, y: 200, e: { y: 2 } }], [{ b: 17300, d: 400, y: 200, o: 1, e: { y: 2, o: 6 } }, { b: 17700, d: 300, y: 172, e: { y: 3 } }, { b: 18000, d: 300, y: 200, e: { y: 2 } }] ]; var jssor_1_options = { $AutoPlay: 1, $SlideDuration: 800, $SlideEasing: $Jease$.$OutQuint, $SlideshowOptions: { $Class: $JssorSlideshowRunner$, $Transitions: jssor_1_SlideshowTransitions, $TransitionsOrder: 1 }, $CaptionSliderOptions: { $Class: $JssorCaptionSlideo$, $Transitions: jssor_1_SlideoTransitions, $Breaks: [ [{ d: 2000, b: 5600 }], [{ d: 2000, b: 9300 }], [{ d: 2000, b: 22700 }] ] }, $ArrowNavigatorOptions: { $Class: $JssorArrowNavigator$ }, $BulletNavigatorOptions: { $Class: $JssorBulletNavigator$ } }; var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options); /*#region responsive code begin*/ var MAX_WIDTH = 980; function ScaleSlider() { var containerElement = jssor_1_slider.$Elmt.parentNode; var containerWidth = containerElement.clientWidth; if (containerWidth) { var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth); jssor_1_slider.$ScaleWidth(expectedWidth); } else { window.setTimeout(ScaleSlider, 30); } } ScaleSlider(); $Jssor$.$AddEvent(window, "load", ScaleSlider); $Jssor$.$AddEvent(window, "resize", ScaleSlider); $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider); /*#endregion responsive code end*/ }; </script> <style> /*jssor slider loading skin spin css*/ .jssorl-009-spin img { animation-name: jssorl-009-spin; animation-duration: 1.6s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes jssorl-009-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*jssor slider bullet skin 101 css*/ .jssorb101 .i { position: absolute; cursor: pointer; } .jssorb101 .i .ci { fill: #000; } .jssorb101 .i .co { fill: #fff; opacity: .3; } .jssorb101 .i:hover .co { fill: #ff9933; opacity: 1; } .jssorb101 .i:hover .ci { fill: #fff; } .jssorb101 .iav .ci { fill: #fff; stroke-width: 0; } .jssorb101 .iav .co { fill: #46d1d3; opacity: 1; } .jssorb101 .i.idn { opacity: .3; } /*jssor slider arrow skin 051 css*/ .jssora051 { display: block; position: absolute; cursor: pointer; } .jssora051 .a { fill: none; stroke: #fff; stroke-width: 360; stroke-miterlimit: 10; } .jssora051:hover { opacity: .8; } .jssora051.jssora051dn { opacity: .5; } .jssora051.jssora051ds { opacity: .3; pointer-events: none; } </style> <div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:980px;height:380px;overflow:hidden;visibility:hidden;">  <div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);"> </div> <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden;"> <div data-b="0" data-p="680"> <img data-u="image" src="https://www.jssor.com/files/demos/img/present/04.jpg"/> <div data-ts="preserve-3d" style="left:460px;top:77px;width:460px;height:210px;position:absolute;"> <img data-to="50% 50%" data-t="0" style="left:89px;top:-300px;width:210px;height:178px;position:absolute;opacity:0;max-width:210px;" src="https://www.jssor.com/files/demos/img/present/02/mock-pc.png"/> <img data-to="50% 50%" data-t="1" style="left:-200px;top:55px;width:114px;height:144px;position:absolute;opacity:0;max-width:114px;" src="https://www.jssor.com/files/demos/img/present/02/mock-ipad.png"/> <img data-to="50% 50%" data-t="2" style="left:420px;top:88px;width:219px;height:120px;position:absolute;opacity:0;max-width:219px;" src="https://www.jssor.com/files/demos/img/present/02/mock-laptop.png"/> </div> <div data-to="0% 100%" data-ts="preserve-3d" data-t="3" style="left:-100px;top:385px;width:257px;height:127px;position:absolute;opacity:0;"> <div data-ts="preserve-3d" style="left:34px;top:4px;width:198px;height:112px;position:absolute;overflow:hidden;"> <img data-to="50% 50%" data-t="4" style="left:-2px;top:-2px;width:408px;height:116px;position:absolute;max-width:408px;" src="https://www.jssor.com/files/demos/img/present/02/mock-phone-slider-flat.jpg"/> </div> <img style="left:0px;top:0px;width:257px;height:127px;position:absolute;max-width:257px;" src="https://www.jssor.com/files/demos/img/present/02/mock-phone.png"/> <img data-to="50% 50%" data-t="5" style="left:139px;top:22px;width:108px;height:108px;position:absolute;max-width:108px;" src="https://www.jssor.com/files/demos/img/present/02/circle-hollow.png"/> <img data-to="50% 50%" data-t="6" style="left:148px;top:31px;width:90px;height:90px;position:absolute;max-width:90px;" src="https://www.jssor.com/files/demos/img/present/02/circle-solid.png"/> <img data-to="50% 50%" data-t="7" style="left:300px;top:100px;width:63px;height:77px;position:absolute;opacity:0;max-width:63px;" src="https://www.jssor.com/files/demos/img/present/02/hand.png"/> <img data-to="50% 50%" data-t="8" style="left:255px;top:-44px;width:75px;height:20px;position:absolute;opacity:0;max-width:75px;" src="https://www.jssor.com/files/demos/img/present/02/swipe-arrow.png"/> </div> </div> <div data-b="1" data-p="680"> <img data-u="image" src="https://www.jssor.com/files/demos/img/present/02.jpg"/> <div data-ts="flat" data-p="1360" style="left:0px;top:0px;width:980px;height:380px;position:absolute;overflow:hidden;"> <div data-to="50% 50%" data-ts="preserve-3d" data-t="9" style="left:-36px;top:150px;width:1053px;height:150px;position:absolute;"> <div data-to="100% 50%" data-t="10" style="left:1030px;top:0px;width:72px;height:72px;position:absolute;background-color:#eb9434;"> <div data-t="11" style="left:0px;top:0px;width:72px;height:72px;position:absolute;opacity:0;color:#ffffff;font-size:46px;line-height:1.57;text-align:center;"> All </div> </div> <div data-to="0% 50%" data-t="12" style="left:360px;top:0px;width:175px;height:72px;position:absolute;opacity:0;color:#ffffff;font-size:45px;line-height:1.6;text-align:center;background-color:#eb9434;"> Devices </div> <div data-to="0% 50%" data-t="13" style="left:535px;top:0px;width:230px;height:72px;position:absolute;opacity:0;color:#ffffff;font-size:45px;line-height:1.6;text-align:center;background-color:#eb9434;"> Supported </div> <div data-to="50% 50%" data-t="14" style="left:238px;top:360px;width:577px;height:30px;position:absolute;color:#ffffff;font-size:24px;line-height:1.25;text-align:center;">Jssor Slider is one of the most reliable sliders</div> </div> <div data-to="50% 50%" data-ts="preserve-3d" data-t="15" style="left:182px;top:70px;width:616px;height:150px;position:absolute;"> <img data-to="50% 50%" data-t="16" style="left:266px;top:22px;width:84px;height:84px;position:absolute;max-width:84px;" src="https://www.jssor.com/files/demos/img/present/03/ios.png"/> <img data-to="50% 50%" data-t="17" style="left:260px;top:16px;width:96px;height:96px;position:absolute;opacity:0;max-width:96px;" src="https://www.jssor.com/files/demos/img/present/03/circle.png"/> <div data-to="50% 50%" data-t="18" style="left:260px;top:195px;width:96px;height:30px;position:absolute;opacity:0;color:#ffffff;font-size:18px;line-height:1.67;text-align:center;">IOS</div> <img data-to="50% 50%" data-t="19" style="left:22px;top:22px;width:84px;height:84px;position:absolute;max-width:84px;" src="https://www.jssor.com/files/demos/img/present/03/android.png"/> <img data-to="50% 50%" data-t="20" style="left:16px;top:16px;width:96px;height:96px;position:absolute;opacity:0;max-width:96px;" src="https://www.jssor.com/files/demos/img/present/03/circle.png"/> <div data-to="50% 50%" data-t="21" style="left:166px;top:125px;width:96px;height:30px;position:absolute;opacity:0;color:#ffffff;font-size:18px;line-height:1.67;text-align:center;">Android</div> <img data-to="50% 50%" data-t="22" style="left:510px;top:22px;width:84px;height:84px;position:absolute;max-width:84px;" src="https://www.jssor.com/files/demos/img/present/03/windows.png"/> <img data-to="50% 50%" data-t="23" style="left:504px;top:16px;width:96px;height:96px;position:absolute;opacity:0;max-width:96px;" src="https://www.jssor.com/files/demos/img/present/03/circle.png"/> <div data-to="50% 50%" data-t="24" style="left:354px;top:125px;width:96px;height:30px;position:absolute;opacity:0;color:#ffffff;font-size:18px;line-height:1.67;text-align:center;">Windows</div> </div> </div> <div data-ts="preserve-3d" style="left:327px;top:20px;width:336px;height:312px;position:absolute;"> <div data-to="50% 50%" data-ts="preserve-3d" data-t="25" style="left:104px;top:82px;width:128px;height:147px;position:absolute;"> <img data-to="50% 50%" data-t="26" style="left:0px;top:0px;width:128px;height:147px;position:absolute;opacity:0;max-width:128px;" src="https://www.jssor.com/files/demos/img/present/03/hexagon-hollow-big.png"/> <img data-to="50% 50%" data-t="27" style="left:8px;top:9px;width:112px;height:129px;position:absolute;opacity:0;max-width:112px;" src="https://www.jssor.com/files/demos/img/present/03/hexagon-solid-yellow.png"/> <div data-t="28" style="left:0px;top:20px;width:128px;height:90px;position:absolute;opacity:0;font-size:20px;line-height:1.5;text-align:center;"> All <br/> Browsers <br/> Supported </div> </div> <div data-ts="preserve-3d" style="left:187px;top:0px;width:90px;height:104px;position:absolute;"> <img data-to="50% 50%" data-t="29" style="left:0px;top:0px;width:90px;height:104px;position:absolute;opacity:0;max-width:90px;" src="https://www.jssor.com/files/demos/img/present/03/hexagon-hollow.png"/> <img data-to="50% 50%" data-t="30" style="left:7px;top:8px;width:76px;height:88px;position:absolute;opacity:0;max-width:76px;" src="https://www.jssor.com/files/demos/img/present/03/hexagon-solid.png"/> <img data-to="50% 50%" data-t="31" style="left:26px;top:33px;width:38px;height:38px;position:absolute;opacity:0;max-width:38px;" src="https://www.jssor.com/files/demos/img/present/03/opera.png"/> </div> <div data-ts="preserve-3d" style="left:246px;top:104px;width:90px;height:104px;position:absolute;"> <img data-to="50% 50%" data-t="32" style="left:0px;top:0px;width:90px;height:104px;position:absolute;opacity:0;max-width:90px;" src="https://www.jssor.com/files/demos/img/present/03/hexagon-hollow.png"/> <img data-to="50% 50%" data-t="33" style="left:7px;top:8px;width:76px;height:88px;position:absolute;opacity:0;max-width:76px;" src="https://www.jssor.com/files/demos/img/present/03/hexagon-solid.png"/> <img data-to="50% 50%" data-t="34" style="left:26px;top:33px;width:38px;height:38px;position:absolute;opacity:0;max-width:38px;" src="https://www.jssor.com/files/demos/img/present/03/firefox.png"/> </div> <div data-ts="preserve-3d" style="left:187px;top:208px;width:90px;height:104px;position:absolute;"> <img data-to="50% 50%" data-t="35" style="left:0px;top:0px;width:90px;height:104px;position:absolute;opacity:0;max-width:90px;" src="https://www.jssor.com/files/demos/img/present/03/hexagon-hollow.png"/> <img data-to="50% 50%" data-t="36" style="left:7px;top:8px;width:76px;height:88px;position:absolute;opacity:0;max-width:76px;" src="https://www.jssor.com/files/demos/img/present/03/hexagon-solid.png"/> <img data-to="50% 50%" data-t="37" style="left:26px;top:33px;width:38px;height:38px;position:absolute;opacity:0;max-width:38px;" src="https://www.jssor.com/files/demos/img/present/03/ie.png"/> </div> <div data-ts="preserve-3d" style="left:59px;top:208px;width:90px;height:104px;position:absolute;"> <img data-to="50% 50%" data-t="38" style="left:0px;top:0px;width:90px;height:104px;position:absolute;opacity:0;max-width:90px;" src="https://www.jssor.com/files/demos/img/present/03/hexagon-hollow.png"/> <img data-to="50% 50%" data-t="39" style="left:7px;top:8px;width:76px;height:88px;position:absolute;opacity:0;max-width:76px;" src="https://www.jssor.com/files/demos/img/present/03/hexagon-solid.png"/> <img data-to="50% 50%" data-t="40" style="left:26px;top:33px;width:38px;height:38px;position:absolute;opacity:0;max-width:38px;" src="https://www.jssor.com/files/demos/img/present/03/edge.png"/> </div> <div data-ts="preserve-3d" style="left:0px;top:104px;width:90px;height:104px;position:absolute;"> <img data-to="50% 50%" data-t="41" style="left:0px;top:0px;width:90px;height:104px;position:absolute;opacity:0;max-width:90px;" src="https://www.jssor.com/files/demos/img/present/03/hexagon-hollow.png"/> <img data-to="50% 50%" data-t="42" style="left:7px;top:8px;width:76px;height:88px;position:absolute;opacity:0;max-width:76px;" src="https://www.jssor.com/files/demos/img/present/03/hexagon-solid.png"/> <img data-to="50% 50%" data-t="43" style="left:26px;top:33px;width:38px;height:38px;position:absolute;opacity:0;max-width:38px;" src="https://www.jssor.com/files/demos/img/present/03/safari.png"/> </div> <div data-ts="preserve-3d" style="left:59px;top:0px;width:90px;height:104px;position:absolute;"> <img data-to="50% 50%" data-t="44" style="left:0px;top:0px;width:90px;height:104px;position:absolute;opacity:0;max-width:90px;" src="https://www.jssor.com/files/demos/img/present/03/hexagon-hollow.png"/> <img data-to="50% 50%" data-t="45" style="left:7px;top:8px;width:76px;height:88px;position:absolute;opacity:0;max-width:76px;" src="https://www.jssor.com/files/demos/img/present/03/hexagon-solid.png"/> <img data-to="50% 50%" data-t="46" style="left:26px;top:33px;width:38px;height:38px;position:absolute;opacity:0;max-width:38px;" src="https://www.jssor.com/files/demos/img/present/03/chrome.png"/> </div> </div> </div> <div data-b="2" data-p="680"> <img data-u="image" src="https://www.jssor.com/files/demos/img/present/01.jpg"/> <div data-ts="flat" data-p="850" style="left:0px;top:0px;width:980px;height:380px;position:absolute;overflow:hidden;"> <div data-to="50% 50%" data-t="47" style="left:200px;top:-210px;width:580px;height:225px;position:absolute;"> <img style="left:0px;top:0px;width:580px;height:225px;position:absolute;max-width:580px;" src="https://www.jssor.com/files/demos/img/present/01/main.jpg"/> <div data-t="48" style="left:30px;top:30px;width:180px;height:40px;position:absolute;opacity:0.5;color:#ffffff;font-size:22px;line-height:1.82;text-align:center;background-color:#000000;">Main Image</div> </div> <div data-to="50% 50%" data-t="49" style="left:200px;top:-210px;width:580px;height:225px;position:absolute;"> <img data-t="50" style="left:0px;top:0px;width:580px;height:225px;position:absolute;max-width:580px;" src="https://www.jssor.com/files/demos/img/present/01/layer-blurred-white.png"/> <img style="left:170px;top:140px;width:55px;height:51px;position:absolute;max-width:55px;" src="https://www.jssor.com/files/demos/img/present/01/butterfly-light-yellow.png"/> <div data-t="51" style="left:30px;top:30px;width:180px;height:40px;position:absolute;opacity:0.5;color:#ffffff;font-size:22px;line-height:1.82;text-align:center;background-color:#000000;">Image Layer</div> </div> <div data-to="50% 50%" data-t="52" style="left:200px;top:-210px;width:580px;height:225px;position:absolute;"> <img data-t="53" style="left:0px;top:0px;width:580px;height:225px;position:absolute;max-width:580px;" src="https://www.jssor.com/files/demos/img/present/01/layer-blurred-white.png"/> <div data-t="54" style="left:30px;top:100px;width:280px;height:50px;position:absolute;font-size:40px;line-height:1.25;text-align:center;">SOME TEXT</div> <div data-t="55" style="left:30px;top:30px;width:180px;height:40px;position:absolute;opacity:0.5;color:#ffffff;font-size:22px;line-height:1.82;text-align:center;background-color:#000000;">Text layer</div> </div> <div data-to="50% 50%" data-t="56" style="left:200px;top:-210px;width:580px;height:225px;position:absolute;"> <img data-t="57" style="left:0px;top:0px;width:580px;height:225px;position:absolute;max-width:580px;" src="https://www.jssor.com/files/demos/img/present/01/layer-blurred-white.png"/> <div data-t="58" style="left:240px;top:25px;width:300px;height:175px;position:absolute;background-color:#ffff8c;"></div> <div data-t="59" style="left:30px;top:30px;width:180px;height:40px;position:absolute;opacity:0.5;color:#ffffff;font-size:22px;line-height:1.82;text-align:center;background-color:#000000;">Panel Layer</div> </div> <div data-to="50% 50%" data-t="60" style="left:200px;top:-210px;width:580px;height:225px;position:absolute;"> <img data-t="61" style="left:0px;top:0px;width:580px;height:225px;position:absolute;max-width:580px;" src="https://www.jssor.com/files/demos/img/present/01/layer-blurred-white.png"/> <div data-t="62" style="left:30px;top:30px;width:250px;height:40px;position:absolute;opacity:0.5;color:#ffffff;font-size:22px;line-height:1.82;text-align:center;background-color:#000000;">Nested Text Layer</div> <div style="left:320px;top:40px;width:200px;height:50px;position:absolute;font-size:26px;line-height:1.92;text-align:center;">Nested Text</div> </div> <div data-to="50% 50%" data-t="63" style="left:200px;top:-210px;width:580px;height:225px;position:absolute;"> <img data-t="64" style="left:0px;top:0px;width:580px;height:225px;position:absolute;max-width:580px;" src="https://www.jssor.com/files/demos/img/present/01/layer-blurred-white.png"/> <div data-t="65" style="left:30px;top:30px;width:250px;height:40px;position:absolute;opacity:0.5;color:#ffffff;font-size:22px;line-height:1.82;text-align:center;background-color:#000000;">Nested Image Layer</div> <img style="left:249px;top:78px;width:87px;height:92px;position:absolute;max-width:87px;" src="https://www.jssor.com/files/demos/img/present/01/butterfly-blue.png"/> </div> <div data-to="50% 50%" data-t="66" style="left:200px;top:-210px;width:580px;height:225px;position:absolute;"> <img data-t="67" style="left:0px;top:0px;width:580px;height:225px;position:absolute;max-width:580px;" src="https://www.jssor.com/files/demos/img/present/01/layer-blurred-white.png"/> <div data-t="68" style="left:30px;top:30px;width:250px;height:40px;position:absolute;opacity:0.5;color:#ffffff;font-size:22px;line-height:1.82;text-align:center;background-color:#000000;">Nested Image Layer</div> <img style="left:364px;top:126px;width:66px;height:66px;position:absolute;max-width:66px;" src="https://www.jssor.com/files/demos/img/present/01/butterfly-dark-yellow.png"/> </div> <div data-to="50% 50%" data-t="69" style="left:200px;top:-210px;width:580px;height:225px;position:absolute;"> <img data-t="70" style="left:0px;top:0px;width:580px;height:225px;position:absolute;max-width:580px;" src="https://www.jssor.com/files/demos/img/present/01/layer-blurred-white.png"/> <div data-t="71" style="left:30px;top:30px;width:250px;height:40px;position:absolute;opacity:0.5;color:#ffffff;font-size:22px;line-height:1.82;text-align:center;background-color:#000000;">Nested Image Layer</div> <img style="left:463px;top:113px;width:48px;height:49px;position:absolute;max-width:48px;" src="https://www.jssor.com/files/demos/img/present/01/butterfly-red.png"/> </div> <div data-to="50% 50%" data-ts="preserve-3d" data-t="72" style="left:200px;top:-210px;width:580px;height:225px;position:absolute;"> <img data-t="73" style="left:0px;top:0px;width:580px;height:225px;position:absolute;max-width:580px;" src="https://www.jssor.com/files/demos/img/present/01/layer-blurred-white.png"/> <div data-t="74" style="left:30px;top:30px;width:200px;height:40px;position:absolute;opacity:0.5;color:#ffffff;font-size:22px;line-height:1.82;text-align:center;background-color:#000000;">Arrow/Bullets</div> <img data-to="50% 50%" data-t="75" style="left:250px;top:93px;width:18px;height:38px;position:absolute;opacity:0;max-width:18px;" src="https://www.jssor.com/files/demos/img/present/01/arrow-left.png"/> <img data-to="50% 50%" data-t="76" style="left:312px;top:93px;width:18px;height:38px;position:absolute;opacity:0;max-width:18px;" src="https://www.jssor.com/files/demos/img/present/01/arrow-right.png"/> <img data-to="50% 50%" data-t="77" style="left:259px;top:0px;width:8px;height:8px;position:absolute;opacity:0;max-width:8px;" src="https://www.jssor.com/files/demos/img/present/01/dot.png"/> <img data-to="50% 50%" data-t="78" style="left:277px;top:0px;width:8px;height:8px;position:absolute;opacity:0;max-width:8px;" src="https://www.jssor.com/files/demos/img/present/01/dot.png"/> <img data-to="50% 50%" data-t="79" style="left:295px;top:0px;width:8px;height:8px;position:absolute;opacity:0;max-width:8px;" src="https://www.jssor.com/files/demos/img/present/01/dot.png"/> <img data-to="50% 50%" data-t="80" style="left:313px;top:0px;width:8px;height:8px;position:absolute;opacity:0;max-width:8px;" src="https://www.jssor.com/files/demos/img/present/01/dot.png"/> </div> </div> </div> <a href="https://www.jssor.com/demos/image-slider.slider/-edit.html" data-u="any" target="_blank" style="left:450px;top:22px;width:220px;height:36px;display:block;position:absolute;color:#ffffff;font-size:22px;line-height:1.64;text-align:center;">See Slider Composer</a> <a href="https://www.jssor.com/demos/new.slider/-edit.html" data-u="any" target="_blank" style="left:720px;top:22px;width:220px;height:36px;display:block;position:absolute;color:#ffffff;font-size:22px;line-height:1.64;text-align:center;">Create Slider</a> </div>  <div data-u="navigator" class="jssorb101" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75"> <div data-u="prototype" class="i" style="width:16px;height:16px;"> <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;"> <circle class="co" cx="8000" cy="8000" r="5000"></circle> <circle class="ci" cx="8000" cy="8000" r="3000"></circle> </svg> </div> </div>  <div data-u="arrowleft" class="jssora051" style="width:55px;height:55px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75"> <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;"> <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline> </svg> </div> <div data-u="arrowright" class="jssora051" style="width:55px;height:55px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75"> <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;"> <polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline> </svg> </div> </div> <script type="text/javascript"> jssor_1_slider_init(); </script>  <script src="https://www.jssor.com/files/script/site/jssor.user.commands.init-1.30.0.min.js"></script> <script> jssor_user_commands_init({ accessControl: { "fileInfo": { "id": 0, "name": "demos/introduction-slider.slider" } } }); </script> <div style="height: 1px;"></div>  <link rel="stylesheet" type="text/css" media="all" href="https://www.jssor.com/wp-content/themes/m4vpkj4gylrtdpvyyq33z244770/style.css" /> <div class="ad_title"> <div id="ad_title_banner" class="ad_title_banner">  <ins id="ad_banner_728_second" class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-5323311666976160" data-ad-slot="9380985535"></ins> <script> new function () { var availableWidth = document.body.clientWidth || 728; window.screen && window.screen.availWidth && (availableWidth = Math.max(availableWidth, window.screen.availWidth)); if (availableWidth < 728) { var adTitleBanner = document.getElementById("ad_title_banner"); adTitleBanner && adTitleBanner.parentNode.removeChild(adTitleBanner); } else { } }; </script> </div> <div class="ad_title_caption" style="position: absolute; top: 0px; left: 0px; margin-left: 30px; line-height: 90px; font-size: 26px; color: #ff8400; "> <span class="sqc7vfmracrdh5nsr">Demo - Sliders</span> </div> </div> <div style="margin: 0 auto; width: 100%; max-width: 980px; background-color: #EAEAEA; overflow: hidden;"> <div class="thumb_wrapper"> <div class="thumb"> <div class="side_mark">Free</div> <a class="thumbb" href="https://www.jssor.com/demos/full-width-slider.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/demos/full-width/thumb-full-width-slider-300.jpg" alt="fashion slider"/></div> <div class="thumbc">Full Width Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Free</div> <a class="thumbb" href="https://www.jssor.com/demos/image-slider.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/demos/image-slider/thumb-image-slider-300.jpg" alt="image slider jquery javascript+html code example for website design, website development, web design, web development, web designer, web developer, website designer, website developer, website, website builder, web page"/></div> <div class="thumbc">Image Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Free</div> <a class="thumbb" href="https://www.jssor.com/demos/ski/ski.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/demos/ski/thumb-ski-slider-300.jpg" alt="ski slider"/></div> <div class="thumbc">Ski Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Free</div> <a class="thumbb" href="https://www.jssor.com/demos/product/product.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/demos/product/thumb-product-slider-300.jpg" alt="product slider"/></div> <div class="thumbc">Product Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Free</div> <a class="thumbb" href="https://www.jssor.com/demos/village-tour/village-tour.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/demos/village-tour/thumb-village-tour-slider-300.jpg" alt="village-tour"/></div> <div class="thumbc">Village Tour Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Free</div> <a class="thumbb" href="https://www.jssor.com/demos/sport/sport.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/demos/sport/thumb-sport-slider-300.jpg" alt="sport slider"/></div> <div class="thumbc">Sport Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Premium</div> <a class="thumbb" href="https://www.jssor.com/premium/fashion/fashion.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/premium/fashion/thumb-fashion-slider-300.jpg" alt="fashion slider"/></div> <div class="thumbc">Fashion Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Ad</div> <div class="ad_rect"> </div> </div> <div class="thumb"> <div class="side_mark">Premium</div> <a class="thumbb" href="https://www.jssor.com/premium/music/music.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/premium/music/thumb-music-slider-300.jpg" alt="music slider"/></div> <div class="thumbc">Music Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Premium</div> <a class="thumbb" href="https://www.jssor.com/premium/food/food.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/premium/food/thumb-food-slider-300.jpg" alt="food slider"/></div> <div class="thumbc">Food Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Premium</div> <a class="thumbb" href="https://www.jssor.com/premium/interior-design/interior-design.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/premium/interior-design/thumb-interior-design-slider-300.jpg" alt="interior design slider"/></div> <div class="thumbc">Intgerior Design Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Premium</div> <a class="thumbb" href="https://www.jssor.com/premium/team/team.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/premium/team/thumb-team-slider-300.jpg" alt="team slider"/></div> <div class="thumbc">Team Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Premium</div> <a class="thumbb" href="https://www.jssor.com/premium/testimonial/testimonial.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/premium/testimonial/thumb-testimonial-slider-300.jpg" alt="testimonial"/></div> <div class="thumbc">Testimonial Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Premium</div> <a class="thumbb" href="https://www.jssor.com/premium/sales/sales.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/premium/sales/thumb-sales-slider-300.jpg" alt="sales slider"/></div> <div class="thumbc">Sales Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Premium</div> <a class="thumbb" href="https://www.jssor.com/premium/digital-marketing/digital-marketing.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/premium/digital-marketing/thumb-digital-marketing-300.jpg" alt="digital marketing slider"/></div> <div class="thumbc">Digital Marketing Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Free</div> <a class="thumbb" href="https://www.jssor.com/demos/image-gallery.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/image/demo/t-image-gallery.jpg" alt="image gallery jquery javascript+html code example for website design, website development, web design, web development, web designer, web developer, website designer, website developer, website, website builder, web page"/></div> <div class="thumbc">Image Gallery</div> </a> </div> <div class="thumb"> <div class="side_mark">Ad</div> <div class="ad_rect"> </div> </div> <div class="thumb"> <div class="side_mark">Free</div> <a class="thumbb" href="https://www.jssor.com/demos/image-gallery-with-vertical-thumbnail.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/image/demo/t-image-gallery-with-vertical-thumbnail.jpg" alt="image gallery with vertical thumbnail jquery javascript+html code example for website design, website development, web design, web development, web designer, web developer, website designer, website developer, website, website builder, web page"/></div> <div class="thumbc">Image Gallery with Vertical Thumbnail</div> </a> </div> <div class="thumb"> <div class="side_mark">Free</div> <a class="thumbb" href="https://www.jssor.com/demos/banner-slider.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/image/demo/t-banner-slider.jpg" alt="banner slider jquery javascript+html code example for website design, website development, web design, web development, web designer, web developer, website designer, website developer, website, website builder, web page"/></div> <div class="thumbc">Banner Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Free</div> <a class="thumbb" href="https://www.jssor.com/demos/carousel-slider.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/image/demo/t-carousel-slider.jpg" alt="carousel jquery javascript+html code example for website design, website development, web design, web development, web designer, web developer, website designer, website developer, website, website builder, web page"/></div> <div class="thumbc">Carousel Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Free</div> <a class="thumbb" href="https://www.jssor.com/demos/banner-rotator.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/image/demo/t-banner-rotator.jpg" alt="banner rotator jquery javascript+html code example for website design, website development, web design, web development, web designer, web developer, website designer, website developer, website, website builder, web page"/></div> <div class="thumbc">Banner Rotator</div> </a> </div> <div class="thumb"> <div class="side_mark">Free</div> <a class="thumbb" href="https://www.jssor.com/demos/scrolling-logo-thumbnail-slider.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/image/demo/t-scrolling-logo-thumbnail-slider.jpg" alt="scrolling logo thumbnail slider jquery javascript+html code example for website design, website development, web design, web development, web designer, web developer, website designer, website developer, website, website builder, web page"/></div> <div class="thumbc">Scrolling Logo/Thumbnail Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Free</div> <a class="thumbb" href="https://www.jssor.com/demos/different-size-photo-slider.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/image/demo/t-different-size-photo-slider.jpg" alt="different size photo slider jquery javascript+html code example for website design, website development, web design, web development, web designer, web developer, website designer, website developer, website, website builder, web page"/></div> <div class="thumbc">Different Size Photo Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Free</div> <a class="thumbb" href="https://www.jssor.com/demos/nearby-image-partial-visible-slider.html"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/image/demo/t-nearby-image-partial-visible-slider.jpg" alt="nearby image partial visible slider jquery javascript+html code example for website design, website development, web design, web development, web designer, web developer, website designer, website developer, website, website builder, web page"/></div> <div class="thumbc">Nearby Image Partial Visible Slider</div> </a> </div> <div class="thumb"> <div class="side_mark">Free</div> <a class="thumbb" href="https://www.jssor.com/demos/full-window-for-mobile.html" target="_blank" rel="noopener"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/image/demo/t-full-window-for-mobile.jpg" alt="Full Window Slider Mobile Image Slider/Slideshow/Gallery/Banner/Rotator/Scroller"/></div> <div class="thumbc">Full Window Slider (Mobile)</div> </a> </div> <div class="thumb"> <div class="side_mark">Free</div> <a class="thumbb" href="https://www.jssor.com/demos/full-window-for-pc.html" target="_blank" rel="noopener"> <div class="thumbi"><img decoding="async" src="https://www.jssor.com/files/image/demo/t-full-window-for-pc.jpg" alt="Full Window Slider PC Image Carousel/Slideshow/Gallery/Banner/Rotator/Scroller"/></div> <div class="thumbc">Full Window Slider (PC)</div> </a> </div> </div> </div>  <div style="height: 20px;"></div> <div style="margin: 0 auto; width: 100%; max-width: 980px; background-color: #EAEAEA; overflow: hidden;"> <div class="thumb_wrapper">  <div class="feature"> <div class="featurec"> Touch Swipe by Finger/Mouse </div> <div class="featuret"> Jssor Slider is touch swipe image slider carousel with 200+ slideshow effects. When touch Jssor Slider, it will freeze and then move to the direction that finger swipes to. It comes with javascript library source code. </div> </div> <div class="feature"> <div class="featurec"> Responsive </div> <div class="featuret"> Jssor Slider comes responsive see <a class="text-warning" href="https://www.jssor.com/help/responsive-settings.html">Responsive Settings</a> </div> </div> <div class="feature"> <div class="featurec"> Mobile Device Optimized </div> <div class="featuret"> Jssor Slider works on any javascript enabled browser, including Windows Phone, iOS, Android and Opera Mobile etc. <br class="sqc7vfmracrdh5nsr"/> And Jssor Slider is well tested on mobile phone. </div> </div> <div class="feature"> <div class="featurec"> Both jQuery Slider format, No-jQuery foramt Available </div> <div class="featuret"> Jssor jQuery slider plugin and No-jQuery version slider work almost the same, both are for image slider carousel, content slider carousel. Slideshow and caption slide animation are all available for both version.<br class="sqc7vfmracrdh5nsr"/> jQuery developers benifit on jQuery js library. No-jQuery version is slider carousel without jQuery. Non-jQuery developers benifite on light weight cut/paste code snipet to embed into any web page freely. </div> </div> <div class="feature"> <div class="featurec"> Bootstrap Carousel Slider </div> <div class="featuret"> It's easy to workout bootstrap carousel and bootstrap slider. There are 2 simple examples which demostrates how to improve user experience of your bootstrap website with jssor carousel slider. Please download <a href="https://www.jssor.com/download-bootstrap-carousel-slider-example.html">Bootstrap Carousel Slider Example</a>. </div> </div> <div class="feature"> <div class="featurec"> 200+ Slideshow Effects/Transitions </div> <div class="featuret"> Jssor Slider comes with 200+ awesome slideshow effects, and the most scalable slideshow transition build tool enables you build infinite slideshow transitions. See <a href="https://www.jssor.com/help/slideshow-transitions.html">200+ slideshow transitions</a>. </div> </div> <div class="feature"> <div class="featurec"> 30+ Professional Demos </div> <div class="featuret"> It comes with 20+ professional jquery+javascript+html code templates (and growing). </div> </div> <div class="feature"> <div class="featurec"> Scalable Layout Engine </div> <div class="featuret"> Scalable layout engine makes deep customization possible. It means that the interface is adaptive, user can add or remove navigator, arrow navigator and thumbnail navigator, or any decoration interface. User can populate skin freely. </div> </div> <div class="feature"> <div class="featurec"> Light Weight by Smart Compression </div> <div class="featuret"> Jssor Slider is independent javascript slider carousel, it depends no third party javascript library. The smart compression engine reserves code only necessary. All codes relate to unused features will be removed clearly. The size of final independent javascript code is minimum 15 KB. </div> </div> <div class="feature"> <div class="featurec"> Cut & Paste, Free Embedding </div> <div class="featuret"> Jssor Slider comes with clean and anonymous wrapped javascript code snippet. No additional css file needed, no additional javascript file needed. There is no version conflict issue, there is no conflict with any other javascript library. </div> </div> <div class="feature"> <div class="featurec"> Cross Browser, All Browsers Supported </div> <div class="featuret"> Jssor Slider is cross browser slider carousel, all browsers are supported (IE 6+, Firefox 3.6+, Chrome 3+, Safari 3+, Opera 10+, iOS Safari, Opera Mobile, Android Browser, iPhone, iPad, Mac, Windows Surface etc.). </div> </div> <div class="feature"> <div class="featurec"> Development Kit wit tons of demos </div> <div class="featuret"> Jssor Slider comes with detailed api documentation, tons of simple examples, 30+ professional demos. </div> </div> <div class="feature"> <div class="featurec"> Free Upgrades, Free Future Versions </div> <div class="featuret"> Free download, free upgrade. Always free with no charge. </div> </div> <div class="feature"> <div class="featurec"> Arrow Key Navigation </div> <div class="featuret"> Keyboard arrow key navigation is enabled, press arrow left key to swipe left, press arrow right key to swipe right. </div> </div>  </div> </div> <div style="height: 30px;"></div>  <div data-interaction="user-commands" class="share-box"> <div data-command="jssor-qrcode" class="cmd-btn" title="QR code"></div> <div data-command="share-facebook" class="cmd-btn jic-facebook" title="Share on Facebook"></div> <div data-command="share-twitter" class="cmd-btn jic-twitter" title="Share on Twitter"></div> <div data-command="share-linkedin" class="cmd-btn jic-linkedin" title="Share on LinkedIn"></div> <div data-command="share-reddit" class="cmd-btn jic-reddit" title="Share on Reddit"></div> <div data-command="share-pinterest" class="cmd-btn jic-pinterest" title="Share on Pinterest"></div> <div data-command="share-tumblr" class="cmd-btn jic-tumblr" title="Share on Tumblr"></div> <div data-command="share-stumbleupon" class="cmd-btn jic-stumbleupon" title="Share on StumbleUpon"></div> <div data-command="share-digg" class="cmd-btn jic-digg" title="Share on digg"></div> <div data-command="share-okru" class="cmd-btn jic-okru" title="Share on ok.ru"></div> <div data-command="share-xing" class="cmd-btn jic-xing" title="Share on Xing"></div> <div data-command="share-weibo" class="cmd-btn jic-weibo" title="Share on WeiBo"></div> <div data-command="share-qzone" class="cmd-btn jic-qzone" title="Share on QZone"></div> <div data-command="share-baidu" class="cmd-btn jic-baidu" title="Share on BaiDu TieBa"></div> <div data-command="share-douban" class="cmd-btn jic-douban" title="Share on DouBan"></div> <div data-command="share-renren" class="cmd-btn jic-renren" title="Share on RenRen"></div> <div data-command="share-email" class="cmd-btn jic-email" title="Email"></div> </div> <div class="footer"> <div style="position: relative; display: block; margin: 0 auto; padding: 0px; width: 100%; max-width: 980px; height: 60px; line-height:60px; font-size:20px; overflow:hidden;"> <span class="copyright"> Jssor Slider 2024</span>  <div data-interaction="user-commands" class="cmd-box"> <div data-command="jssor-share" class="cmd-btn" title="share"></div> </div>  </div> </div> </body> </html>

CINXE.COM

Responsive Touch Slider/Gallery/Carousel/Banner/Slideshow html