Итак, у меня есть проект, который я взял, у которого уже есть гладкая карусель, не знакомая с drupal или bootstrap, но из того, что я вижу, следует следующая документация. Карусель запускается в точке прерывания (что подтверждается стрелками карусели, появляющимися в точке прерывания), однако карусель не горизонтальна и стрелки не работают. Пожалуйста, сообщите.
приложение. js
explore: function explore() {
$('.explore-carousel').slick({
autoplay:true,
mobileFirst:true,
infinite: false,
dots: false,
slidesToShow: 2,
slidesToScroll: 1,
prevArrow: $('.explore-prev'),
nextArrow: $('.explore-next'),
responsive: [{
breakpoint: 500,
settings: {
slidesToShow: 1
}
}]
});
},
exploreResize: function exploreResize(carousel) {
// https://github.com/kenwheeler/slick/issues/3282
$(window).on('load resize orientationchange', function () {
$(carousel).each(function () {
var $carousel = $(this);
if ($(window).width() > 768) {
if ($carousel.hasClass('slick-initialized')) {
$carousel.slick('unslick');
}
} else {
if (!$carousel.hasClass('slick-initialized')) {
CB.carousel.explore(carousel);
}
}
});
});
},
explore.twig
<section class="explore">
<a class="explore-prev"><img src="../lib/img/icon-carousel-arrow-left.svg"></a>
<a class="explore-next"><img src="../lib/img/icon-carousel-arrow-right.svg"></a>
<div class="explore-carousel grid-x grid-container align-center">
{% for block in entry.exploreMatrix.all() %}
{% set image = block.icon.one() %}
{% set link = block.linkUrl.one() %}
{% set length = loop.length %}
{% set col = 12/length %}
<div class="cell small-12 large-{{ col ? col : 4 }}">
<a class="explore--link" href={{ link.url }}>
<div class="outline">
<img class="explore-image" src="{{ image ? image.url : '' }}">
<div class="hover--container">
<div class="hr"></div>
<h3 class="hover--text">{{ block.linkText }}<span class="button-icon"> {% include 'includes/svg/cta-arrow' %}</span></h3>
</div>
</div>
</a>
</div>
{% endfor %}
</section>
css
.explore {
margin-top: 80px;
@include mq($small) {
margin-top: 0;
}
position: relative;
.explore-prev {
@extend .PrevArrow;
}
.explore-next {
@extend .NextArrow;
}
.explore-carousel {
display: flex;
@include h-padding(rem-calc(50));
// padding-left: rem-calc(50);
// padding-right: rem-calc(50);
@include mq($medium) {
// padding-left: initial;
// padding-right: initial;
@include h-padding(initial);
}
.explore--link {
width: 100%;
}
.outline {
position: relative;
width: rem-calc(250);
border-radius:50%;
transition: all .3s;
margin: 0 auto;
@include spacer(50px, 50px);
&.hover {
background: $offWhite;
}
@include mq($medium) {
width: rem-calc(300);
}
.hover--container {
transition: all .3s;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 5%;
text-align: center;
opacity: 0;
.hover--text {
margin-top:rem-calc(10);
font-size: rem-calc(22);
color: $clay;
letter-spacing: -1px;
}
}
.explore--image {
width: rem-calc(250);
margin: 0 auto;
@include mq($medium) {
width: rem-calc(300);
}
}
}
.hover {
.hover--container {
transition: all .3s;
opacity: 1;
}
}
}
}