{"id":233,"date":"2017-01-31T22:27:33","date_gmt":"2017-01-31T22:27:33","guid":{"rendered":"http:\/\/tommustester.wpengine.com\/?page_id=233"},"modified":"2017-01-31T22:27:33","modified_gmt":"2017-01-31T22:27:33","slug":"sliders","status":"publish","type":"page","link":"https:\/\/promosimple.com\/blog\/elements\/sliders","title":{"rendered":"Elements &#8211; Sliders"},"content":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221;][vc_column][stack_hero image=&#8221;38&#8243;][vc_column_text]<\/p>\n<h1>Sliders<\/h1>\n<p class=\"lead\">These modular elements can be readily used and customized across pages and in different blocks.<\/p>\n<hr class=\"short\" \/>\n<p>Explore all of Stack&#8217;s modular elements<br \/>\nat the\u00a0<a href=\"\/elements\/\">Element Index Page \u2192<\/a>[\/vc_column_text][\/stack_hero][\/vc_column][\/vc_row][vc_section][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;][stack_boxed_content padding=&#8221;boxed&#8211;lg&#8221; background=&#8221;bg&#8211;secondary&#8221;][vc_column_text]<\/p>\n<h4>Basic Slider Markup<\/h4>\n<p>Sliders in Stack use the premium <a href=\"http:\/\/flickity.metafizzy.co\" target=\"_blank\">Flickity<\/a> plugin and work by housing an unordered list <strong>.slides<\/strong> inside a div with class <strong>.slider<\/strong><\/p>\n<p>There are a number of data attribute options to customise the behaviour of the slider:<\/p>\n<ul class=\"bullets\">\n<li><strong>data-arrows=&#8221;true || false&#8221;<\/strong> &#8211; enable navigation arrows<\/li>\n<li><strong>data-paging=&#8221;true || false&#8221;<\/strong> &#8211; enable navigation dots<\/li>\n<li><strong>data-autoplay=&#8221;true || false&#8221;<\/strong> &#8211; enable auto-paging of the slider<\/li>\n<li><strong>data-timing=&#8221;NUM&#8221;<\/strong> &#8211; millisecond value before slider scrolls<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/stack_boxed_content][\/vc_column][vc_column width=&#8221;1\/2&#8243;][stack_slider image=&#8221;235,14,227,228&#8243;][\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;][stack_boxed_content padding=&#8221;boxed&#8211;lg&#8221; background=&#8221;bg&#8211;secondary&#8221;][vc_column_text]<\/p>\n<h4>Adjust Slide Widths<\/h4>\n<p>You can adjust slide widths by using the <a href=\"elements-grid.html\">Bootstrap grid<\/a> column classes on the slide <strong>li<\/strong> elements.[\/vc_column_text][\/stack_boxed_content][\/vc_column][vc_column width=&#8221;1\/2&#8243;][stack_slider paging=&#8221;true&#8221; column=&#8221;6&#8243; image=&#8221;235,14,227,228&#8243;][\/vc_column][\/vc_row][\/vc_section][vc_section][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;][stack_boxed_content padding=&#8221;boxed&#8211;lg&#8221; background=&#8221;bg&#8211;secondary&#8221;][vc_column_text]<\/p>\n<h4>Slider Effects<\/h4>\n<p>Easily modify the behaviour of the slider by adding the following classes to the <strong>.slider<\/strong> element.<\/p>\n<ul class=\"bullets\">\n<li><strong>.slider&#8211;ken-burns<\/strong> &#8211; adds subtle &#8216;Ken Burns&#8217;effect on slide image<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/stack_boxed_content][\/vc_column][vc_column width=&#8221;1\/2&#8243;][stack_slider image=&#8221;235,14,227,228&#8243; custom_css_class=&#8221;slider&#8211;ken-burns&#8221;][\/vc_column][\/vc_row][\/vc_section][vc_row][vc_column][vc_column_text]<\/p>\n<h2 style=\"text-align: center;\">Looking for styled sliders and carousels?<\/h2>\n<p style=\"text-align: center;\"><a class=\"btn btn--primary type--uppercase\" href=\"\/sections\/sliders\/\">View Slider Sections<\/a><\/p>\n<p class=\"type--fine-print\" style=\"text-align: center;\">or try the\u00a0<a href=\"http:\/\/tommusrhodus.theme-demo.net\/stackwordpresstheme\" target=\"_blank\">admin demo \u2197<\/a><\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221;][vc_column][stack_hero image=&#8221;38&#8243;][vc_column_text] Sliders These modular elements can be readily used and customized across pages and in different blocks. Explore all of Stack&#8217;s modular elements at the\u00a0Element Index Page \u2192[\/vc_column_text][\/stack_hero][\/vc_column][\/vc_row][vc_section][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;][stack_boxed_content padding=&#8221;boxed&#8211;lg&#8221; background=&#8221;bg&#8211;secondary&#8221;][vc_column_text] Basic Slider Markup Sliders in Stack use the premium Flickity plugin and work by housing an unordered list .slides [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":33,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/promosimple.com\/blog\/wp-json\/wp\/v2\/pages\/233"}],"collection":[{"href":"https:\/\/promosimple.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/promosimple.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/promosimple.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/promosimple.com\/blog\/wp-json\/wp\/v2\/comments?post=233"}],"version-history":[{"count":0,"href":"https:\/\/promosimple.com\/blog\/wp-json\/wp\/v2\/pages\/233\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/promosimple.com\/blog\/wp-json\/wp\/v2\/pages\/33"}],"wp:attachment":[{"href":"https:\/\/promosimple.com\/blog\/wp-json\/wp\/v2\/media?parent=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}