image-gallery.slider - Jssor Slider

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <meta http-equiv="Content-Language" content="en"> <title>image-gallery.slider - Jssor Slider</title>   <style type="text/css"> .elfinder-tree .elfinder-navbar-root .elfinder-navbar-icon { background-position: 0 -16px !important; } </style>  <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-45690170-1'); </script>  <link href="https://www.jssor.com/files/style/site/css/site-style-2.7.0.min.css" rel="stylesheet"/><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>  <link rel="canonical" href="https://www.jssor.com/demos/image-gallery.html" /> <meta property="og:type" content="article" /> <meta property="og:title" content="image-gallery.slider - Jssor Slider" /> <meta property="og:description" content="Demo - Sliders Free Full Width Slider Free Image […]" /> <meta property="og:url" content="https://www.jssor.com/demos/image-gallery.html" /> <meta property="og:site_name" content="Responsive Touch Slider/Gallery/Carousel/Banner/Slideshow html" /> <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/408" /><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/?p=408' /> <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%2Fdemos%2Fimage-gallery.html" /> <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%2Fdemos%2Fimage-gallery.html&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 style="font-family: Arial, sans-serif;"> <form method="post" action="https://www.jssor.com/demos/banner-rotator.html" id="form1" class="mainform"> <div class="aspNetHidden"> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="RzaRQ0DL5sz/ZbGUu3S3uLhB0Vs0i1cGJ10cOrCsFw1Ptv/gV6ho8fMShdYEcn530R69vkF4ycOlRG5U87TEQSjLg3iL5eSE0/RT5c9UDriHgIrQyUlB0iiWIgtUTWRzunEW0H+bCf7rJUcNNMm1VGrKFIm1NK7IAJzAzT2OZ/RP7jjmF3M4yuijBX3UWqE4WkOa953i22sH6MyEsw2nDw=="/> </div> <div class="aspNetHidden"> <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="B6CBD475"/> </div>  <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 class="nav-sign">  <a class="nav-btn nav-signup" href="https://www.jssor.com/action/sign_up.html">Sign up</a> <a style="pointer-events:none" class="nav-btn nav-signin" href="https://www.jssor.com/action/login.html" >Log in</a>  </div>  <div class="menu"> <a href="https://www.jssor.com">Home</a> <a class="current" 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>      <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:12,$Cols:10,$Rows:5,$Opacity:2,$Clip:15,$SlideOut:true,$Formation:$JssorSlideshowFormations$.$FormationStraightStairs,$Assembly:2049,$Easing:$Jease$.$OutQuad}, {$Duration:500,$Delay:40,$Cols:10,$Rows:5,$Opacity:2,$Clip:15,$SlideOut:true,$Easing:$Jease$.$OutQuad}, {$Duration:1000,x:-0.2,$Delay:20,$Cols:16,$SlideOut:true,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Assembly:260,$Easing:{$Left:$Jease$.$InOutExpo,$Opacity:$Jease$.$InOutQuad},$Opacity:2,$Outside:true,$Round:{$Top:0.5}}, {$Duration:1600,y:-1,$Delay:40,$Cols:24,$SlideOut:true,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Easing:$Jease$.$OutJump,$Round:{$Top:1.5}}, {$Duration:1200,x:0.2,y:-0.1,$Delay:16,$Cols:10,$Rows:5,$Opacity:2,$Clip:15,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$Formation:$JssorSlideshowFormations$.$FormationStraightStairs,$Assembly:260,$Easing:{$Left:$Jease$.$InWave,$Top:$Jease$.$InWave,$Clip:$Jease$.$OutQuad},$Round:{$Left:1.3,$Top:2.5}}, {$Duration:1500,x:0.3,y:-0.3,$Delay:20,$Cols:10,$Rows:5,$Opacity:2,$Clip:15,$During:{$Left:[0.2,0.8],$Top:[0.2,0.8]},$Formation:$JssorSlideshowFormations$.$FormationStraightStairs,$Assembly:260,$Easing:{$Left:$Jease$.$InJump,$Top:$Jease$.$InJump,$Clip:$Jease$.$OutQuad},$Round:{$Left:0.8,$Top:2.5}}, {$Duration:1500,x:0.3,y:-0.3,$Delay:20,$Cols:10,$Rows:5,$Opacity:2,$Clip:15,$During:{$Left:[0.1,0.9],$Top:[0.1,0.9]},$SlideOut:true,$Formation:$JssorSlideshowFormations$.$FormationStraightStairs,$Assembly:260,$Easing:{$Left:$Jease$.$InJump,$Top:$Jease$.$InJump,$Clip:$Jease$.$OutQuad},$Round:{$Left:0.8,$Top:2.5}} ]; var jssor_1_options = { $AutoPlay: 1, $SlideshowOptions: { $Class: $JssorSlideshowRunner$, $Transitions: jssor_1_SlideshowTransitions, $TransitionsOrder: 1 }, $ArrowNavigatorOptions: { $Class: $JssorArrowNavigator$ }, $BulletNavigatorOptions: { $Class: $JssorBulletNavigator$, $SpacingX: 16, $SpacingY: 16 } }; 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 053 css*/ .jssorb053 .i {position:absolute;cursor:pointer;} .jssorb053 .i .b {fill:#fff;fill-opacity:0.3;} .jssorb053 .i:hover .b {fill-opacity:.7;} .jssorb053 .iav .b {fill-opacity: 1;} .jssorb053 .i.idn {opacity:.3;} /*jssor slider arrow skin 093 css*/ .jssora093 {display:block;position:absolute;cursor:pointer;} .jssora093 .c {fill:none;stroke:#fff;stroke-width:400;stroke-miterlimit:10;} .jssora093 .a {fill:none;stroke:#fff;stroke-width:400;stroke-miterlimit:10;} .jssora093:hover {opacity:.8;} .jssora093.jssora093dn {opacity:.6;} .jssora093.jssora093ds {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> <img data-u="image" src="https://www.jssor.com/files/demos/img/gallery/980x380/011.jpg"/> </div> <div> <img data-u="image" src="https://www.jssor.com/files/demos/img/gallery/980x380/012.jpg"/> </div> <div> <img data-u="image" src="https://www.jssor.com/files/demos/img/gallery/980x380/013.jpg"/> </div> <div> <img data-u="image" src="https://www.jssor.com/files/demos/img/gallery/980x380/014.jpg"/> </div> <div> <img data-u="image" src="https://www.jssor.com/files/demos/img/gallery/980x380/015.jpg"/> </div> <div> <img data-u="image" src="https://www.jssor.com/files/demos/img/gallery/980x380/016.jpg"/> </div> </div><a data-scale="0" href="https://www.jssor.com" style="display:none;position:absolute;">responsive slider</a> <div data-scale="0" title="Free" style="position:absolute;top:0px;left:0px;min-width:80px;height:24px;background-color:rgba(255,255,140,0.5);font-size:13px;line-height:24px;text-align:center;z-index:1000;">Free </div>  <div data-u="navigator" class="jssorb053" style="position:absolute;bottom:16px;right:16px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75"> <div data-u="prototype" class="i" style="width:12px;height:12px;"> <svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;"> <path class="b" d="M11400,13800H4600c-1320,0-2400-1080-2400-2400V4600c0-1320,1080-2400,2400-2400h6800 c1320,0,2400,1080,2400,2400v6800C13800,12720,12720,13800,11400,13800z"></path> </svg> </div> </div>  <div data-u="arrowleft" class="jssora093" style="width:50px;height:50px;top:0px;left:30px;" 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%;"> <circle class="c" cx="8000" cy="8000" r="5920"></circle> <polyline class="a" points="7777.8,6080 5857.8,8000 7777.8,9920 "></polyline> <line class="a" x1="10142.2" y1="8000" x2="5857.8" y2="8000"></line> </svg> </div> <div data-u="arrowright" class="jssora093" style="width:50px;height:50px;top:0px;right:30px;" 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%;"> <circle class="c" cx="8000" cy="8000" r="5920"></circle> <polyline class="a" points="8222.2,6080 10142.2,8000 8222.2,9920 "></polyline> <line class="a" x1="5857.8" y1="8000" x2="10142.2" y2="8000"></line> </svg> </div> <div data-interaction="user-commands" class="cmd-box" style="width:70px;height:92px;display:none;" data-scale=".2" data-scale-top=".5" data-scale-right=".5"> <div data-command="jssor-editslider" class="cmd-btn cmd-btn-slider" title="edit this slider" style="opacity:.5;pointer-events:none;">Edit  </div> <div data-command="jssor-getslider" class="cmd-btn cmd-btn-slider" title="download this slider">Get  </div> <div data-command="jssor-share" class="cmd-btn cmd-btn-slider" title="share">Share  </div> <div data-command="jssor-loginslider" class="cmd-btn cmd-btn-slider" title="login" style="pointer-events:none">Login  </div> </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/banner-rotator.slider","isReserved":1,"isReadonly":1},"authorInfo":{"userName":"","memberPlan":0},"accessInfo":{"limitedSlides":0,"limitedTransitions":0,"maxUploadFileSize":307200}}, settings: {"resLibCdnUrl":"https://jssors8.azureedge.net"} }); </script>  <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: 10px; clear: both;"></div>  <div class="footer"> <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 data-command="jssor-qrcode" class="cmd-btn" title="QR code"></div> </div>  </div>  </form> </body> </html>

CINXE.COM

image-gallery.slider - Jssor Slider