tmdinosaurcenter
/
tainacan-theme
mirror of https://github.com/tainacan/tainacan-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Carousel highlight images

This commit is contained in:
Fabiano Alencar 2018-02-15 14:41:37 -02:00
parent 52f24f04cf
commit ef68e22f83
4 changed files with 46 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/assets/js/js.js Normal file
View File

@ -0,0 +1,22 @@
jQuery(document).ready(function( $ ) {
$('#carouselExample').on('slide.bs.carousel', function (e) {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 3;
var totalItems = $('.carousel-item').length;
if (idx >= totalItems-(itemsPerSlide-1)) {
var it = itemsPerSlide - (totalItems - idx);
for (var i=0; i<it; i++) {
// append slides to end
if (e.direction=="left") {
$('.carousel-item').eq(i).appendTo('.carousel-inner');
}
else {
$('.carousel-item').eq(0).appendTo('.carousel-inner');
}
}
}
});
});

18
src/assets/scss/_media_query.scss
View File

@ -80,19 +80,16 @@ nav{
} }
.tainacan-img-dest{ .tainacan-img-dest{
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
/* show 3 items */ /* show 3 items */
.carousel-inner .active, .carousel-inner .active,
.carousel-inner .active + .carousel-item, .carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item, .carousel-inner .active + .carousel-item + .carousel-item {
.carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
display: block; 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-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-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-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
transition: none; transition: none;
} }
@ -102,10 +99,10 @@ nav{
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item { .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute; position: absolute;
top: 0; top: 0;
right: -25%; right: -33.3333%;
z-index: -1; z-index: -1;
display: block; display: block;
visibility: visible; visibility: visible;
@ -115,8 +112,7 @@ nav{
.active.carousel-item-left + .carousel-item-next.carousel-item-left, .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-next.carousel-item-left + .carousel-item + .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-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: relative; position: relative;
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
visibility: visible; visibility: visible;
@ -136,15 +132,13 @@ nav{
.active.carousel-item-right + .carousel-item-prev.carousel-item-right, .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-prev.carousel-item-right + .carousel-item + .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-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: relative; position: relative;
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
visibility: visible; visibility: visible;
display: block; display: block;
visibility: visible; visibility: visible;
} }
} }
} }
} }

3
src/functions.php
View File

@ -36,6 +36,9 @@ function tainacanEnqueueScripts(){
wp_enqueue_script('popper', get_template_directory_uri() . '/assets/vendor/bootstrap/js/popper.min.js', '', '', true); wp_enqueue_script('popper', get_template_directory_uri() . '/assets/vendor/bootstrap/js/popper.min.js', '', '', true);
//JS Bootstrap 4 //JS Bootstrap 4
wp_enqueue_script('bootstrap', get_template_directory_uri() . '/assets/vendor/bootstrap/js/bootstrap.min.js', array('jquery'), '4.0.0', true); wp_enqueue_script('bootstrap', get_template_directory_uri() . '/assets/vendor/bootstrap/js/bootstrap.min.js', array('jquery'), '4.0.0', true);
//Javascript for Tainacan
wp_enqueue_script('jsTainacan', get_template_directory_uri() . '/assets/js/js.js', '', '', true);
} }
add_action('wp_enqueue_scripts', 'tainacanEnqueueScripts'); add_action('wp_enqueue_scripts', 'tainacanEnqueueScripts');

23
src/single-colecoes.php
View File

@ -52,41 +52,42 @@
</div> </div>
<div class="row p-5"> <div class="row p-5">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000"> <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-inner row w-100 mx-auto p-5" role="listbox">
<div class="carousel-item col-md-4 active"> <div class="carousel-item col-md-4 p-5 active">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
</div> </div>
<div class="carousel-item col-md-4"> <div class="carousel-item col-md-4 p-5">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
</div> </div>
<div class="carousel-item col-md-4"> <div class="carousel-item col-md-4 p-5">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
</div> </div>
<div class="carousel-item col-md-4"> <div class="carousel-item col-md-4 p-5">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
</div> </div>
<div class="carousel-item col-md-4"> <div class="carousel-item col-md-4 p-5">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
</div> </div>
<div class="carousel-item col-md-4"> <div class="carousel-item col-md-4 p-5">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
</div> </div>
<div class="carousel-item col-md-4"> <div class="carousel-item col-md-4 p-5">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
</div> </div>
<div class="carousel-item col-md-4"> <div class="carousel-item col-md-4 p-5">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7"> <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
</div> </div>
</div> </div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev"> <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<i class="material-icons text-scooter">chevron_left</i> <i class="material-icons">chevron_left</i>
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
</a> </a>
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next"> <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
<i class="material-icons text-scooter">chevron_right</i> <i class="material-icons">chevron_right</i>
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
</a> </a>
</div> </div>
</div> </div>
</section> </section>
<section class="tainacan-gallery-itens p-2"> <section class="tainacan-gallery-itens p-2">