{"id":464,"date":"2013-08-11T15:41:20","date_gmt":"2013-08-11T15:41:20","guid":{"rendered":"http:\/\/localhost:8888\/test\/?page_id=464"},"modified":"2013-08-11T15:41:20","modified_gmt":"2013-08-11T15:41:20","slug":"shortcode-ux-sliders","status":"publish","type":"page","link":"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-sliders\/","title":{"rendered":"Shortcode &#8211; UX Sliders"},"content":{"rendered":"<p class=\"lead text-center\">\nUX Sliders are inserted with a Shortcode Generator. Its possible to slide almost<br \/>\nanything by wrapping<strong> &#091;ux_slider]   &#091;\/ux_slider] <\/strong>around the content.<\/p>\n<hr \/>\n<p><strong>Available parameters:<\/strong><\/p>\n<pre>&#091;ux_slider timer=\"4500\" arrows=\"false\/true\" bullets=\"false\/true\" auto_slide=\"false\/true\" hide_nav=\"false\/true\" nav_color=\"dark\/light\"]\n\n   &#091;ux_banner] &#091;\/ux_banner]\n   &#091;ux_banner] &#091;\/ux_banner]\n   &#091;ux_banner] &#091;\/ux_banner]\n\n&#091;\/ux_slider]<\/pre>\n<h3 class=\"section-title clearfix  \"> <span>Simple slider with banners<\/span> <\/h3><!-- end section_title -->\n \n<div class=\"ux-slider-wrapper relative\">\n    <div class=\"ux-slider iosSlider  slider-style-normal  slider-nav-light slider-nav-inside slider-nav-circle js-flickity\" \n        data-flickity-options='{ \n            \"cellAlign\": \"center\",\n            \"imagesLoaded\": true,\n            \"lazyLoad\": 1,\n            \"freeScroll\": false,\n            \"wrapAround\": true,\n            \"autoPlay\": 6000,\n            \"prevNextButtons\": true,\n            \"contain\" : true,\n            \"percentPosition\": true,\n            \"pageDots\": true,\n            \"selectedAttraction\" : 0.1,\n            \"friction\": 0.6,\n            \"rightToLeft\": false        }'\n        style=\"\"\n        >\n        \n   <div id=\"banner_1013595254\" class=\"ux_banner dark     \"  style=\"height:400px; background-color:#333\" data-height=\"400px\" role=\"banner\">\n                                  <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:80%;\">\n            <div class=\"inner-wrap animated fadeInLeft\" style=\" \">\n              <h1>Banner 1<\/h1>\n            <\/div>\n          <\/div>  \n        <\/div>\n                     <\/div><!-- end .ux_banner -->\n\n   <div id=\"banner_609859125\" class=\"ux_banner dark     \"  style=\"height:400px; background-color:#333\" data-height=\"400px\" role=\"banner\">\n                                  <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:80%;\">\n            <div class=\"inner-wrap animated flipInX\" style=\" \">\n              <h1>Banner 2<\/h1>\n            <\/div>\n          <\/div>  \n        <\/div>\n                     <\/div><!-- end .ux_banner -->\n\n     <\/div>\n    <div class=\"ux-loading dark\"><\/div>\n<\/div><!-- .ux-slider-wrapper -->\n\n\n<pre><b>&#091;ux_slider]<\/b>\n   &#091;ux_banner] Banner content &#091;\/ux_banner]\n   &#091;ux_banner] Banner content &#091;\/ux_banner]\n<b>&#091;\/ux_slider]<\/b><\/pre>\n<h3 class=\"section-title clearfix  \"> <span>Slider with no directional navigaition<\/span> <\/h3><!-- end section_title -->\n \n<div class=\"ux-slider-wrapper relative\">\n    <div class=\"ux-slider iosSlider  slider-style-normal  slider-nav-light slider-nav-inside slider-nav-false js-flickity\" \n        data-flickity-options='{ \n            \"cellAlign\": \"center\",\n            \"imagesLoaded\": true,\n            \"lazyLoad\": 1,\n            \"freeScroll\": false,\n            \"wrapAround\": true,\n            \"autoPlay\": 6000,\n            \"prevNextButtons\": false,\n            \"contain\" : true,\n            \"percentPosition\": true,\n            \"pageDots\": true,\n            \"selectedAttraction\" : 0.1,\n            \"friction\": 0.6,\n            \"rightToLeft\": false        }'\n        style=\"\"\n        >\n        \n   <div id=\"banner_1191479343\" class=\"ux_banner dark     \"  style=\"height:400px; background-color:#333\" data-height=\"400px\" role=\"banner\">\n                                  <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:80%;\">\n            <div class=\"inner-wrap animated fadeInLeft\" style=\" \">\n              <h1>Banner 1<\/h1>\n            <\/div>\n          <\/div>  \n        <\/div>\n                     <\/div><!-- end .ux_banner -->\n\n   <div id=\"banner_1959737906\" class=\"ux_banner dark     \"  style=\"height:400px; background-color:#333\" data-height=\"400px\" role=\"banner\">\n                                  <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:80%;\">\n            <div class=\"inner-wrap animated flipInX\" style=\" \">\n              <h1>Banner 2<\/h1>\n            <\/div>\n          <\/div>  \n        <\/div>\n                     <\/div><!-- end .ux_banner -->\n\n     <\/div>\n    <div class=\"ux-loading dark\"><\/div>\n<\/div><!-- .ux-slider-wrapper -->\n\n\n<pre><b>&#091;ux_slider <b>arrows=\"false\"<\/b>]<\/b>\n   &#091;ux_banner] Banner content &#091;\/ux_banner]\n   &#091;ux_banner] Banner content &#091;\/ux_banner]\n<b>&#091;\/ux_slider]<\/b><\/pre>\n<h3 class=\"section-title clearfix  \"> <span>Slider with dark navigation items<\/span> <\/h3><!-- end section_title -->\n \n<div class=\"ux-slider-wrapper relative\">\n    <div class=\"ux-slider iosSlider  slider-style-normal  slider-nav-dark slider-nav-inside slider-nav-circle js-flickity\" \n        data-flickity-options='{ \n            \"cellAlign\": \"center\",\n            \"imagesLoaded\": true,\n            \"lazyLoad\": 1,\n            \"freeScroll\": false,\n            \"wrapAround\": true,\n            \"autoPlay\": 6000,\n            \"prevNextButtons\": true,\n            \"contain\" : true,\n            \"percentPosition\": true,\n            \"pageDots\": true,\n            \"selectedAttraction\" : 0.1,\n            \"friction\": 0.6,\n            \"rightToLeft\": false        }'\n        style=\"\"\n        >\n        \n   <div id=\"banner_1991725548\" class=\"ux_banner dark     \"  style=\"height:400px; background-color:#333\" data-height=\"400px\" role=\"banner\">\n                                  <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:80%;\">\n            <div class=\"inner-wrap animated fadeInLeft\" style=\" \">\n              <h1>Banner 1<\/h1>\n            <\/div>\n          <\/div>  \n        <\/div>\n                     <\/div><!-- end .ux_banner -->\n\n   <div id=\"banner_1099001008\" class=\"ux_banner dark     \"  style=\"height:400px; background-color:#333\" data-height=\"400px\" role=\"banner\">\n                                  <div class=\"hide-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n       <div class=\"show-for-small-only banner-bg \"  style=\"background-image:url(''); background-color:#333\"><\/div>\n                             <div class=\"row\" >\n          <div class=\"inner center text-center \"  style=\"width:80%;\">\n            <div class=\"inner-wrap animated flipInX\" style=\" \">\n              <h1>Banner 2<\/h1>\n            <\/div>\n          <\/div>  \n        <\/div>\n                     <\/div><!-- end .ux_banner -->\n     <\/div>\n    <div class=\"ux-loading dark\"><\/div>\n<\/div><!-- .ux-slider-wrapper -->\n\n\n<pre><b>&#091;ux_slider <b>nav_color=\"dark\"<\/b>]<\/b>\n   &#091;ux_banner] Banner content &#091;\/ux_banner]\n   &#091;ux_banner] Banner content &#091;\/ux_banner]\n<b>&#091;\/ux_slider]<\/b><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>UX Sliders are inserted with a Shortcode Generator. Its possible to slide almost anything by wrapping &#091;ux_slider] &#091;\/ux_slider] around the content. Available parameters: &#091;ux_slider timer=&#8221;4500&#8243; arrows=&#8221;false\/true&#8221; bullets=&#8221;false\/true&#8221; auto_slide=&#8221;false\/true&#8221; hide_nav=&#8221;false\/true&#8221; nav_color=&#8221;dark\/light&#8221;] &#091;ux_banner] &#091;\/ux_banner] &#091;ux_banner] &#091;\/ux_banner] &#091;ux_banner] &#091;\/ux_banner] &#091;\/ux_slider] &#091;ux_slider] &#091;ux_banner] Banner content &#091;\/ux_banner] &#091;ux_banner] Banner content &#091;\/ux_banner] &#091;\/ux_slider] &#091;ux_slider arrows=&#8221;false&#8221;] &#091;ux_banner] Banner content &#091;\/ux_banner] &#091;ux_banner] Banner [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":288,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-blank-title-center.php","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"acf":[],"aioseo_notices":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.9.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Shortcode - UX Sliders - Thann<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-sliders\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Shortcode - UX Sliders - Thann\" \/>\n<meta property=\"og:description\" content=\"UX Sliders are inserted with a Shortcode Generator. Its possible to slide almost anything by wrapping &#091;ux_slider] &#091;\/ux_slider] around the content. Available parameters: &#091;ux_slider timer=&quot;4500&quot; arrows=&quot;false\/true&quot; bullets=&quot;false\/true&quot; auto_slide=&quot;false\/true&quot; hide_nav=&quot;false\/true&quot; nav_color=&quot;dark\/light&quot;] &#091;ux_banner] &#091;\/ux_banner] &#091;ux_banner] &#091;\/ux_banner] &#091;ux_banner] &#091;\/ux_banner] &#091;\/ux_slider] &#091;ux_slider] &#091;ux_banner] Banner content &#091;\/ux_banner] &#091;ux_banner] Banner content &#091;\/ux_banner] &#091;\/ux_slider] &#091;ux_slider arrows=&quot;false&quot;] &#091;ux_banner] Banner content &#091;\/ux_banner] &#091;ux_banner] Banner [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-sliders\/\" \/>\n<meta property=\"og:site_name\" content=\"Thann\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-sliders\/\",\"url\":\"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-sliders\/\",\"name\":\"Shortcode - UX Sliders - Thann\",\"isPartOf\":{\"@id\":\"https:\/\/www.thann.co.th\/en\/#website\"},\"datePublished\":\"2013-08-11T15:41:20+00:00\",\"dateModified\":\"2013-08-11T15:41:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-sliders\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-sliders\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-sliders\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.thann.co.th\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Shortcodes\",\"item\":\"https:\/\/www.thann.co.th\/en\/shortcodes\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Shortcode &#8211; UX Sliders\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.thann.co.th\/en\/#website\",\"url\":\"https:\/\/www.thann.co.th\/en\/\",\"name\":\"Thann\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.thann.co.th\/en\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Shortcode - UX Sliders - Thann","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-sliders\/","og_locale":"en_US","og_type":"article","og_title":"Shortcode - UX Sliders - Thann","og_description":"UX Sliders are inserted with a Shortcode Generator. Its possible to slide almost anything by wrapping &#091;ux_slider] &#091;\/ux_slider] around the content. Available parameters: &#091;ux_slider timer=\"4500\" arrows=\"false\/true\" bullets=\"false\/true\" auto_slide=\"false\/true\" hide_nav=\"false\/true\" nav_color=\"dark\/light\"] &#091;ux_banner] &#091;\/ux_banner] &#091;ux_banner] &#091;\/ux_banner] &#091;ux_banner] &#091;\/ux_banner] &#091;\/ux_slider] &#091;ux_slider] &#091;ux_banner] Banner content &#091;\/ux_banner] &#091;ux_banner] Banner content &#091;\/ux_banner] &#091;\/ux_slider] &#091;ux_slider arrows=\"false\"] &#091;ux_banner] Banner content &#091;\/ux_banner] &#091;ux_banner] Banner [&hellip;]","og_url":"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-sliders\/","og_site_name":"Thann","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-sliders\/","url":"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-sliders\/","name":"Shortcode - UX Sliders - Thann","isPartOf":{"@id":"https:\/\/www.thann.co.th\/en\/#website"},"datePublished":"2013-08-11T15:41:20+00:00","dateModified":"2013-08-11T15:41:20+00:00","breadcrumb":{"@id":"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-sliders\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-sliders\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.thann.co.th\/en\/shortcodes\/shortcode-ux-sliders\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thann.co.th\/en\/"},{"@type":"ListItem","position":2,"name":"Shortcodes","item":"https:\/\/www.thann.co.th\/en\/shortcodes\/"},{"@type":"ListItem","position":3,"name":"Shortcode &#8211; UX Sliders"}]},{"@type":"WebSite","@id":"https:\/\/www.thann.co.th\/en\/#website","url":"https:\/\/www.thann.co.th\/en\/","name":"Thann","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thann.co.th\/en\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.thann.co.th\/en\/wp-json\/wp\/v2\/pages\/464"}],"collection":[{"href":"https:\/\/www.thann.co.th\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.thann.co.th\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.thann.co.th\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thann.co.th\/en\/wp-json\/wp\/v2\/comments?post=464"}],"version-history":[{"count":0,"href":"https:\/\/www.thann.co.th\/en\/wp-json\/wp\/v2\/pages\/464\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.thann.co.th\/en\/wp-json\/wp\/v2\/pages\/288"}],"wp:attachment":[{"href":"https:\/\/www.thann.co.th\/en\/wp-json\/wp\/v2\/media?parent=464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}