Background Img Slider in WP theme - parent element opacity hides content

Question

I'm trying to create a background image slider inside a wp theme without going to deep in code mode. So, I looked around and found this solution .

What I did so far:

1 - Added an Id to a row in a visual composer

2 - Added this CSS to the theme custom CSS:

#slideshow {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.0;
  background-color: #000;
  /* 
     set background images as `url(/path/to/image)` here, 
     separated by commas 
  */
  background-image: url("http://lorempixel.com/400/400/cats/?1"), 
    url("http://lorempixel.com/400/400/animals/?2"), 
    url("http://lorempixel.com/400/400/nature/?3"), 
    url("http://lorempixel.com/400/400/technics/?4"), 
    url("http://lorempixel.com/400/400/city/?5");
  background-size: cover, 0px, 0px, 0px;
/* set transtitions at 3000ms 
  -webkit-transition: background-image 3000ms linear;
  -moz-transition: background-image 3000ms linear;
  -ms-transition: background-image 3000ms linear;
  -o-transition: background-image 3000ms linear;
  transition: background-image 3000ms linear;
    */
}

3 - Upload a js file containing this function:

jQuery(function($) {
  // set `$.fx.interval` at `0`
  $.fx.interval = 0;
  (function cycleBgImage(elem, bgimg) {
// `elem`:`#slideshow:after`
// set, reset, delay to `1000` after background image reset
elem.css("backgroundImage", bgimg)
  // fade in background image
  .fadeTo(3000, 1, "linear", function() {
    // set `delay` before fadeing out image
    // fade in background image        
    $(this).delay(3000, "fx").fadeTo(3000, 0, "linear", function() {
      // split background image string at comma , creating array
      var img = $(this).css("backgroundImage").split(","),
        // concat first background image to `img` array,
        // remove first background image from `img` array
        bgimg = img.concat(img[0]).splice(1).join(",");
      // recursively call `cycleBgImage`
      cycleBgImage(elem, bgimg);
    });
  });
  }($("#slideshow")));
});

And all work just fine.

What is the problem: as this function change opacity of, in this case, a parent element, the child element (a div) disappear as well.

So:

1 - Has I saw in other questions answer can I change this function so that it start using RGBA instead of opacity?

2 - I saw in another answer that we could go around this with a pseudo element, but I kind of didn't know how to change the function to work like that... any ideas?

3 - Is there a better way to do this?

Thanks.

score 0 · Accepted Answer · edited May 23 '17 at 11:53

So, just for the sake of the argument, I found a workaround in a response to one other question.

@gibberish post this code:

$(document).ready(function() {
    var cnt=0, bg;
    var $body = $('body');
    var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','bg6.jpg'];

    var bgrotater = setInterval(function() {
        if (cnt==5) cnt=0;
        bg = 'url("' + arr[cnt] + '")';
        cnt++;
        $body.css('background-image', bg);
    }, 1000);

    //To stop the backgrounds from rotating. Note the critical step above
    //of assigning the setInterval function to a variable, in order to
    //use it again (below) to stop the repeating function
    $('#some_button_id').click(function() {
        clearInterval(bgrotater);
    });

}); //END document.ready

I just change "body" to "#slideshow" and make the correct links to my images.

It works really nice.

Neither of the tow options that I posted worked:

1 - The RGBA option - the A don't affect the background image.

2 - Selecting the pseudo-element - As Blazemonger say in this response:

You can't manipulate :after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript.

Background Img Slider in WP theme - parent element opacity hides content

1 Answers1