У меня есть слайд-шоу, и я хочу, чтобы фон div изменил фоновое изображение и текст.Я не уверен, как это сделать.У вас есть советы?Я загрузил то, что у меня есть, до jsfiddle.Фоновый div находится дальше всего в коде.
Я много искал "заменить содержимое div на клик", но мне кажется, что я ничего не могу реализовать, нужна помощь.
[type=radio] {
display: none;
}
#slider {
left: 0px;
top: 200px;
color: white;
height: 200px;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
right: 30%;
}
.slidercontainer {
position: absolute;
padding-top: 100px;
}
#slider label {
margin: auto;
width: 13%;
height: 63%;
border-radius: 4px;
position: absolute;
left: 0;
right: 0;
cursor: pointer;
transition: transform 0.4s ease;
}
#s1:checked~#slide4,
#s2:checked~#slide5,
#s3:checked~#slide1,
#s4:checked~#slide2,
#s5:checked~#slide3 {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .37);
transform: translate3d(-30%, 0, -200px);
}
#s1:checked~#slide5,
#s2:checked~#slide1,
#s3:checked~#slide2,
#s4:checked~#slide3,
#s5:checked~#slide4 {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
transform: translate3d(-15%, 0, -100px);
}
#s1:checked~#slide1,
#s2:checked~#slide2,
#s3:checked~#slide3,
#s4:checked~#slide4,
#s5:checked~#slide5 {
box-shadow: 0 13px 25px 0 rgba(0, 0, 0, .3), 0 11px 7px 0 rgba(0, 0, 0, .19);
transform: translate3d(0, 0, 0);
}
#s1:checked~#slide2,
#s2:checked~#slide3,
#s3:checked~#slide4,
#s4:checked~#slide5,
#s5:checked~#slide1 {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
transform: translate3d(15%, 0, -100px);
}
#s1:checked~#slide3,
#s2:checked~#slide4,
#s3:checked~#slide5,
#s4:checked~#slide1,
#s5:checked~#slide2 {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .37);
transform: translate3d(30%, 0, -200px);
}
#slide1 {
background: #00BCD4
}
#slide2 {
background: #4CAF50
}
#slide3 {
background: #CDDC39
}
#slide4 {
background: #FFC107
}
#slide5 {
background: #FF5722
}
/*background div*/
.backgroundmusic {
position: absolute;
background-color: crimson;
opacity: 0.7;
top: 100px;
left: 100px;
width: 200px;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="backgroundmusic"></div>
<section id="slider">
<input type="radio" name="slider" id="s1">
<input type="radio" name="slider" id="s2">
<input type="radio" name="slider" id="s3" checked>
<input type="radio" name="slider" id="s4">
<input type="radio" name="slider" id="s5">
<label for="s1" id="slide1">
<div class="vinylplay">
<a id="play-video" class="video-play-button" href="#">
<span></span>
</a>
<div id="video-overlay" class="video-overlay">
<a class="video-overlay-close">×</a>
</div>
</div>
<img src="images/Ambient/maxresdefault.jpg" width="100%" height="100%" alt=""/>
</label>
<label for="s2" id="slide2">
<div class="vinylplay">Play</div>
<img src="images/Ambient/maxresdefault.jpg" width="100%" height="100%" alt=""/>
</label>
<label for="s3" id="slide3">
<img src="images/Ambient/hiroshiyoshimurawetlands.jpg" width="100%" height="100%" alt=""/>
</label>
<label for="s4" id="slide4">
<img src="images/Ambient/maxresdefault.jpg" width="100%" height="100%" alt=""/>
</label>
<label for="s5" id="slide5">
<img src="images/Ambient/pierloft.jpg" width="100%" height="100%" alt=""/>
</label>
</section>
http://jsfiddle.net/5qcy9rvm/1/