CSS-如何在占据12列行的滑块外部设置滑动箭头

我正在使用swiper滑块，并希望在滑块之外具有导航箭头。我基本上想做的和在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看起来像这样：

       

          

            
          
          

            @foreach($videos as $video)
              

                

                  
                

                

                  


                  
                  
                    {{ $video->created_at->diffForHumans() }}
                  
                  
                    

                      @if($video->title != '')
                        {{ $video->title }}  
                      @else
                        Untitled
                      @endif
                    
                  
                
              
            @endforeach
          
          

            
          
        

这是脚本：

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();
});

小智.. 8

我只是为我当前的项目之一做的。您只需更改导航HTML按钮的位置，然后将其置于之外即可swiper-container。为了从库中获得更好的方法和行为，请向它们添加一个新类，然后更改JavaScript调用中的元素。

例：

 





let carousel = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next-unique',
    prevEl: '.swiper-button-prev-unique'
  }
});

效果很好，您可以使用CSS轻松地将箭头放到包装纸外面。

我只是为我当前的项目之一做的。您只需更改导航HTML按钮的位置，然后将其置于之外即可swiper-container。为了从库中获得更好的方法和行为，请向它们添加一个新类，然后更改JavaScript调用中的元素。

例：

 





let carousel = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next-unique',
    prevEl: '.swiper-button-prev-unique'
  }
});

效果很好，您可以使用CSS轻松地将箭头放到包装纸外面。