{"id":534,"date":"2016-10-19T21:01:05","date_gmt":"2016-10-19T21:01:05","guid":{"rendered":"http:\/\/localhost:8888\/doc\/?page_id=534"},"modified":"2016-10-25T21:55:32","modified_gmt":"2016-10-25T21:55:32","slug":"sliders","status":"publish","type":"page","link":"https:\/\/themenectar.com\/docs\/salient\/sliders\/","title":{"rendered":"Sliders"},"content":{"rendered":"[vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; overlay_strength=&#8221;0.3&#8243;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][page_submenu alignment=&#8221;left&#8221; sticky=&#8221;true&#8221; bg_color=&#8221;#075aff&#8221; link_color=&#8221;#ffffff&#8221;][page_link link_url=&#8221;#nectar-slider&#8221; title=&#8221;Nectar Slider&#8221; id=&#8221;1476910143-1-59&#8243; tab_id=&#8221;1476910719847-5&#8243;] [\/page_link][page_link link_url=&#8221;#home-slider&#8221; title=&#8221;Home Slider&#8221; id=&#8221;1476910143-2-87&#8243; tab_id=&#8221;1476910720008-0&#8243;] [\/page_link][page_link title=&#8221;Flexslider&#8221; id=&#8221;1476964499827-0-5&#8243; tab_id=&#8221;1476964499832-1&#8243; link_url=&#8221;#flexslider&#8221;][\/page_link][page_link title=&#8221;Touch Enabled &amp; Spaced&#8221; id=&#8221;1476964552422-0-6&#8243; tab_id=&#8221;1476964552426-2&#8243; link_url=&#8221;#touch-spaced&#8221;][\/page_link][\/page_submenu][\/vc_column][\/vc_row][vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; top_padding=&#8221;60&#8243; id=&#8221;nectar-slider&#8221; overlay_strength=&#8221;0.3&#8243;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][vc_column_text css=&#8221;.vc_custom_1476964976055{margin-bottom: 30px !important;}&#8221;]Salient comes packaged with multiple sliders for you to choose from, the assets of which will only be loaded if selected to be used on a page. The Nectar Slider and Home Slider are the only two which have their own post type &#8211; which means they have a dedicated section in the WordPress admin panel. Please continue reading below to discover more about each slider and what will suit your project best.[\/vc_column_text][vc_column_text css=&#8221;.vc_custom_1477398437471{margin-bottom: 30px !important;}&#8221;]\n<h1>Nectar Slider<\/h1>\n[\/vc_column_text][nectar_video_lightbox link_style=&#8221;play_button_2&#8243; nectar_play_button_color=&#8221;Default-Accent-Color&#8221; image_url=&#8221;8414&#8243; box_shadow=&#8221;x_large_depth&#8221; video_url=&#8221;https:\/\/www.youtube.com\/watch?v=FLU9Pxo_RD8&#8243;][vc_column_text css=&#8221;.vc_custom_1477231344358{margin-top: 40px !important;margin-bottom: 50px !important;}&#8221;]As seen in various theme demos such as <a href=\"https:\/\/themenectar.com\/demo\/salient-frostwave\">this one<\/a>, the Nectar Slider is a quick and easy way to feature content on your website. With it&#8217;s notable (and optional) smooth parallax connected to the users scroll, Your website is bound to make\u00a0a great first impression. It supports\u00a0unlimited instances so you can have as many different Nectar Sliders on your site as you desire.\u00a0You&#8217;ll find configuration options when creating a slide that are specific to the slide.\u00a0And more configuration options which will apply to all slides in the instance when adding the Nectar Slider\u00a0to a page via the Salient Visual Composer.[\/vc_column_text][vc_column_text]\n<h3>FAQ<\/h3>\n<p><strong>How can I keep images from cropping?\u00a0<\/strong>If you&#8217;re using the Nectar Slider &#8220;Display Full Width&#8221; option and would like your image to always remain 100% visible without cropping the edges &#8211; turn on the option for <strong>&#8220;Flexible Height&#8221;. <\/strong>The flexible height option will require you to enter a slider height\u00a0that may be different than your actual image height because it assumes the width of your image is 1600 by default. There&#8217;s a calculator below where you can enter your image dimensions to get the slider height needed for your flexible height setup.<\/p>\n<div class=\"flexwidth\"><label for=\"x1\">Width<\/label><input name=\"x1\" type=\"text\" \/><\/div>\n<div class=\"flexheight\"><label for=\"x2\">Height<\/label><input name=\"x2\" type=\"text\" \/><\/div>\n<div class=\"height-to-use\">\n<p><i>The height to use in your Nectar Slider is:<\/i><\/p>\n<h1><\/h1>\n<\/div>\n<p><strong>Can video backgrounds play on mobile devices?\u00a0<\/strong>No &#8211; as mentioned in the video tutorial above, mobile devices do not allow autoplaying of videos for data usage reasons. Because the video background option is <strong>not<\/strong> meant to be used for information videos (with sound) and rather for videos that serve as a design element (no sound), the video background will be replaced with the <strong>preview image<\/strong> you supply.<\/p>\n<p><strong>I&#8217;ve copied my Nectar Slider in Visual Composer and still only one displays at the top of the page, what gives? <\/strong>Make sure you don&#8217;t have the &#8220;Parallax Slider&#8221; option on both of them, as that option will always bring the Nectar Slider to the top of the page where the effect can take place.[\/vc_column_text][vc_raw_js]JTNDc2NyaXB0JTIwdHlwZSUzRCUyMnRleHQlMkZqYXZhc2NyaXB0JTIyJTNFJTIwalF1ZXJ5JTI4ZG9jdW1lbnQlMjkucmVhZHklMjhmdW5jdGlvbiUyOCUyOSU3QiUwQSUyMCUyMGpRdWVyeSUyOCUyNy5mbGV4aGVpZ2h0JTIwaW5wdXQlMjclMjkuYmx1ciUyOGNhbGNOZXdIZWlnaHQlMjklM0IlMEElMjAlMjBqUXVlcnklMjglMjcuZmxleHdpZHRoJTIwaW5wdXQlMjclMjkuYmx1ciUyOGNhbGNOZXdIZWlnaHQlMjklM0IlMEElMjAlMjBqUXVlcnklMjglMjcuZmxleGhlaWdodCUyMGlucHV0JTI3JTI5LmtleXVwJTI4Y2FsY05ld0hlaWdodCUyOSUzQiUwQSUyMCUyMGpRdWVyeSUyOCUyNy5mbGV4d2lkdGglMjBpbnB1dCUyNyUyOS5rZXl1cCUyOGNhbGNOZXdIZWlnaHQlMjklM0IlMEElMEElMjAlMjBmdW5jdGlvbiUyMGNhbGNOZXdIZWlnaHQlMjglMjklMjAlN0IlMEElMjAlMjAlMjAlMjB2YXIlMjAlMjR4MSUyMCUzRCUyMGpRdWVyeSUyOCUyN2lucHV0JTVCbmFtZSUzRCUyMngxJTIyJTVEJTI3JTI5LnZhbCUyOCUyOSUzQiUwQSUyMCUyMCUyMCUyMHZhciUyMCUyNHgyJTIwJTNEJTIwalF1ZXJ5JTI4JTI3aW5wdXQlNUJuYW1lJTNEJTIyeDIlMjIlNUQlMjclMjkudmFsJTI4JTI5JTNCJTBBJTBBJTIwJTIwJTIwJTIwaWYlMjglMjAlMjR4MS5sZW5ndGglMjAlM0QlM0QlMjAwJTIwJTdDJTdDJTIwJTI0eDIubGVuZ3RoJTIwJTNEJTNEJTIwMCUyMCUyOSUyMHJldHVybiUzQiUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMHZhciUyMCUyNHRoZUhlaWdodCUyMCUzRCUyMCUyOHBhcnNlSW50JTI4JTI0eDIlMjklMkZwYXJzZUludCUyOCUyNHgxJTI5JTI5JTJBMTYwMCUzQiUwQSUyMCUyMCUyMCUyMGpRdWVyeSUyOCUyNy5oZWlnaHQtdG8tdXNlJTIwaDElMjclMjkuaHRtbCUyOE1hdGguY2VpbCUyOCUyNHRoZUhlaWdodCUyOSUyOSUzQiUwQSUyMCUyMCUyMCUyMGpRdWVyeSUyOCUyNy5oZWlnaHQtdG8tdXNlJTI3JTI5LmNzcyUyOCUyN29wYWNpdHklMjclMkMlMjcxJTI3JTI5JTNCJTBBJTIwJTIwJTIwJTBBJTdEJTBBJTdEJTI5JTIwJTNDJTJGc2NyaXB0JTNF[\/vc_raw_js][\/vc_column][\/vc_row][vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; overlay_strength=&#8221;0.3&#8243;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][vc_column_text css=&#8221;.vc_custom_1476910712076{border-top-width: 1px !important;border-top-color: #ededed !important;border-top-style: solid !important;}&#8221;][\/vc_column_text][\/vc_column][\/vc_row][vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; top_padding=&#8221;60&#8243; id=&#8221;home-slider&#8221; overlay_strength=&#8221;0.3&#8243;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][vc_column_text]\n<h1>Home\u00a0Slider<\/h1>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; overlay_strength=&#8221;0.3&#8243;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; width=&#8221;2\/3&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][vc_column_text]The Home Slider is the original slider of Salient. Because it functions in a similar manner to the Nectar Slider but has less features, the only reason you would use this currently is if your prefer the style and can live without video backgrounds. It requires a page template to be assigned in order to add it to a page and because of this, it can only display one set of slides. i.e. you can&#8217;t have a Home Slider on different pages displays different slides.[\/vc_column_text][image_with_animation image_url=&#8221;8410&#8243; alignment=&#8221;&#8221; animation=&#8221;Fade In&#8221; box_shadow=&#8221;none&#8221; max_width=&#8221;100%&#8221;][\/vc_column][vc_column column_padding=&#8221;padding-2-percent&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; width=&#8221;1\/3&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][image_with_animation image_url=&#8221;8519&#8243; alignment=&#8221;&#8221; animation=&#8221;Fade In&#8221; box_shadow=&#8221;none&#8221; max_width=&#8221;100%&#8221;][vc_column_text]<strong>Any of the templates with &#8220;Home&#8221; in the name will display the Home Slider at the top.<\/strong>[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; top_padding=&#8221;50&#8243; bottom_padding=&#8221;50&#8243; overlay_strength=&#8221;0.3&#8243;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][vc_column_text css=&#8221;.vc_custom_1476910712076{border-top-width: 1px !important;border-top-color: #ededed !important;border-top-style: solid !important;}&#8221;][\/vc_column_text][\/vc_column][\/vc_row][vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; bottom_padding=&#8221;60&#8243; id=&#8221;flexslider&#8221; overlay_strength=&#8221;0.3&#8243;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][vc_column_text]\n<h1>FlexSlider<\/h1>\n<h4>(Basic Slider Style in Image Gallery Element In Salient Visual Composer)<\/h4>\n[\/vc_column_text][vc_row_inner top_padding=&#8221;40&#8243; text_align=&#8221;left&#8221;][vc_column_inner column_padding=&#8221;padding-3-percent&#8221; column_padding_position=&#8221;right&#8221; background_color_opacity=&#8221;1&#8243; width=&#8221;1\/2&#8243;][vc_column_text]As the name implies, this slider option is a simple option that would work best in a column rather than a full featured slider. The options to customize are limited, but it will always show the images uploaded in there full uncropped aspect ratios which is something to keep in mind. If you&#8217;re planning on having different aspect ratios in your slider as the Nectar slider can only display one aspect ratio per instance[\/vc_column_text][\/vc_column_inner][vc_column_inner column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; width=&#8221;1\/2&#8243;][image_with_animation image_url=&#8221;8534&#8243; alignment=&#8221;&#8221; animation=&#8221;Fade In&#8221; box_shadow=&#8221;none&#8221; max_width=&#8221;100%&#8221;][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; top_padding=&#8221;50&#8243; bottom_padding=&#8221;50&#8243; overlay_strength=&#8221;0.3&#8243;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][vc_column_text css=&#8221;.vc_custom_1476910712076{border-top-width: 1px !important;border-top-color: #ededed !important;border-top-style: solid !important;}&#8221;][\/vc_column_text][\/vc_column][\/vc_row][vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; bottom_padding=&#8221;60&#8243; id=&#8221;flexslider&#8221; overlay_strength=&#8221;0.3&#8243;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][vc_column_text css=&#8221;.vc_custom_1477398468189{margin-bottom: 30px !important;}&#8221;]\n<h1>Touch Enabled &amp; Spaced (Flickity)<\/h1>\n<p>Also available in the Image Gallery Visual Composer element, the touch enabled &amp; spaced slider provides you with a fun touch based slider where one image will be shown centered with the previous &amp; next image partially visible on the sides. Make sure you have at least three images to use if you&#8217;re using this slider style as the layout calls for that at a minimum.[\/vc_column_text][image_with_animation image_url=&#8221;8422&#8243; alignment=&#8221;&#8221; animation=&#8221;Fade In&#8221; box_shadow=&#8221;none&#8221; max_width=&#8221;100%&#8221;][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"<p>[vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; overlay_strength=&#8221;0.3&#8243;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_position=&#8221;all&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; width=&#8221;1\/1&#8243; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221;][page_submenu alignment=&#8221;left&#8221; sticky=&#8221;true&#8221; bg_color=&#8221;#075aff&#8221; link_color=&#8221;#ffffff&#8221;][page_link link_url=&#8221;#nectar-slider&#8221; title=&#8221;Nectar Slider&#8221; id=&#8221;1476910143-1-59&#8243; tab_id=&#8221;1476910719847-5&#8243;] [\/page_link][page_link link_url=&#8221;#home-slider&#8221; title=&#8221;Home Slider&#8221; id=&#8221;1476910143-2-87&#8243; tab_id=&#8221;1476910720008-0&#8243;] [\/page_link][page_link&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/534"}],"collection":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/comments?post=534"}],"version-history":[{"count":0,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/534\/revisions"}],"wp:attachment":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/media?parent=534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}