Slick Carousel with stays vertical and is not responsive/clicking? - twig

Question

So, I have a project that I've taken on that already has a slick carousel, not familiar with drupal or bootstrap, but from what I can see the current follows documentation. The carousel is triggered upon the breakpoint (as confirmed by the carousel arrows that appear at the breakpoint), However the carousel is not horizontal and the arrows do not work. Please advise.
app.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;
}
}
}
}

Answer 1

Not sure about the 'not horizontal' issue, but i recommend you to remove all css and run slick carousel in a sandbox. When done, add your CSS code.
CSS overrides can be painfull with slick.
About the arrows, i guess you need to register as string HTML markup. Like this:
prevArrow:'<div> my custom prev arrow </div>'