Need to have a container change a background automatically?
I didn't know you can not use transitions with background-image on a single container. It will give you lots of troubles on different browsers.
What you can do is use opacity transitions with multiple containers.
HTML
You can modify this to fit your needs. In my case I wanted the images to behave as background, under my content.
<div class="container">
<div class="content">We could have anything here</div>
<div class="slide show" style="background-image: url('image-1.jpg');"></div>
<div class="slide" style="background-image: url('image-2.jpg');"></div>
<div class="slide" style="background-image: url('image-3.jpg');"></div>
</div>
CSS
The basic CSS below. In my demo I've added extra CSS to position another container inside it. So I can have the slides as background under the content.
.container {
width: 100%;
height: 500px;
position: relative;
}
.container .slide {
z-index: 1;
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 100%;
transition: opacity 1s ease-in-out;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
}
.container .slide.show {
opacity: 1;
}
JavaScript
We'll use jQuery for ease of use.
function cycleBackgrounds() {
var index = 0;
$imageEls = $('.container .slide'); // Get the images to be cycled.
setInterval(function () {
// Get the next index. If at end, restart to the beginning.
index = index + 1 < $imageEls.length ? index + 1 : 0;
// Show the next
$imageEls.eq(index).addClass('show');
// Hide the previous
$imageEls.eq(index - 1).removeClass('show');
}, 2000);
};
// Document Ready.
$(function () {
cycleBackgrounds();
});
CandiAnne
I added your code to my site exactly as you have it yet it’s not working, only the 1st image loads.
Rick
Unfortunately the code is not as easy as plug and play. Some tweaking might be needed.
Impossible for me to predict every case ๐
Himani
Can u tell me about path in html……I mean how to set path.
Rick
I’m not sure what to you mean. Path depends on where you have your images.
Vignesh
I could get the slideshow to work but, the text also shows as part of the slideshow. Like, it has its own slide. Do you have any idea how fix this? Thanks in advance.
Rick
Super hard to say without seeing the code.
Werner
Works great, thank you.
Only, the first slide stays longer than all other slides. I guess the JS would need some change. But I don’t know much of it.
Shayne
This works wonderfully! Thanks! I have one question. I am trying to add Forward and Backwards buttons for clicking through the background images. I’m not too good with Jquery, but here is the updated code that I’ve come up with:
function cycleBackgrounds() { var index = 0; $imageEls = $('.product-slide-show .slide'); // Get the images to be cycled. setInterval(function () { // Get the next index. If at end, restart to the beginning. index = index + 1 < $imageEls.length ? index + 1 : 0; // Show the next $imageEls.eq(index).addClass('show'); // Hide the previous $imageEls.eq(index - 1).removeClass('show'); }, 4000); $("#forward").click(function(){ $imageEls.eq(index + 1).addClass('show'); $imageEls.eq(index).removeClass('show'); }); $("#backwards").click(function(){ $imageEls.eq(index - 1).addClass('show'); $imageEls.eq(index).removeClass('show'); }); }; // Document Ready. $(function () { cycleBackgrounds(); });
It somewhat works, but not quite the way it should:
1) The timer doesn’t start over when the button is clicked.
2) The button clicks only work one time until the next slide is displayed.
3) If the forward button is clicked when the last image is currently displayed, a blank background will show.
Any help would be much appreciated!
Thanks,
Shayne
Shayne
Nevermind. I figured it out. It might not be the most elegant way, but it works ๐
var index = 0; $imageEls = $('.product-slide-show .slide'); // Get the images to be cycled. var interval; function cycleBackgrounds() { interval = setInterval(function () { // Get the next index. If at end, restart to the beginning. index = index + 1 < $imageEls.length ? index + 1 : 0; // Show the next $imageEls.eq(index).addClass('show'); // Hide the previous $imageEls.eq(index - 1).removeClass('show'); }, 8000); }; //Next Button function getNext() { index = index + 1 < $imageEls.length ? index + 1 : 0; $imageEls.eq(index).addClass('show'); $imageEls.eq(index -1).removeClass('show'); clearInterval(interval); cycleBackgrounds(); } //Back Button function getPrev() { index = index - 1 < 0 ? $imageEls.length : index - 1; $imageEls.eq(index).addClass('show'); $imageEls.eq(index + 1).removeClass('show'); clearInterval(interval); cycleBackgrounds(); } // Document Ready. $(function () { cycleBackgrounds(); $('#prod-forward').on('click', getNext); $('#prod-backwards').on('click', getPrev); });
Rick
It’s not bad, perhaps you could move into variables the class. In case it ever changes. Also move from ID to CLASS for the forward and backwards selectors.
Best regards
Luke
Unfortunately if you have links in your slide show, this solution will not work. It alwAys points to link in the last slide in the list.
Arun
Thanks for sharing this.. can I use two instances of this script on a page?
Kindly provide a hint how to.. thanks again.
Rick
Hello,
Sure, with a little change. Basically to iterate on the containers.
HTML
<div class="container"> <div class="content">We could have anything here</div> <div class="slide show" style="background-image: url('https://placeimg.com/640/480/animals');"></div> <div class="slide" style="background-image: url('https://placeimg.com/640/480/people');"></div> <div class="slide" style="background-image: url('https://placeimg.com/640/480/nature');"></div> </div> <div class="container"> <div class="content">We could have anything here</div> <div class="slide show" style="background-image: url('https://placeimg.com/640/480/animals');"></div> <div class="slide" style="background-image: url('https://placeimg.com/640/480/people');"></div> <div class="slide" style="background-image: url('https://placeimg.com/640/480/nature');"></div> </div>
JavaScript
function cycleBackgrounds() { $containers = $('.container'); $containers.each(function() { let $imageEls = $(this).find('.slide'); // Get the images to be cycled. let index = 0; setInterval(function () { // Get the next index. If at end, restart to the beginning. index = index + 1 < $imageEls.length ? index + 1 : 0; // Show the next $imageEls.eq(index).addClass('show'); // Hide the previous $imageEls.eq(index - 1).removeClass('show'); }, 2000); }); }; // Document Ready. $(function () { cycleBackgrounds(); });
brian
I’m getting an from the JS
TypeError: $ is not a function. (In '$(function () { cycleBackgrounds(); })', '$' is undefined)
Rick
Hello Brian,
You need to include jQuery like so:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Best regards
hshah
Is there an easy way to randomise the image order?
Rick
I guess it is possible.
Or you could shuffle the index.
Jackie
Is there a simple or not so simple way to add a link to one of the images so if its clicked on it will go to another site or page? I have tried many options I have found online but none of them seem to work…. I thought it might be a z-index issue but I cant seem to resolve it… any thoughts?