Make the background image of class to be slideshow

Question

I have class that have background image and this background image have fixed navbar and some text on it. How can I make this background image to be slideshow with another two images. Can someone help me with this without damaging the fixed navbar and the text on it? Here is my codes

 <div id="home" class="intro route bg-image" > <nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav"> <div class="container"> <a class="navbar-brand js-scroll" href="#page-top"><%= image_tag "logo.png",class: "logo",alt: "eric chism trail to welness logo" %></a> <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarDefault" aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation"> <span></span> <span></span> <span></span> </button> <div class="navbar-collapse collapse justify-content-end" id="navbarDefault"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link js-scroll active" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link js-scroll" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link js-scroll" href="#service">Services</a> </li> <li class="nav-item"> <a class="nav-link js-scroll" href="#work">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link js-scroll" href="#contact">Contact</a> </li> </ul> </div> </div> </nav> <div class="overlay-itro"></div> <div class="intro-content display-table"> <div class="table-cell"> <div class="container"> <h1 class="intro-title mb-4">Eric Chism Trail to Wellness</h1> <p class="intro-subtitle"> provides a customized journey to complete health and wellness</span><strong class="text-slider"></strong></p> <!-- <p class="pt-3"><a class="btn btn-primary btn js-scroll px-4" href="#about" role="button">Learn More</a></p> --> </div> </div> </div> </div>

css file

 .intro { height: 100vh; position: relative; color: #fff; background-image: url(asset-path("attachment_1550437745.png")); } .intro .intro-content { text-align: center; position: absolute; }

jaredrethman · Accepted Answer · 2019-03-04 21:07:33Z

I have created a very raw, pure CSS solution, as good starting point for you. Using different animations and delays you could achieve some really awesome effects.

body { margin: 0; padding: 0; } .route { height: 100vh; position: relative; color: #fff; } .navbar { position: fixed; } .slide { position: relative; height: 100%; width: 33.33%; margin: 0; float: left; } .slide-1 { background-image: url(https://picsum.photos/1200/800?image=11); } .slide-2 { background-image: url(https://picsum.photos/1200/800?image=12); } .slide-3 { background-image: url(https://picsum.photos/1200/800?image=13); } .slideshow { position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 0; overflow: hidden; color: #000; } .slideshow-inner { position: relative; height: 100%; width: 300%; animation: move 20s ease infinite; } .intro .intro-content { text-align: center; position: absolute; } @keyframes move { 0% { transform: translate(0, 0); } 33.33% { transform: translate(-33.33%, 0); } 66.66% { transform: translate(-66.66%, 0); } }

<div id="home" class="route bg-image"> <div class="slideshow"> <div class="slideshow-inner"> <div class="slide slide-1"><span>Some Text</span></div> <div class="slide slide-2"><span>Some Text</span></div> <div class="slide slide-3"><span>Some Text</span></div> </div> </div> <nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav"> <div class="container"> <div class="navbar-collapse collapse justify-content-end" id="navbarDefault"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link js-scroll active" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link js-scroll" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link js-scroll" href="#service">Services</a> </li> <li class="nav-item"> <a class="nav-link js-scroll" href="#work">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link js-scroll" href="#contact">Contact</a> </li> </ul> </div> </div> </nav> </div>

MBer · Accepted Answer · 2019-03-04 20:27:51Z

Presumably you mean a time-based slideshow rather than one where the user presses buttons. The various options are all typically handled with JavaScript. As your background element has children, I would extend your existing code by adding new classes corresponding to new background images, and switching between them.

 .bg1 { background-image: url(asset-path("img1.png")); } .bg2 { background-image: url(asset-path("img2.png")); } .bg3 { background-image: url(asset-path("img3.png")); }

Then add the first class to your background element:

<div id="home" class="intro route bg-image bg1" >

and include JS code to cycle through the classes, like below - included as part of a snippet so you can see the effect.

function updateSlide() { const bgCount = 3; //This needs to match the number of background classes - main weakness of this snippet const bgElem = document.getElementById('home'); // Background element let foundClasses = []; //List of background classes found let bgIndex = 0; for(let classIndex = 0; classIndex < bgElem.classList.length; classIndex++) { // Using a full for in case the element somehow gets multiple background classes const thisClass = bgElem.classList.item(classIndex); if(thisClass.substr(0, 2) == 'bg') { foundClasses += thisClass; bgIndex = parseInt(thisClass.substr(2)) + 1; } } if(bgIndex > bgCount) { bgIndex = 1; } bgElem.classList.add('bg' + bgIndex); //Apply the new class bgElem.classList.remove(foundClasses); //Remove all previous background classes } setInterval(updateSlide, 2000); // Change every 2 seconds

#home { display: block; } .bg1 { background: red; } .bg2 { background: yellow; } .bg3 { background: green; }

<div id="home" class="bg1">Test</div>

Long-term, you would want the cycling script to get its background-count from a Rails variable or the HTML instead of a hard-coded value.

Collectives™ on Stack Overflow

Make the background image of class to be slideshow

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related