Content Slider
Overview
Ever wanted to slide text (and other elements that can be added to a WordPress text editor)? The content slider allows you to do that easily. To make it more interesting you can simply add this element inside a color section and add a background color/image or video to the color section. This will give an illusion that the text or other elements slide over the video or image that is added as a background.
View the online demo of the content slider.
Code Snippets
Shortcode
[av_content_slider heading='' columns='2' animation='fade' navigation='arrows' autoplay='false' interval='5' font_color='' color='' custom_class='' av_uid='av-6iy2yi'] [av_content_slide title='Slide 1' tags='' link='' linktarget='' av_uid='av-6eo3qy'] Slide Content goes here [/av_content_slide] [av_content_slide title='Slide 2' tags='' link='' linktarget='' av_uid='av-6688pe'] Slide Content goes here [/av_content_slide] [/av_content_slider]
Customization
Content slider style – 1
Content Slider inherits the theme styles, to add custom style to the slider element, start by adding a custom class name “av-contentslider-style-1” and use the below code snippet. This code snippet will help you change the styles for:
- Slider Heading
- Slider Title
- Slider Content
- Slider Background
Code snippet:
Shortcode
[av_content_slider heading='I’m Custom Styled:' columns='2' animation='slide' navigation='arrows' autoplay='false' interval='5' font_color='' color='' av_uid='av-58bk9e' custom_class='av-contentslider-style-1']
[av_content_slide title='Slide One' link='' linktarget='' av_uid='av-54cuwy']
Cum. Dictum dignissim mi congue habitasse velit. Enim, aliquam nascetur porttitor congue erat pharetra orci eros eu parturient mi ultrices.
[/av_content_slide]
[av_content_slide title='Slide Two' link='' linktarget='' av_uid='av-hml4i']
Sed suspendisse sollicitudin ipsum tellus sed Leo elementum penatibus suspendisse, nisi. Dictum fusce nibh volutpat non ut tellus imperdiet.
[/av_content_slide]
[av_content_slide title='Slide Three' link='' linktarget='' av_uid='av-4nxgsi']
Pharetra. Arcu risus hendrerit lectus rhoncus pulvinar dui ipsum. Luctus. Faucibus aliquet taciti placerat pede cubilia ut pulvinar, volutpat cras.
[/av_content_slide]
[av_content_slide title='Slide Four' link='' linktarget='' av_uid='av-4jkmyi']
Ridiculus nam neque risus, congue. Pharetra sit. Netus. Etiam fames laoreet ad tristique blandit convallis lectus tempor lacinia, justo praesent.
[/av_content_slide]
[/av_content_slider]CSS
/*----------------------------------------
// CSS - Content Slider Style - 1
//--------------------------------------*/
/* Content slider heading */
.av-contentslider-style-1 .new-special-heading h3{
color:#9f9fa3;
font-family: 'Kreon', serif;
font-size: 22px;
}
/* Content slider title */
.av-contentslider-style-1 h3.slide-entry-title {
color:gold;
font-family: 'Roboto', sans-serif!important;
text-transform: uppercase;
padding:0!important;
}
/* Title Position */
.av-contentslider-style-1 h3.slide-entry-title {
position: absolute;
top: 15px;
left: 18px;
}
/* CSS - Content slider excerpt */
#top .av-contentslider-style-1 .entry-content {
font-family: 'Roboto', sans-serif!important;
padding: 25px 20px 20px 20px!important;
}
#top .av-contentslider-style-1 .entry-content p {
color:#FFF!important;
}
/* Alternate background */
.av-contentslider-style-1 .slide-entry-wrap .slide-entry:nth-child(odd) .entry-content {
background: #30c39e;
}
.av-contentslider-style-1 .slide-entry-wrap .slide-entry:nth-child(even) .entry-content {
background: #0a8ea0;
}
Content slider style – 2
To style your slider similar to the below example, start by adding a custom class name “av-contentslider-style-2” and use the below code snippet. This code snippet will help you change the styles for:
- Arrow position
- Arrow icon
- Arrow color
- Slider background
Code snippet:
Shortcode
[av_content_slider heading='' columns='2' animation='slide' navigation='arrows' autoplay='false' interval='5' font_color='' color='' av_uid='av-3sky8y' custom_class='av-contentslider-style-2']
[av_content_slide title='Slide 1' link='' linktarget='' av_uid='av-3j860q']
Cum. Dictum dignissim mi congue habitasse velit. Enim, aliquam nascetur porttitor congue erat pharetra orci eros eu parturient mi ultrices.
[/av_content_slide]
[av_content_slide title='Slide 2' link='' linktarget='' av_uid='av-3dbv9u']
Sed suspendisse sollicitudin ipsum tellus sed Leo elementum penatibus suspendisse, nisi. Dictum fusce nibh volutpat non ut tellus imperdiet.
[/av_content_slide]
[av_content_slide title='Slide 3' link='' linktarget='' av_uid='av-3ak7b6']
Pharetra. Arcu risus hendrerit lectus rhoncus pulvinar dui ipsum. Luctus. Faucibus aliquet taciti placerat pede cubilia ut pulvinar, volutpat cras.
[/av_content_slide]
[av_content_slide title='Slide 4' link='' linktarget='' av_uid='av-35055e']
Ridiculus nam neque risus, congue. Pharetra sit. Netus. Etiam fames laoreet ad tristique blandit convallis lectus tempor lacinia, justo praesent.
[/av_content_slide]
[/av_content_slider]CSS
/*----------------------------------------
// CSS - Content Slider style - 2
//--------------------------------------*/
/* Slider Background */
#top .av-contentslider-style-2 {
margin: 20px 50px;
background: #dbeede;
padding: 20px 40px;
}
/* Arrow position */
#top .av-contentslider-style-2 .avia-slideshow-arrows.avia-slideshow-controls {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
z-index: 999;
}
/* Right arrow*/
.av-contentslider-style-2 .avia-slideshow-arrows.avia-slideshow-controls .next-slide {
right: -35px !important;
}
/* Arrow icon */
#top .av-contentslider-style-2 .avia-slideshow-arrows.avia-slideshow-controls a.next-slide:before{
content:'e875';
}
/* Left arrow */
.av-contentslider-style-2 .avia-slideshow-arrows.avia-slideshow-controls .prev-slide {
left: -35px !important;
}
/* Arrow icon */
#top .av-contentslider-style-2 .avia-slideshow-arrows.avia-slideshow-controls a.prev-slide:before{
content:'e874';
}
/* Common arrow styles */
#top .av-contentslider-style-2 .avia-slideshow-arrows.avia-slideshow-controls a {
border-radius: 25px;
color:#fff;
font-weight: bolder;
font-size: 24px;
background: #decba5;
width: 30px;
height: 30px;
}
#top .av-contentslider-style-2 .avia-slideshow-arrows.avia-slideshow-controls a:before {
background: transparent;
top:3px;
}
/* Arrow hover style */
#top .av-contentslider-style-2 .avia-slideshow-arrows.avia-slideshow-controls a:hover {
opacity: 1;
background: #84754e;
}
Content slider style – 3
In this example, we take a look at managing the space between the slides. Start by adding a custom CSS class name “av-contentslider-style-3“.
Code snippet:
Shortcode
[av_content_slider heading='' columns='3' animation='slide' navigation='arrows' autoplay='false' interval='5' font_color='' color='' av_uid='av-26fbvm' custom_class='av-contentslider-style-3']
[av_content_slide title='Slide 1' link='' linktarget='' av_uid='av-17pl4y']
Enim aliquam nascetur porttitor congue erat pharetra orci eros eu parturient mi ultrices.
[/av_content_slide]
[av_content_slide title='Slide 2' link='' linktarget='' av_uid='av-1368qi']
Sed suspendisse sollicitudin ipsum tellus sed Leo elementum penatibus suspendisse, nisi.
[/av_content_slide]
[av_content_slide title='Slide 3' link='' linktarget='' av_uid='av-ybrve']
Pharetra arcu risus hendrerit lectus rhoncus pulvinar dui ipsum luctus faucibus aliquet.
[/av_content_slide]
[av_content_slide title='Slide 4' link='' linktarget='' av_uid='av-sgkh6']
Ridiculus nam neque risus, congue pharetra sit fames laoreet ad tristique blandit convallis.
[/av_content_slide]
[av_content_slide title='Slide 5' link='' linktarget='' av_uid='av-m94hu']
Netus etiam fames laoreet ad tristique blandit convallis lectus tempor lacinia, justo praesent.
[/av_content_slide]
[av_content_slide title='Slide 6' link='' linktarget='' av_uid='av-ftuvm']
Etiam fames laoreet ad tristique blandit convallis lectus tempor lacinia, justo praesent.
[/av_content_slide]
[av_content_slide title='Slide 7' link='' linktarget='' av_uid='av-6v7wq']
Ridiculu fames laoreet ad tristique blandit convallis lectus tempor lacinia, justo praesent.
[/av_content_slide]
[/av_content_slider]CSS
/*----------------------------------------
// CSS - Content Slider style - 3
//--------------------------------------*/
.av-contentslider-style-3.avia-content-slider .slide-entry-title {
margin: 0 10px 20px 0;
}
.av-contentslider-style-3.avia-content-slider .slide-entry-wrap .entry-content {
padding: 20px;
color:#FFF;
font-weight:lighter;
border-radius:4px;
}
/* Alternate background */
.av-contentslider-style-3.avia-content-slider .slide-entry-wrap:nth-child(1) .slide-entry:nth-child(1) .entry-content {
background: #00aeff;
}
.av-contentslider-style-3.avia-content-slider .slide-entry-wrap:nth-child(1) .slide-entry:nth-child(2) .entry-content {
background: #3369e7;
}
.av-contentslider-style-3.avia-content-slider .slide-entry-wrap:nth-child(1) .slide-entry:nth-child(3) .entry-content {
background: #8e43e7;
}
.av-contentslider-style-3.avia-content-slider .slide-entry-wrap:nth-child(2) .slide-entry:nth-child(1) .entry-content {
background: #b84592;
}
.av-contentslider-style-3.avia-content-slider .slide-entry-wrap:nth-child(2) .slide-entry:nth-child(2) .entry-content {
background: #ff6c5f;
}
.av-contentslider-style-3.avia-content-slider .slide-entry-wrap:nth-child(2) .slide-entry:nth-child(3) .entry-content {
background: #ffc168;
}
.av-contentslider-style-3.avia-content-slider .slide-entry-wrap:nth-child(3) .slide-entry:nth-child(1) .entry-content {
background: #2dde98;
}
Display arrows in responsive mode
To display the Content Slider navigation arrows in responsive mode please use the CSS below:
/*----------------------------------------
// CSS - Display arrows in portable device
//--------------------------------------*/
@media only screen and (max-width: 767px) {
.responsive #top .avia-content-slider-element-container .avia-slideshow-controls a {
display: block!important;
}}
Resource
Contributed video: