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

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_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

I’m Custom Styled:

Slide One

Cum. Dictum dignissim mi congue habitasse velit. Enim, aliquam nascetur porttitor congue erat pharetra orci eros eu parturient mi ultrices.

Slide Two

Sed suspendisse sollicitudin ipsum tellus sed Leo elementum penatibus suspendisse, nisi. Dictum fusce nibh volutpat non ut tellus imperdiet.

Slide Three

Pharetra. Arcu risus hendrerit lectus rhoncus pulvinar dui ipsum. Luctus. Faucibus aliquet taciti placerat pede cubilia ut pulvinar, volutpat cras.

Slide Four

Ridiculus nam neque risus, congue. Pharetra sit. Netus. Etiam fames laoreet ad tristique blandit convallis lectus tempor lacinia, justo praesent.

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

Slide 1

Cum. Dictum dignissim mi congue habitasse velit. Enim, aliquam nascetur porttitor congue erat pharetra orci eros eu parturient mi ultrices.

Slide 2

Sed suspendisse sollicitudin ipsum tellus sed Leo elementum penatibus suspendisse, nisi. Dictum fusce nibh volutpat non ut tellus imperdiet.

Slide 3

Pharetra. Arcu risus hendrerit lectus rhoncus pulvinar dui ipsum. Luctus. Faucibus aliquet taciti placerat pede cubilia ut pulvinar, volutpat cras.

Slide 4

Ridiculus nam neque risus, congue. Pharetra sit. Netus. Etiam fames laoreet ad tristique blandit convallis lectus tempor lacinia, justo praesent.

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“.

Slide 1

Enim aliquam nascetur porttitor congue erat pharetra orci eros eu parturient mi ultrices.

Slide 2

Sed suspendisse sollicitudin ipsum tellus sed Leo elementum penatibus suspendisse, nisi.

Slide 3

Pharetra arcu risus hendrerit lectus rhoncus pulvinar dui ipsum luctus faucibus aliquet.

Slide 4

Ridiculus nam neque risus, congue pharetra sit fames laoreet ad tristique blandit convallis.

Slide 5

Netus etiam fames laoreet ad tristique blandit convallis lectus tempor lacinia, justo praesent.

Slide 6

Etiam fames laoreet ad tristique blandit convallis lectus tempor lacinia, justo praesent.

Slide 7

Ridiculu fames laoreet ad tristique blandit convallis lectus tempor lacinia, justo praesent.

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