{"id":69,"date":"2018-11-01T10:01:15","date_gmt":"2018-11-01T10:01:15","guid":{"rendered":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/mahveen\/?p=69"},"modified":"2019-05-21T07:39:41","modified_gmt":"2019-05-21T07:39:41","slug":"creating-slider-with-revolution-slider-plugin","status":"publish","type":"post","link":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/creating-slider-with-revolution-slider-plugin\/","title":{"rendered":"Creating Slider With Revolution Slider Plugin"},"content":{"rendered":"

Step A \u2013 Create a New Slider with Slider Revolution<\/h4>\n

Go to Slider Revolution menu from admin dashboard and click (+) New Slider button. This action takes you to Slider Settings page where you can adjust global slider settings.<\/p>\n

\"\"<\/p>\n

1 \u2013 Content Source<\/h4>\n

Select Default Slider for this one.<\/p>\n

2 \u2013 Slider Title & Shortcode<\/h4>\n

Enter a Title and Alias here. Alias is required to insert this slider into any post or widget through shortcodes.<\/p>\n

3 \u2013 Select A Slider Type<\/h4>\n

I recommend Carousel Slider yet you can choose Standard Slider as well. The main difference between these two is Carousel Slider allows to use mouse click & drag gesture on desktop devices. But it ignores the transition effects. You should select Standard Slider if transition effects is more important than mouse drag gesture for you.<\/p>\n

\"\"<\/p>\n

4 \u2013 Slider Layout<\/h4>\n

Select Auto as Slider Layout. Auto is just fine for a standard responsive slider fits to the container. Full Width or Full Screen options override maximum theme container size and fits it to the browser window.<\/p>\n

Changing Slider Height :<\/strong>\u00a0Screen sizes should appear right beneath Slider Layout. Although Slider Revolution calculates the slider height automatically, you may want to use a specific height. Slider height can be set from \u201cLayer Grid Size\u201d option. Also Custom Grid Size options provided to specify custom height values for each devices. This feature is highly useful if you specifically want to build a gallery with various image sizes.<\/p>\n

\"\"<\/p>\n

Step B \u2013 Settings<\/h4>\n

Slider settings located in accordion menus on sidebar. Make the following adjustments according to your needs.<\/p>\n

\"\"<\/p>\n

General Settings<\/h4>\n

Defaults Tab :<\/strong>
\nMake general adjustments for both slider and slides. Checkboxes also provided to apply these global changes to all slides.<\/p>\n

1. Background Fit (IMPORTANT) : Cover by default. Fits image horizontally without leaving any gaps. Select Contain in order to prevent crop.
\n2. Default Slider Duration : Set slider duration
\n3. Animation Duration : Set transition duration
\n4. Transition (Carousel Slider ignores) : Transition type for slides such as fade, slide etc.<\/p>\n

Slideshow Tab :<\/strong>
\nActivate Stop Slide On Hover option to prevent changing slide during hover action.<\/p>\n

 <\/p>\n

Layout & Visuals<\/h4>\n

Spinner Tab :<\/strong>
\nChoose Spinner type. You may like 2 or 3 as simple ones<\/p>\n

Navigation Tab :<\/strong>
\nAllows to manage slide navigation types. Arrows and Bullets are the most popular ones. Enable one of them or both if you want to activate slide navigation. Select \u201cNo\u201d for\u00a0Visibility > Always Show option<\/strong>\u00a0for each to activate navigation on hover. For the ones who\u2019ll use this slider as a gallery with thumbnails, should activate it from Thumbs tab.
\nThere are several presets for arrows and sliders. These are the neat ones are Ares, Hermes, Uranus.<\/p>\n

 <\/p>\n

Carousel Settings (Optional) :<\/h4>\n

Activate Infinite Scroll option. It creates a loop between first and last slide and allows to navigate to any side instead of going back to first slider. Click green Save Settings (with disk icon) button to finish creating slider.<\/p>\n

 <\/p>\n

STEP C \u2013 Add Slides<\/h4>\n

Click Slide Editor (with pen icon) to create slides. Slide Editor page is consisting of three sections : Slides, Current slide settings and editor. We\u2019ll ignore the editor features except adding a caption since this tutorial focuses on creating a basic slider.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

1 \u2013 Slides<\/h4>\n

This section allows to manage slides. First slide comes with Transparent setting activated.<\/p>\n

2 \u2013 Slide Settings<\/h4>\n

This is the most important yet usually overlooked section due to editor.
\nMain Background section is where we build a slide\u2019s content and allows to add a image or video easily. You might get confused by the section name, background, but actually it stands for slider\u2019s main content.
\nCreate Image Slider :<\/strong>
\nThere are two image related options under Source tab as\u00a0Main \/ Background Image and External URL.<\/strong>\u00a0Main \/ Background Image allows to select an image your WP media library while External URL allows to use an image from external source (3rd party website etc.).
\nGo to Source Settings tab to change\u00a0Background Fit option<\/strong>\u00a0if it\u2019s necessary. Select Contain option to fit image to the slider without masking.
\nCreate Video Slider :<\/strong>
\nSelect Youtube, Vimeo or HTML5 option depending on your source type. Each option provides cover image to display an image before revealing the video. This feature particularly helps to increase website performance since embedded contents make external queries.
\nSource Settings also provide certain options for videos such as Mute video, Rewind at slide etc.<\/p>\n

 <\/p>\n

3 \u2013 Editor<\/h4>\n

This section provides all advanced features to build a complex slider. Yet this tutorial only covers how to add an image caption.<\/p>\n

Scroll down to editor, hover\u00a0Add Layer<\/strong>\u00a0button and select Text\/HTML option. It\u2019ll add a new layer for caption. Edit sample text as you wish.<\/p>\n

\"\"<\/p>\n

Font type and alignment options provided right below Style button. You\u2019ll need to change alignment of the caption. Click vertical and horizontal alignment buttons according to your needs (this example is using center \u2013 bottom).<\/p>\n

\"\"<\/p>\n

Finally you may need to add some margin to prevent overlapping issues. Margins can be added from X and Y fields. I\u2019ll put 60px to Y field to give 60px bottom margin. If you\u2019re using left \u2013 bottom or right \u2013 bottom, you may want to add the same value to X field form same amount of spacing.<\/p>\n

Click green\u00a0Save Slide<\/strong>\u00a0button to save changes for this slide<\/p>\n

Now your slider is ready to use. You can repeat the same steps to create new slides. New slides can be either added by hover on plus (+) icon and select Blank Slide or hover on current slider and select Duplicate option.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Step A \u2013 Create a New Slider with Slider Revolution Go to Slider Revolution menu from admin dashboard and click (+) New Slider button. This action takes you to Slider Settings page where you can adjust global slider settings. 1 \u2013 Content Source Select Default Slider for this one. 2 \u2013 Slider Title & Shortcode […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/posts\/69"}],"collection":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":0,"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/posts\/69\/revisions"}],"wp:attachment":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/media?parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/categories?post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/documentation\/ronby\/wp-json\/wp\/v2\/tags?post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}