initial image slide of Image dest.
This commit is contained in:
Fabiano Alencar
parent
3384d6f4bf
commit
52f24f04cf
|
|
@ -78,6 +78,75 @@ nav{
|
|||
}
|
||||
}
|
||||
}
|
||||
.tainacan-img-dest{
|
||||
@media only screen and (min-width: 768px) {
|
||||
|
||||
/* show 3 items */
|
||||
.carousel-inner .active,
|
||||
.carousel-inner .active + .carousel-item,
|
||||
.carousel-inner .active + .carousel-item + .carousel-item,
|
||||
.carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
|
||||
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
|
||||
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
|
||||
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.carousel-inner .carousel-item-next,
|
||||
.carousel-inner .carousel-item-prev {
|
||||
position: relative;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -25%;
|
||||
z-index: -1;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* left or forward direction */
|
||||
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
|
||||
.carousel-item-next.carousel-item-left + .carousel-item,
|
||||
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
|
||||
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
|
||||
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
|
||||
position: relative;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* farthest right hidden item must be abso position for animations */
|
||||
.carousel-inner .carousel-item-prev.carousel-item-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* right or prev direction */
|
||||
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
|
||||
.carousel-item-prev.carousel-item-right + .carousel-item,
|
||||
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
|
||||
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
|
||||
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
|
||||
position: relative;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
visibility: visible;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer{
|
||||
|
|
|
|||
|
|
@ -46,4 +46,71 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="tainacan-img-dest p-2">
|
||||
<div class="col-12 d-flex border-bottom">
|
||||
<h4 class="text-jelly-bean">Imagens em destaque</h4> <span class="text-jelly-bean ml-auto align-self-center">Ver mais</span>
|
||||
</div>
|
||||
<div class="row p-5">
|
||||
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
|
||||
<div class="carousel-inner row w-100 mx-auto" role="listbox">
|
||||
<div class="carousel-item col-md-4 active">
|
||||
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
|
||||
</div>
|
||||
<div class="carousel-item col-md-4">
|
||||
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
|
||||
</div>
|
||||
<div class="carousel-item col-md-4">
|
||||
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
|
||||
</div>
|
||||
<div class="carousel-item col-md-4">
|
||||
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
|
||||
</div>
|
||||
<div class="carousel-item col-md-4">
|
||||
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
|
||||
</div>
|
||||
<div class="carousel-item col-md-4">
|
||||
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
|
||||
</div>
|
||||
<div class="carousel-item col-md-4">
|
||||
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
|
||||
</div>
|
||||
<div class="carousel-item col-md-4">
|
||||
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
|
||||
<i class="material-icons text-scooter">chevron_left</i>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
|
||||
<i class="material-icons text-scooter">chevron_right</i>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="tainacan-gallery-itens p-2">
|
||||
<div class="col-12 d-flex border-bottom">
|
||||
<h4 class="text-jelly-bean">Galeria de itens</h4> <span class="text-jelly-bean ml-auto align-self-center">Ver mais</span>
|
||||
</div>
|
||||
<div class="row p-5">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="tainacan-estatisticas p-2">
|
||||
<div class="col-12 d-flex border-bottom">
|
||||
<h4 class="text-jelly-bean">Estatísticas</h4> <span class="text-jelly-bean ml-auto align-self-center">Ver mais</span>
|
||||
</div>
|
||||
<div class="row p-5">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="tainacan-caracteristicas p-2">
|
||||
<div class="col-12 d-flex border-bottom">
|
||||
<h4 class="text-jelly-bean">Características</h4> <span class="text-jelly-bean ml-auto align-self-center">Ver mais</span>
|
||||
</div>
|
||||
<div class="row p-5">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
Loading…
Reference in New Issue