I would like to do this in CSS:
$("div.slider").height($("div.slider div.slide").height())
Is it possible?
The goal is to create a slide where the height of the div container is always, at runtime, the same height as the slide div
I tried the form below but it disappeared everything:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>$(document).ready(function(e){//$("div.slider").height($("div.slider div.slide").height())
const blocos = $("div.slider div.slide");
function startslider() {
ativa = $("div.slider div.ativa")
if (!$(ativa).next().length) {
ativa = blocos[0]
}
$(ativa)
.removeClass("ativa")
.next()
.addClass("ativa")
setTimeout(startslider, 5000)
}
setTimeout(startslider, 5000)
$("nav button.anterior").click(function(){
prev = $("div.slider div.ativa").prev();
prev = prev.length ? prev : blocos[ blocos.length - 1 ];
mostraBloco(prev);
})
$("nav button.proximo").click(function(){
next = $("div.slider div.ativa").next();
next = next.length ? next : blocos[0];
mostraBloco(next);
})
/* Função para exibir as imagens */
function mostraBloco(next) {
ativa = $("div.slider div.ativa")
$(ativa).removeClass("ativa")
$(next).addClass("ativa")
}
});
</script>
* {
margin: 0;
padding:0;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
div.slider {
overflow: hidden;
position:relative;
width: 100vw;
height:300px;
}
div.slider:hover {
animation-play-state:paused;
}
div.slider div.slide {
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:auto;
}
div.slider div.slide img {
width:100%;
}
div.slider div.ativa {
display: block;
}
div.slider div.ativa img{
animation: slider 1s linear;
animation-fill-mode: forwards;
}
div.slider div.ativa img:hover {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@keyframes slider {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
div.slider div.slide span {
position:absolute;
width:100%;
line-height:40px;
bottom:0;
z-index:500;
color:rgb(255,255,255);
text-align:center;
}
div.slider nav {
position:absolute;
bottom:0;
width:100%;
height:40px;
background-color:rgb(0,0,0,.5);
z-index:400;
text-align:center;
}
div.slider nav button.anterior,
div.slider nav button.proximo {
position:absolute;
width:100px;
height:40px;
text-align:center;
}
div.slider nav button.anterior{
left:10%;
}
div.slider nav button.proximo{
right:10%;
}
div.slider nav button.proximo label {
top:calc(50%-20px);
}
<div class="slider">
<div class="slide fade ativa">
<img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_1.jpg"/><span>Esteé1</span></div><divclass="slide fade">
<img src="http://funerariasaopedro.net.br/novo/_img/_banner/_site/bg_2.jpg"/><span>Esteé2</span></div><nav><buttonclass="anterior">Anterior</button>
<button class="proximo">Próximo</button>
</nav>
</div>
</div>