How to Add Slider to Front Page

[justinmarch]

How do I add a slider to the front page?

I am using genesis sample theme.

See: https://www.ianricebuilding.com/new-site/

https://www.ianricebuilding.com/new-site/

[Brad Dalton]

Try the code in this tutorial

---

Tutorials for StudioPress Themes & WooCommerce.

[Tracy Nowak]

You website looks good but true if you are run slides on homepage they will be look more gorgeous 🙂

There are two ways you will easily make sliders and integrate on homepage.

1: You will make custom slides using HTML and CSS and put it on your homepage. Here is Guide hot to make http://qnimate.com/creating-a-slider-using-html-and-css-only/

2: You will add slider using plugins install revslider and any other. Make slides and integrate on which page where you want. The revslider more gorgeous slides than HTML and CSS see on this page https://www.craftivedesign.com/

You can also make video slides for your homepage and its increase you page load time so please do with care.

[justinmarch]

Thanks braddalto,

Have successfully implemented slider on homepage.

Can you let me know...

How do I lessen the gap between the slider and main page content?

How do I bring the slider down, the images are currently cut off by the nav bar?

Cheers,

Justin

[Tracy Nowak]

Hi Justin

Do 100px top margin in your ".soliloquy-container .soliloquy-image" Class

Just Copy this code and replace this whole code:

.soliloquy-container .soliloquy-image {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
margin-top: 100px;
-webkit-user-drag: none;
-moz-user-select: none;
-ms-user-select: none;
}

Result:

[Author]

Posts