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
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%; */
}
Responsive image in small screens
If your slider image appears to be very large on small screens and only a portion of the image is displayed. You can add the below CSS to Enfold > General Styling > Quick CSS to scale the image down to the browser width.
CSS
/* CSS to scale down fullscreen slider image */
.avia-fullscreen-slider .avia-slideshow>ul>li {
background-size: cover !important;
}
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 */
}