Fullscreen Slider

Overview

This slider stretches across the whole screen. You can set multiple sliders per page and also set their properties individually. Like, for example, the background image behaviour (parallax anyone?), image color overlays, captions, etc

Examples of fullscreen slider element.

CODE SNIPPETS

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

 [av_slideshow_full size='featured' min_height='0px' stretch='' animation='slide' autoplay='false' interval='5' control_layout='av-control-default' src='' attachment='' attachment_size='' position='top left' repeat='no-repeat' attach='scroll' custom_class='' av_uid='av-c8vet'] 

Customization

Fullscreen slider custom size

As the name says the “Fullscreen slider” will stretch the entire height and width of the browser window. If you wish to change the default behaviour of the fullscreen slider element please add a custom CSS class name “av-full-slider-custom-size” and change the height and width value in the below code to suit your design.

Example of custom size fullscreen slider.

CSS


/*----------------------------------------
// fullscreen slider with custom size
//--------------------------------------*/

.av-full-slider-custom-size .avia-slideshow {
/* Custom height */
max-height: 60vh !important;

/* Custom width */
max-width: 75vw !important;
position: relative;
left: 50%;
transform: translateX(-50%);
}

.av-full-slider-custom-size.avia-fullscreen-slider .avia-slideshow>ul>li {
background-repeat: no-repeat;

/* to display full background image adjust the width and height below*/
/* background-size: 100% 100%; */
}

Font style

To add custom styles to the fullscreen slider title and caption fonts please use the CSS below.

/*----------------------------------------
// CSS -Fullscreen Slider font style
//--------------------------------------*/

/* Caption title */
#top .avia-fullwidth-slider .avia-caption-title {
/*Your style here */
}

/*caption content */
#top .avia-fullwidth-slider .avia-caption-content p {
/*Your style here */
}

Button Style

The button styles can be changed from the element settings. However,  to custom style the button please use the CSS below.

/*----------------------------------------
// CSS -Fullscreen Slider button style
//--------------------------------------*/

/* Slideshow button */
#top .avia-fullwidth-slider .slideshow_inner_caption .avia-slideshow-button {
/*Your style here */
}

Multiple buttons in slider

Using the element setting you can add up to two buttons. To add more than two buttons to the slides please use the button shortcode in the caption text area with your caption text.

 [av_button label='Click me' link='manually,http://' link_target='' size='small' position='left' icon_select='yes' icon='ue800' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff' custom_class='' admin_preview_bg='' av_uid='av-yf8x9']

[av_button label='Click me' link='manually,http://' link_target='' size='small' position='left' icon_select='yes' icon='ue800' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff' custom_class='' admin_preview_bg='' av_uid='av-rmfnh'] 

Caption background and width

To custom style the slider caption area, to add a background color or to change the width please use the  CSS selector below.

/*----------------------------------------
// CSS - Fullscreen caption area
//--------------------------------------*/

/* Slideshow caption background and width */
#top .avia-fullwidth-slider .slideshow_inner_caption {
	/*Your style here */
}