英文:
Slick Carousel with stays vertical and is not responsive/clicking?
问题
以下是您提供的内容的翻译:
所以,我接了一个项目,其中已经有一个漂亮的走马灯,对Drupal或Bootstrap不太熟悉,但从我所看到的文档来看,当前的跟随文档操作。走马灯是在断点上触发的(如在断点上确认的那样,走马灯箭头会出现在断点上),但走马灯不是水平的,箭头不起作用。请提供建议。
**app.js**
```javascript
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 %}
</div>
</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;
}
}
}
}
希望这有助于您理解代码和问题。如果需要进一步的帮助,请告诉我。
英文:
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;
}
}
}
}
答案1
得分: 1
关于'不水平'问题我不太确定,但我建议您删除所有CSS并在沙箱中运行slick轮播。完成后,添加您的CSS代码。
使用slick时,CSS覆盖可能会很麻烦。
关于箭头,我猜您需要将其注册为字符串HTML标记。像这样:
prevArrow: '
'
英文:
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>'
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论