How To Create Full Page Image Slider

PluginOps Page Builder let you build responsive page with any element. In this tutorial I will show you how you can add responsive full page slider in your pages and landing pages.


1. Add a new row with one column. 

Click on the add new row button to add a new row and select the column structure for one column only. The reason for selecting one column is that we want to achieve the full width and full height slider and its only possible if the container is full width.

2. Set Column Width 100%

Edit the column and set its width to 100% so the container column is full width. When we add the slider it will automatically become full width.

3. Add Image Slider Widget 

Open the new widget tab and search for image slider widget, Then Drag & Drop the image slider widget in column.

4. Set Slider Width To 100vh 

Click on the slider widget edit button to open its options then open slider settings tab and set the slider height to "100" and select unit "vh" this will make the slider full width and full page. No matter on what device a user is visiting your page the slider will remain full width and full height. 


5. Add Slides

Next up remove or edit the existing placeholder slides and add new slides with your own content. If you don't want to display the content on the images leave the content fields empty and it will be hidden. 


If you haven't installed the PluginOps Page Builder install it now it's completely free.