Slide Anything Usage Examples

I created this page to show various Slide Anything usage examples along with screenshots/code illustrating how these examples were created.

Example 1 - Full-width Menu Slider

Content & settings for the above example slider

Listed below are all the settings I’ve used to create the example slider above.

Content for for each slide

Click the thumbnail below to open screenshot:
Usage Example 1 - Settings Image 1
Each slide consists of a single H2 and H4 heading.

Slide Background settings

Click the thumbnail below to open screenshot:
Usage Example 1 - Settings Image 2

The Responsive CSS for this slider

#menu_slider .owl-item .sa_hover_container > div {
	position:absolute; top:50%; margin-top:-28px; width:100%; text-align:center; }
#menu_slider .owl-item .sa_hover_container > div > h5 {
	padding:0px 0px 6px; font-family:'Open Sans'; font-weight:700; font-size:14px;
line-height:20px; letter-spacing:3px; color:#ffffff; text-shadow:0px 0px 1px #000000; } #menu_slider .owl-item .sa_hover_container > div > h3 { padding:0px; font-family:'Open Sans'; font-weight:700; font-size:24px;
line-height:30px; letter-spacing:3px; text-shadow:0px 0px 1px #000000; } #menu_slider .owl-item .sa_hover_container > div > h3 a { color:#ffffff; } .white #menu_slider .owl-nav .owl-prev, .white #menu_slider .owl-nav .owl-next { background-color:transparent !important; } @media only screen and (max-width:980px) { #menu_slider .owl-item .sa_hover_container > div { margin-top:-26px; } #menu_slider .owl-item .sa_hover_container > div h3 { font-size:22px; line-height:28px; } } @media only screen and (max-width:767px) { #menu_slider .owl-item .sa_hover_container > div { margin-top:-24px; } #menu_slider .owl-item .sa_hover_container > div h3 { font-size:20px; line-height:26px; } }

Slider Settings

Click the thumbnail below to open screenshot:
Usage Example 1 - Settings Image 3

Slider Style

Click the thumbnail below to open screenshot:
Usage Example 1 - Settings Image 4
CONTACT US