CSS - 如何在占用 12 列行的滑块之外添加滑动滑块箭头答案

【问题标题】：CSS - How to have swiper slider arrows outside of slider that takes up 12 column rowCSS - 如何在占用 12 列行的滑块之外添加滑动滑块箭头
【发布时间】：2017-01-25 15:48:48
【问题描述】：

我正在使用swiper slider 并希望在滑块之外有导航箭头。我基本上想做的与airbnb 网站上的一样，其中带有图像的滑块占据了整个 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();
});

【问题讨论】：

好吧，js 为我打破了它的演示，但基本上你想要做的是使用 position: absolute 然后使用 right: (不管你想要多少像素) 和 left: (不管多少你想要的像素）
是的，我这样做了，但这不起作用，因为箭头没有像当时那样定位
没有滑动滑块在线文件，我无法复制这个
箭头现在在哪里？
左边的位置正确，右边的我看不到

标签： html css twitter-bootstrap swiper

【解决方案1】：

我只是为我当前的一个项目做了这个。您只需更改导航 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 轻松地将箭头放在包装器之外。

【讨论】：

试图找到解决这个问题的几个小时，这对我有用。非常感谢。
@CharlotteOswald 没问题！
只要您的页面上只有 1 个轮播，就可以正常工作。
@ecairol 不是。您可以设置更多滑块，并为每个滑块的不同箭头赋予它们独特的类。不难测试。
优秀。太简单了！

【解决方案2】：

如果您使用多个 swiper，那么您需要为 swiper-cotainer 和分页箭头添加不同的类名。然后创建新的 Swiper 并将每个箭头绑定到本地 swiper。

let arr_next = $('.template-next') //your arrows class name
let arr_prev = $('.template-prev') //your arrows class name
    
$('.swiper-container--template').each(function (index, element) {
            
            $(this).addClass('swiper' + index);
            arr_next[index].classList.add('template-next' + index);
            arr_prev[index].classList.add('template-prev' + index);

            new Swiper('.swiper' + index, {
                slidesPerView: 2,
                navigation: {
                    nextEl: '.template-next'+index,
                    prevEl: '.template-prev'+index
                },
                slidesPerView: 2,
                //spaceBetween: 100,
                loop: true,
                breakpoints: {
                    961: { slidesPerView: 2 },
                    740: { slidesPerView: 1 },
                },
            });
        });
`

【讨论】：

【解决方案3】：

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>

这对我有用，它与旧答案相同，但也许看起来更好:)

【讨论】：

【解决方案4】：

这是一个通用的解决方案。要将箭头移出容器，您需要先从 .swiper-container 中删除箭头 div。

制作另一个更大的容器，其中包含.swiper-container 和您移动的箭头。给这个更大的容器position: relative 作为对具有位置的箭头的引用：绝对。

确保将 .swiper-container 宽度更改为小于 100% 的值（例如 90% 95%）以避免与箭头重叠。

如果您想保持.swiper-container 的宽度与整个页面宽度相同，则将 -ve 边距赋予更大的容器。

【讨论】：

【解决方案5】：

如果 slidesPerView = 1 则有效：

.swiper-container {
    padding-left: 50px;
    padding-right: 50px;
}

.swiper-slide {
    visibility: hidden;
}

.swiper-slide.swiper-slide-active {
    visibility: visible;
}

【讨论】：

【解决方案6】：

把这个放在滑动块下面：

.section { 
  .swiper-button-prev {
    left: -20px;
  }
  .swiper-button-next {
    right: -20px;
  }
}

<div class="section">

  <div class="swiper">
    <ul class="swiper-wrapper">
      <li class="swiper-slide">
      </li> 
    </ul>
  </div>
  
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div> 
    
</div>

【讨论】：

【解决方案7】：

这是如何实现它的基本示例。你很亲密。我稍微修改了代码，使其在 sn-p 中可见。

$(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>

【讨论】：

这行得通，但我希望容器为 12 列的 100% 宽度，以便它与页面上的其他内容以及容器外部的箭头对齐。我该怎么做？
设置为 100
我不知道为什么，但是我看不到箭头。
它是否存在于我可以调试的地方？
可能是因为.swiper-container 有overflow: hidden？

【解决方案8】：

好的，我有另一种方法，这些家伙的建议不适用于页面上的多个滑块。所以，我又添加了两个箭头，这将触发真正的箭头。

刷卡者有： { 导航： { 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');});

【讨论】：

【解决方案9】：

今天偶然发现了这个问题，这是我解决它的尝试。基本上它只需要你将.swiper-container 包装在额外的.swiper-container-wrapper 中，因为Swiper 允许传递对HTMLElement 的引用而不是选择器字符串。而且您还可以保留类名，导航元素或容器不需要离散类。此时，两个导航元素都放置在.swiper-container-wrapper 中，作为.swiper-container 的同级元素。

    $('.swiper-container-wrapper').each(function (index, element) {
        var swiperContainer = $(element).children('.swiper-container').get(0);
        var nextEl          = $(element).children('.swiper-button-next').get(0);
        var prevEl          = $(element).children('.swiper-button-prev').get(0);

        new Swiper(swiperContainer, {
            navigation: {
                nextEl: nextEl,
                prevEl: prevEl,
            },
        });
    });

【讨论】：