{"id":9536,"date":"2019-05-25T20:03:33","date_gmt":"2019-05-25T20:03:33","guid":{"rendered":"http:\/\/themenectar.com\/docs\/salient\/?page_id=9536"},"modified":"2019-05-26T15:24:02","modified_gmt":"2019-05-26T15:24:02","slug":"nectar-slider-plugin","status":"publish","type":"page","link":"https:\/\/themenectar.com\/docs\/salient\/nectar-slider-plugin\/","title":{"rendered":"Nectar Slider Plugin"},"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; top_padding=&#8221;60&#8243; overlay_strength=&#8221;0.3&#8243; shape_divider_position=&#8221;bottom&#8221; bg_image_animation=&#8221;none&#8221; shape_type=&#8221;&#8221;][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; column_link_target=&#8221;_self&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; width=&#8221;1\/1&#8243; tablet_width_inherit=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221; bg_image_animation=&#8221;none&#8221;][vc_column_text css=&#8221;.vc_custom_1558722310500{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 WPBakery Page Builder.[\/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; shape_divider_position=&#8221;bottom&#8221; bg_image_animation=&#8221;none&#8221;][vc_column column_padding=&#8221;padding-2-percent&#8221; column_padding_position=&#8221;right&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_link_target=&#8221;_self&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; width=&#8221;1\/2&#8243; tablet_width_inherit=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221; bg_image_animation=&#8221;none&#8221;][vc_column_text css=&#8221;.vc_custom_1558722248901{margin-top: 40px !important;margin-bottom: 50px !important;}&#8221;]\n<h3>Creating Slides<\/h3>\n<p>Head to the Nectar Slider section in your admin menu and click &#8220;Add New&#8221;. Inside of the slide creation screen, you&#8217;ll find two metaboxes which you will use to populate and categorize your slides.<\/p>\n<ul>\n<li><span style=\"color: #0000ff;\"><strong>Slide Settings: <\/strong><\/span>Your configuration metabox that will determine the slide content as well as styling. There are options for background type (image or video), alignment, buttons and more.<\/li>\n<li><span style=\"color: #ff0000;\"><strong>Slider Location:<\/strong><\/span> These are the categories you will use to group slides that you wish to display together. When you add a Nectar Slider through the page builder or shortcode, you will select your desired slider location to query to all slides assigned to it.<\/li>\n<\/ul>\n[\/vc_column_text][\/vc_column][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; column_link_target=&#8221;_self&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; width=&#8221;1\/2&#8243; tablet_width_inherit=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221; bg_image_animation=&#8221;none&#8221;][image_with_animation image_url=&#8221;9541&#8243; alignment=&#8221;&#8221; animation=&#8221;Fade In&#8221; img_link_large=&#8221;yes&#8221; border_radius=&#8221;5px&#8221; box_shadow=&#8221;large_depth&#8221; max_width=&#8221;100%&#8221;][\/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; overlay_strength=&#8221;0.3&#8243; shape_divider_position=&#8221;bottom&#8221; bg_image_animation=&#8221;none&#8221; shape_type=&#8221;&#8221;][vc_column column_padding=&#8221;padding-2-percent&#8221; column_padding_position=&#8221;right&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_link_target=&#8221;_self&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; width=&#8221;1\/1&#8243; tablet_width_inherit=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221; bg_image_animation=&#8221;none&#8221;][vc_column_text css=&#8221;.vc_custom_1558723116941{margin-top: 40px !important;margin-bottom: 50px !important;}&#8221;]\n<h3>Page Builder Element Settings<\/h3>\n<p>When adding a Nectar Slider to your page through the page builder, you&#8217;ll have a list of settings you can use to control the style and functionality for each instance.[\/vc_column_text][image_with_animation image_url=&#8221;9546&#8243; alignment=&#8221;&#8221; animation=&#8221;Fade In&#8221; border_radius=&#8221;none&#8221; box_shadow=&#8221;none&#8221; max_width=&#8221;100%&#8221;][vc_column_text css=&#8221;.vc_custom_1558785191149{margin-top: 40px !important;margin-bottom: 50px !important;}&#8221;]\n<ul>\n<li>\n<div class=\"wpb_element_label\"><strong>Slider Height:<\/strong> Enter the height you would like your slider to display on desktop monitors. The amount your slider scales down for every smaller viewport (tablet, phone etc.) will be determined by this.<\/div>\n<\/li>\n<li><strong>Display Full width: <\/strong>Use this to allow your slider to expand the full width of the screen. When using this option, there&#8217;s no need to set the parent row to &#8220;full width content&#8221;. It&#8217;s actually preferred that the parent row type remain simply as &#8220;full width background&#8221; or &#8220;in container&#8221; as to not waste processing that is unneeded. Note that if you&#8217;re not seeing this option, you likely have the parent row type already set to &#8220;full width content&#8221;.<\/li>\n<li><strong>Display Arrow Navigation:\u00a0<\/strong>Adds next\/previous navigation buttons to your slider.<\/li>\n<li>\n<div class=\"wpb_element_label\"><strong>Overall Style: <\/strong>Choosing &#8220;Directional based content movement&#8221; will limit the amount of further customization options you have to select from.<\/div>\n<\/li>\n<li><strong>Display Bullet Navigation:<\/strong> Adds an optional bullet navigation to your slider.<\/li>\n<li>\n<div class=\"wpb_element_label\"><strong>Enable Swipe on Desktop: <\/strong>Allows users to click and drag the slider to change slides when access on a non-touch device.<\/div>\n<\/li>\n<li><strong>Parallax Slider: <\/strong>Will animate the background layer at a different speed than the scrolling speed to create a parallax effect.<\/li>\n<li><strong>Slide BG Animation:<\/strong> Optionally add a &#8220;Ken burns&#8221; slight zoom animation to each slide.<\/li>\n<li><strong>Loop Slider:<\/strong> Allows your slider to loop infinitely once the end has been reach. i.e. the last slide will lead back to the first slide.<\/li>\n<li><strong>Slider Transition:<\/strong> Choose between a &#8220;Slide&#8221; and &#8220;Fade&#8221; effect that will be used when changing slides.<\/li>\n<li>\n<div class=\"wpb_element_label\"><strong>Caption Transition:<\/strong> Control the animation that your slide content will do when changing slides.<\/div>\n<\/li>\n<li><strong>Autorotate:<\/strong> If you would like this slider to autorotate, enter the rotation speed in milliseconds here. i.e 5000<\/li>\n<li>\n<div class=\"wpb_element_label\"><strong>Button Sizing:<\/strong> Select how large you would like the buttons in each slide to display.<\/div>\n<\/li>\n<\/ul>\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; top_padding=&#8221;60&#8243; bottom_padding=&#8221;60&#8243; id=&#8221;nectar-slider&#8221; overlay_strength=&#8221;0.3&#8243; shape_divider_position=&#8221;bottom&#8221; bg_image_animation=&#8221;none&#8221; shape_type=&#8221;&#8221;][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; column_link_target=&#8221;_self&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; width=&#8221;1\/1&#8243; tablet_width_inherit=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221; bg_image_animation=&#8221;none&#8221;][vc_column_text]\n<h3>Frequently Asked Questions<\/h3>\n<p><strong>How do I reorder slides?\u00a0<\/strong>In the Nectar Slider admin menu, there&#8217;s a link labeled &#8220;Slide Ordering&#8221;. Simply click that, select your desired slider location at the top and the drag and drop your slides into the order you want. The order will automatically save every time you release one of the slides in a new order.<\/p>\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[\/vc_column_text][vc_raw_js]JTNDc2NyaXB0JTIwdHlwZSUzRCUyMnRleHQlMkZqYXZhc2NyaXB0JTIyJTNFJTIwalF1ZXJ5JTI4ZG9jdW1lbnQlMjkucmVhZHklMjhmdW5jdGlvbiUyOCUyOSU3QiUwQSUyMCUyMGpRdWVyeSUyOCUyNy5mbGV4aGVpZ2h0JTIwaW5wdXQlMjclMjkuYmx1ciUyOGNhbGNOZXdIZWlnaHQlMjklM0IlMEElMjAlMjBqUXVlcnklMjglMjcuZmxleHdpZHRoJTIwaW5wdXQlMjclMjkuYmx1ciUyOGNhbGNOZXdIZWlnaHQlMjklM0IlMEElMjAlMjBqUXVlcnklMjglMjcuZmxleGhlaWdodCUyMGlucHV0JTI3JTI5LmtleXVwJTI4Y2FsY05ld0hlaWdodCUyOSUzQiUwQSUyMCUyMGpRdWVyeSUyOCUyNy5mbGV4d2lkdGglMjBpbnB1dCUyNyUyOS5rZXl1cCUyOGNhbGNOZXdIZWlnaHQlMjklM0IlMEElMEElMjAlMjBmdW5jdGlvbiUyMGNhbGNOZXdIZWlnaHQlMjglMjklMjAlN0IlMEElMjAlMjAlMjAlMjB2YXIlMjAlMjR4MSUyMCUzRCUyMGpRdWVyeSUyOCUyN2lucHV0JTVCbmFtZSUzRCUyMngxJTIyJTVEJTI3JTI5LnZhbCUyOCUyOSUzQiUwQSUyMCUyMCUyMCUyMHZhciUyMCUyNHgyJTIwJTNEJTIwalF1ZXJ5JTI4JTI3aW5wdXQlNUJuYW1lJTNEJTIyeDIlMjIlNUQlMjclMjkudmFsJTI4JTI5JTNCJTBBJTBBJTIwJTIwJTIwJTIwaWYlMjglMjAlMjR4MS5sZW5ndGglMjAlM0QlM0QlMjAwJTIwJTdDJTdDJTIwJTI0eDIubGVuZ3RoJTIwJTNEJTNEJTIwMCUyMCUyOSUyMHJldHVybiUzQiUwQSUyMCUyMCUyMCUyMCUwQSUyMCUyMCUyMCUyMHZhciUyMCUyNHRoZUhlaWdodCUyMCUzRCUyMCUyOHBhcnNlSW50JTI4JTI0eDIlMjklMkZwYXJzZUludCUyOCUyNHgxJTI5JTI5JTJBMTYwMCUzQiUwQSUyMCUyMCUyMCUyMGpRdWVyeSUyOCUyNy5oZWlnaHQtdG8tdXNlJTIwaDElMjclMjkuaHRtbCUyOE1hdGguY2VpbCUyOCUyNHRoZUhlaWdodCUyOSUyOSUzQiUwQSUyMCUyMCUyMCUyMGpRdWVyeSUyOCUyNy5oZWlnaHQtdG8tdXNlJTI3JTI5LmNzcyUyOCUyN29wYWNpdHklMjclMkMlMjcxJTI3JTI5JTNCJTBBJTIwJTIwJTIwJTBBJTdEJTBBJTdEJTI5JTIwJTNDJTJGc2NyaXB0JTNF[\/vc_raw_js][\/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; top_padding=&#8221;60&#8243; overlay_strength=&#8221;0.3&#8243; shape_divider_position=&#8221;bottom&#8221; bg_image_animation=&#8221;none&#8221; shape_type=&#8221;&#8221;][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; column_link_target=&#8221;_self&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; width=&#8221;1\/1&#8243; tablet_width_inherit=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221; bg_image_animation=&#8221;none&#8221;][vc_column_text css=&#8221;.vc_custom_1558722310500{margin-top: 40px !important;margin-bottom: 50px !important;}&#8221;]As&#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\/9536"}],"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=9536"}],"version-history":[{"count":0,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/9536\/revisions"}],"wp:attachment":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/media?parent=9536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}