changed gallery, added slider and preview

This commit is contained in:
khashashin 2017-09-11 15:01:26 +02:00
parent 24ab350f71
commit bf88bdeeb7
5 changed files with 44 additions and 13 deletions

View file

@ -13,3 +13,14 @@
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}
</div> </div>
<div class="carousel-inner slider-nav">
{% for block in page.gallery %}
{% for val in block.value %}
<div class="item">
{% image val.image fill-700x400 as entry_thumb %}
{% image val.image original as entry_photo %}
<image data-src="{{ entry_photo.url }}" style="background-image:url({{ entry_thumb.url }})">
</div>
{% endfor %}
{% endfor %}
</div>

View file

@ -14,3 +14,16 @@ body {
@include mid-screen($screen-sm-min, $screen-md-min) { @include mid-screen($screen-sm-min, $screen-md-min) {
body { margin-top: 200px; } body { margin-top: 200px; }
} }
$slider-nav: 200px;
.slider-nav {
padding-bottom: 2.5em;
.item {
height: $slider-nav;
img {
width: 90%;
height: $slider-nav;
}
}
}

View file

@ -193,9 +193,10 @@ $banner-height: 700px;
} }
// Carousel gallery // Carousel gallery
$gallery-height: 400px;
$gallery-height: 550px;
.carousel-inner { .carousel-inner {
padding-bottom: 2.5em; padding-bottom: 0;
.item { .item {
height: $gallery-height; height: $gallery-height;

View file

@ -6238,7 +6238,7 @@ button.close {
.carousel { .carousel {
position: relative; position: relative;
} }
.carousel-inner { /*.carousel-inner {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
@ -6313,7 +6313,7 @@ button.close {
} }
.carousel-inner > .active.right { .carousel-inner > .active.right {
left: 100%; left: 100%;
} }*/
.carousel-control { .carousel-control {
position: absolute; position: absolute;
top: 0; top: 0;

View file

@ -22,14 +22,11 @@ $(document).ready(function() {
} else if ($('.carousel-gallery').length) { } else if ($('.carousel-gallery').length) {
// Load gallery component // Load gallery component
$('.carousel-gallery').slick({ $('.carousel-gallery').slick({
autoplay: false,
dots: false,
fade: false,
infinite: true,
slidesToShow: 1, slidesToShow: 1,
centerMode: true, slidesToScroll: 1,
prevArrow: '<span class="arrow left glyphicon glyphicon-chevron-left" aria-hidden="true">Previous</span>', arrows: false,
nextArrow: '<span class="arrow right glyphicon glyphicon-chevron-right" aria-hidden="true">Next</span>', fade: true,
asNavFor: '.slider-nav'
}).slickLightbox({ }).slickLightbox({
src: 'data-src', src: 'data-src',
itemSelector: 'img', itemSelector: 'img',
@ -37,7 +34,16 @@ $(document).ready(function() {
// useHistoryApi: 'true' // useHistoryApi: 'true'
}); });
} }
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.carousel-gallery',
dots: true,
centerMode: true,
focusOnSelect: true,
prevArrow: '<span class="arrow left glyphicon glyphicon-chevron-left" aria-hidden="true">Previous</span>',
nextArrow: '<span class="arrow right glyphicon glyphicon-chevron-right" aria-hidden="true">Next</span>',
});
// Pastel colors on live news // Pastel colors on live news