{"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:\/\/csd.iitgn.ac.in\/wp\/elements\/sliders\/","title":{"rendered":"Elements &#8211; Sliders"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row full_width=&#8221;stretch_row&#8221;][vc_column]\n\t\t\t<section class=\"imagebg image--light cover cover-blocks bg--secondary \" >\n\t\t\t\t<div class=\"background-image-holder\"><img loading=\"lazy\" decoding=\"async\" width=\"3600\" height=\"1762\" src=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/promo-1.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/promo-1.jpg 3600w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/promo-1-300x147.jpg 300w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/promo-1-768x376.jpg 768w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/promo-1-1024x501.jpg 1024w\" sizes=\"auto, (max-width: 3600px) 100vw, 3600px\" \/><\/div>\n\t\t\t\t<div class=\"container\">\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t<div class=\"col-sm-6 col-md-5\">\n\t\t\t\t\t\t\t<div>[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]<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div><!--end of row-->\n\t\t\t\t<\/div><!--end of container-->\n\t\t\t\t\n\t\t\t<\/section>\n\t\t[\/vc_column][\/vc_row][vc_section css=&#8221;.vc_custom_1498220966521{padding-top: 0px !important;}&#8221; ebor_docs=&#8221;&#8221;][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;]<div class=\" boxed--lg bg--secondary  boxed boxed--border\" ><div class=\"container\">[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\" rel=\"noopener noreferrer\">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]<\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/2&#8243;]\n\t\t<div class=\" slider\" data-arrows=\"true\" data-paging=\"false\" data-autoplay=\"true\" data-timing=\"7000\">\n\t\t\t<ul class=\"slides\">\n\t\n\t\t\t\t<li class=\"col-sm-12\">\n\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1069\" src=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-6.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-6.jpg 1600w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-6-300x200.jpg 300w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-6-768x513.jpg 768w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-6-1024x684.jpg 1024w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/>\n\t\t\t\t<\/li>\n\t\t\t\n\t\t\t\t<li class=\"col-sm-12\">\n\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1067\" src=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2016\/12\/blog-1.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2016\/12\/blog-1.jpg 1600w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2016\/12\/blog-1-300x200.jpg 300w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2016\/12\/blog-1-768x512.jpg 768w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2016\/12\/blog-1-1024x683.jpg 1024w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/>\n\t\t\t\t<\/li>\n\t\t\t\n\t\t\t\t<li class=\"col-sm-12\">\n\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1067\" src=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-2.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-2.jpg 1600w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-2-300x200.jpg 300w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-2-768x512.jpg 768w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-2-1024x683.jpg 1024w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/>\n\t\t\t\t<\/li>\n\t\t\t\n\t\t\t\t<li class=\"col-sm-12\">\n\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1048\" src=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-3.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-3.jpg 1600w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-3-300x197.jpg 300w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-3-768x503.jpg 768w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-3-1024x671.jpg 1024w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/>\n\t\t\t\t<\/li>\n\t\t\t\n\t\t\t<\/ul>\n\t\t<\/div>\n\t[\/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;]<div class=\" boxed--lg bg--secondary  boxed boxed--border\" ><div class=\"container\">[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]<\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/2&#8243;]\n\t\t<div class=\" slider\" data-arrows=\"true\" data-paging=\"true\" data-autoplay=\"true\" data-timing=\"7000\">\n\t\t\t<ul class=\"slides\">\n\t\n\t\t\t\t<li class=\"col-sm-6\">\n\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1069\" src=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-6.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-6.jpg 1600w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-6-300x200.jpg 300w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-6-768x513.jpg 768w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-6-1024x684.jpg 1024w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/>\n\t\t\t\t<\/li>\n\t\t\t\n\t\t\t\t<li class=\"col-sm-6\">\n\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1067\" src=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2016\/12\/blog-1.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2016\/12\/blog-1.jpg 1600w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2016\/12\/blog-1-300x200.jpg 300w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2016\/12\/blog-1-768x512.jpg 768w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2016\/12\/blog-1-1024x683.jpg 1024w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/>\n\t\t\t\t<\/li>\n\t\t\t\n\t\t\t\t<li class=\"col-sm-6\">\n\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1067\" src=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-2.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-2.jpg 1600w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-2-300x200.jpg 300w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-2-768x512.jpg 768w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-2-1024x683.jpg 1024w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/>\n\t\t\t\t<\/li>\n\t\t\t\n\t\t\t\t<li class=\"col-sm-6\">\n\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1048\" src=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-3.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-3.jpg 1600w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-3-300x197.jpg 300w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-3-768x503.jpg 768w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-3-1024x671.jpg 1024w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/>\n\t\t\t\t<\/li>\n\t\t\t\n\t\t\t<\/ul>\n\t\t<\/div>\n\t[\/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;]<div class=\" boxed--lg bg--secondary  boxed boxed--border\" ><div class=\"container\">[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]<\/div><\/div>[\/vc_column][vc_column width=&#8221;1\/2&#8243;]\n\t\t<div class=\"slider--ken-burns slider\" data-arrows=\"true\" data-paging=\"false\" data-autoplay=\"true\" data-timing=\"7000\">\n\t\t\t<ul class=\"slides\">\n\t\n\t\t\t\t<li class=\"col-sm-12\">\n\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1069\" src=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-6.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-6.jpg 1600w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-6-300x200.jpg 300w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-6-768x513.jpg 768w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-6-1024x684.jpg 1024w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/>\n\t\t\t\t<\/li>\n\t\t\t\n\t\t\t\t<li class=\"col-sm-12\">\n\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1067\" src=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2016\/12\/blog-1.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2016\/12\/blog-1.jpg 1600w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2016\/12\/blog-1-300x200.jpg 300w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2016\/12\/blog-1-768x512.jpg 768w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2016\/12\/blog-1-1024x683.jpg 1024w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/>\n\t\t\t\t<\/li>\n\t\t\t\n\t\t\t\t<li class=\"col-sm-12\">\n\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1067\" src=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-2.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-2.jpg 1600w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-2-300x200.jpg 300w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-2-768x512.jpg 768w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-2-1024x683.jpg 1024w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/>\n\t\t\t\t<\/li>\n\t\t\t\n\t\t\t\t<li class=\"col-sm-12\">\n\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1048\" src=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-3.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-3.jpg 1600w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-3-300x197.jpg 300w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-3-768x503.jpg 768w, https:\/\/csd.iitgn.ac.in\/wp\/wp-content\/uploads\/2017\/01\/blog-3-1024x671.jpg 1024w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/>\n\t\t\t\t<\/li>\n\t\t\t\n\t\t\t<\/ul>\n\t\t<\/div>\n\t[\/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\" rel=\"noopener noreferrer\">admin demo \u2197<\/a><\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221;][vc_column][\/vc_column][\/vc_row][vc_section css=&#8221;.vc_custom_1498220966521{padding-top: 0px !important;}&#8221; ebor_docs=&#8221;&#8221;][vc_row css=&#8221;.vc_custom_1485825445121{margin-bottom: 30px !important;}&#8221;][vc_column width=&#8221;1\/2&#8243;][\/vc_column][vc_column width=&#8221;1\/2&#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;][\/vc_column][vc_column width=&#8221;1\/2&#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;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][\/vc_column][\/vc_row][\/vc_section][vc_row][vc_column][vc_column_text] Looking&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":33,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-233","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/csd.iitgn.ac.in\/wp\/wp-json\/wp\/v2\/pages\/233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/csd.iitgn.ac.in\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/csd.iitgn.ac.in\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/csd.iitgn.ac.in\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/csd.iitgn.ac.in\/wp\/wp-json\/wp\/v2\/comments?post=233"}],"version-history":[{"count":0,"href":"https:\/\/csd.iitgn.ac.in\/wp\/wp-json\/wp\/v2\/pages\/233\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/csd.iitgn.ac.in\/wp\/wp-json\/wp\/v2\/pages\/33"}],"wp:attachment":[{"href":"https:\/\/csd.iitgn.ac.in\/wp\/wp-json\/wp\/v2\/media?parent=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}