我正在使用 swiper slider并希望在 slider 之外有导航箭头。我基本上想做的和在 airbnb 上看起来一样站点,其中带有图像的 slider 占据了整个 12 列行,但箭头位于其外部。 我正在使用 bootstrap twitter css 框架,我尝试了各种方法,但没有任何效果,不知道如何实现?
CSS 是这样的:
.swiper-container {
margin-top: 50px;
position: relative;
}
.arrow-left {
position: absolute;
top: 50%;
left: 0;
}
.arrow-right {
position: absolute;
top: 50%;
right: 0;
}
HTML 看起来像这样:
<div class="row swiper-container">
<div class="arrow-left">
<i class="ion-chevron-left"></i>
</div>
<div class="col-md-12 swiper-wrapper">
@foreach($videos as $video)
<div class="swiper-slide video-card">
<header class="card__thumb">
<a href="/player/{{ $player->id }}/video/{{ $video->id }}"><img src="{{ $video->getThumbnail() }}"/></a>
</header>
<div class="card__body">
<div class="card__category">
</div>
<small>
{{ $video->created_at->diffForHumans() }}
</small>
<span class="video-title">
<p>
@if($video->title != '')
{{ $video->title }} <i class="ion-arrow-right-c"></i>
@else
Untitled
@endif
</p>
</span>
</div>
</div>
@endforeach
</div>
<div class="arrow-right">
<i class="ion-chevron-right"></i>
</div>
</div>
这是脚本:
var carousel = function carousel() {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
nextButton: '.arrow-left',
prevButton: '.arrow-right',
slidesPerView: 4,
simulateTouch: false,
spaceBetween: 15,
breakpoints: {
1181: {
slidesPerView: 4
},
1180: {
slidesPerView: 3
},
1020: {
slidesPerView: 2
},
700: {
slidesPerView: 1
}
}
});
};
$(document).ready(function () {
carousel();
});
最佳答案
我刚刚为我当前的一个元素做了这个。
您只需更改导航 HTML 按钮的位置并将它们放在 swiper-container
之外。为了从库中获得更好的方法和行为,向它们添加一个新类,并更改 JavaScript 调用中的元素。
例子:
<div class="swiper-container">
<div class="swiper-slides"></div>
</div>
<div class="swiper-button-prev-unique"></div>
<div class="swiper-button-next-unique"></div>
let carousel = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next-unique',
prevEl: '.swiper-button-prev-unique'
}
});
效果非常好,您可以使用 CSS 轻松地将箭头放在包装器之外。
关于html - CSS - 如何在占用 12 列行的 slider 之外设置滑动 slider 箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41855877/