Html CSS - 如何在滑块外放置 12 列行的 swiper 滑块箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41855877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - How to have swiper slider arrows outside of slider that takes up 12 column row
提问by Leff
I am using swiper sliderand would like to have navigation arrows outside of the slider. What I would basically like to do is the same as it looks like on airbnbsite, where slider with images takes up whole 12 column row, but arrows are outside of it. I am using bootstrap twitter css framework and I have tried various things but nothing worked and don't know how to achieve this?
我正在使用swiper 滑块，并希望在滑块外有导航箭头。我想要做的基本上和在airbnb网站上看起来一样，其中带有图像的滑块占据整个 12 列行，但箭头在它之外。我正在使用 bootstrap twitter css 框架，我尝试了各种方法，但没有任何效果，也不知道如何实现？
The css is this:
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 looks like this:
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>
And this is the script:
这是脚本：
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();
});
回答by Ezequiel Alba
I just did this for one of my current projects.
You just have to change the location of the navigation HTML buttons and put them outside the swiper-container. For a better approach and behavior from the library, add a new class to them, and change the element in the JavaScript call.
我只是为我当前的一个项目做了这个。您只需更改导航 HTML 按钮的位置并将它们放在swiper-container. 为了从库中获得更好的方法和行为，向它们添加一个新类，并更改 JavaScript 调用中的元素。
Example:
例子：
<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'
}
});
That worked perfect, and you can put your arrows outside the wrapper with ease with CSS.
效果很好，您可以使用 CSS 轻松地将箭头放在包装器之外。
回答by unforgiven
var swiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 3,
spaceBetween: 10,
autoplay: 3500,
autoplayDisableOnInteraction: false,
loop: true,
breakpoints: {
1024: {
slidesPerView: 3,
spaceBetween: 40
},
768: {
slidesPerView: 3,
spaceBetween: 30
},
640: {
slidesPerView: 2,
spaceBetween: 20
},
320: {
slidesPerView: 1,
spaceBetween: 10
}
}
});.container{max-width: 600px;margin: 0 auto;}
.swiper_wrap{padding:0px 50px;height:100%;width: 100%;position: relative;display: block;text-align: left;}
.swiper-button-next{
margin-top: 0px;
position: absolute;
top: 50%;
right: -40px;
width: 45px;
height: 45px;
transform: translateY(-50%);
}
.swiper-button-prev{
position: absolute;
top: 50%;
left: -40px;
width: 45px;
height: 45px;
transform: translateY(-50%);
margin-top: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet"/>
<div class="container">
<div class="swiper_wrap">
<div class="slider-wrapper">
<div class="swiper-button-prev"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div>
<div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div><div class="swiper-slide">
<a href="#">
<img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
</a>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<script src="http://www.jakse.si/test/jakse/taxi/js/swiper.min.js"></script>This works for me, it is the same like older answer, but maybe it looks better :)
这对我有用，它与旧答案相同，但也许看起来更好:)
回答by Jay Modh
This is a general solution. To move your arrows outside the container you'll need to first remove the arrow divs from .swiper-container.
这是一个通用的解决方案。要将箭头移到容器外，您需要先从 中删除箭头 div .swiper-container。
Make another bigger container that has .swiper-containerand your moved arrows. Give this bigger container position: relativeas a reference to arrows that have position: absolute.
制作另一个更大的容器，上面有.swiper-container你移动的箭头。将这个更大的容器position: relative作为对具有 position: absolute 的箭头的引用。
Make sure that the .swiper-containerwidth is changed to a value smaller than 100% (e.g. 90% 95%) to avoid overlapping with the arrows.
确保将.swiper-container宽度更改为小于 100% 的值（例如 90% 95%）以避免与箭头重叠。
If you like to keep the .swiper-containerwidth same as that of the entire page width then give -ve margin to the bigger container.
如果您希望保持与.swiper-container整个页面宽度相同的宽度，则为更大的容器提供 -ve 边距。
回答by Mahdi Haghighi
Hi i had this problem too.
But it is very easy to solve this problem.
Note the following codes
嗨，我也有这个问题。
但是解决这个问题非常容易。
注意以下代码
<div class="slider-main" style="position:relative">
<div class="swiper-container slider_service">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="assets/images/OneServices_slider_2.jpg"></div>
<div class="swiper-slide"><img src="assets/images/OneServices_slider.png"></div>
<div class="swiper-slide"><img src="assets/images/OneServices_slider.png"></div>
<div class="swiper-slide"><img src="assets/images/OneServices_slider.png"></div>
<div class="swiper-slide"><img src="assets/images/OneServices_slider.png"></div>
<div class="swiper-slide"><img src="assets/images/OneServices_slider.png"></div>
<div class="swiper-slide"><img src="assets/images/OneServices_slider.png"></div>
<div class="swiper-slide"><img src="assets/images/OneServices_slider.png"></div>
<div class="swiper-slide"><img src="assets/images/OneServices_slider.png"></div>
<div class="swiper-slide"><img src="assets/images/OneServices_slider.png"></div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
You make a div and give it a style position:relativeand by throwing button div out of the class swiper-containerand style to css .slider-main{padding: 0 60px}The problem is easily solved.
WordPress Theme Development and Plugin
你制作一个div并给它一个样式position:relative，通过将按钮div从类swiper-container和样式中扔到css中.slider-main{padding: 0 60px}，问题就很容易解决了。
WordPress 主题开发和插件
回答by Massalha Shady
Ok, I had another method, What the guys suggesting will not work with multiple sliders on page. So, I added another two arrows, which will trigger the real arrows.
好的，我有另一种方法，这些人的建议不适用于页面上的多个滑块。所以，我又添加了两个箭头，这将触发真正的箭头。
the swiper had: { navigation: { nextEl: '.xnext', prevEl: '.xprev', } }
swiper 有：{ navigation: { nextEl: '.xnext', prevEl: '.xprev', } }
$('.swiper-button-next').click(
function(e){
$(this).parents('.swiper-container').find('.xnext').trigger('click');
});
$('.swiper-button-prev').click(function(e){$(this).parents('.swiper-container').find('.xprev').trigger('click');});
回答by Serg Chernata
This is the basic example of how to achieve it. You were close. I slightly modified the code to make it visible within the snippet.
这是如何实现它的基本示例。你很接近。我稍微修改了代码以使其在代码段中可见。
$(document).ready(function () {
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
}
}
});
};
carousel();
});.row.swiper-container {
margin-top: 50px;
position: relative;
width: 70%;
margin: 0 auto;
}
.arrow-left {
position: absolute;
background: gray;
top: 50%;
left: -40px;
width: 20px;
height: 20px;
transform: translateY(-50%);
}
.arrow-right {
position: absolute;
background: gray;
top: 50%;
right: -40px;
width: 20px;
height: 20px;
transform: translateY(-50%);
}
.swiper-wrapper {
margin: 0 auto;
height: 200px;
background: #f00;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script>
<div class="row swiper-container">
<div class="arrow-left">
<i class="ion-chevron-left"></i>
</div>
<div class="col-md-12 swiper-wrapper">
<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>
</small>
<span class="video-title">
<p>
</p>
</span>
</div>
</div>
</div>
<div class="arrow-right">
<i class="ion-chevron-right"></i>
</div>
</div>