How can I put a slider type background on my website?

Question

How can I put a slider type background on my website?

Navigation

#1 by (1 votes)

2

I want to put a background that moves with a slider style, and that has some opacity so that the main content can be noticed perfectly, would there be a clear code way to do it?

I've tried with javascript and css but nothing has worked for me.

javascript html css slider web

asked by Francisco Castle 03.07.2018 в 02:42

source

1 answer

Infinite loop when I enter a character instead of an integer in C ++ access properties of the class "Host" from grouped properties TPersistent

score 1 · Answer 1

I saw this code through there

html, body {
  margin: 0; padding: 0;
}

.slider-wrap {
  width: 100%;
  height:600px;
  position: relative;
}
.single-slide {
  width: 100%;
    height: 100%;
    position: absolute;
  opacity: 0;
animation: slider-animation;
animation-duration: 25s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
  background-size: cover;
}

#slide-1 {background-color: red; background-image: url(https://images7.alphacoders.com/391/391001.jpg);}
#slide-2 {background-color: rebeccapurple; animation-delay: 5s; background-image: url(https://images5.alphacoders.com/426/426029.jpg);}
#slide-3 {background-color: orange; animation-delay: 10s; background-image: url(http://www.amazingwallpaperz.com/wp-content/uploads/Ice-Cream-Wallpapers-For-Laptops.jpg);}
#slide-4 {background-color: blue; animation-delay: 15s; background-image: url(http://wallpapersdsc.net/wp-content/uploads/2015/11/Ice_Cream_Iphone_wallpapers14.jpg);}
#slide-5 {background-color: green; animation-delay: 20s; background-image: url(http://kingofwallpapers.com/ice-cream-wallpaper/ice-cream-wallpaper-015.jpg);}

@keyframes slider-animation {
    
0% {
    opacity: 0;
}
6% {
    opacity: 1;
}
24% {
    opacity: 1;
}
30% {
    opacity: 0;
}
100% {
    opacity: 0;
}
}

<div class="slider-wrap">
  <div class="single-slide" id="slide-1"></div>
  <div class="single-slide" id="slide-2"></div>
  <div class="single-slide" id="slide-3"></div>
  <div class="single-slide" id="slide-4"></div>
  <div class="single-slide" id="slide-5"></div>
  
</div>