CSS - 如何在滑块外部使用12个列行的滑块滑块箭头

时间：2017-01-25 15:48:48

标签： html css twitter-bootstrap swiper

我正在使用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();
});

9 个答案:

答案 0 :(得分：3)

我只是为我当前的项目之一做的。 您只需更改导航HTML按钮的位置，然后将其放在func stompClientDidConnect(client: StompClientLib!) { socketClient.subscribe(destination: topic) } 之外。为了从库中获得更好的方法和行为，请向它们添加一个新类，然后更改JavaScript调用中的元素。

示例：

swiper-container

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

答案 1 :(得分：1)

＆＃13;
＆＃13; 
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
            }
        }
    });
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

这适用于我，它与旧答案相同，但也许它看起来更好：）

答案 2 :(得分：1)

嗨，我也遇到了这个问题。
但是解决这个问题很容易。
请注意以下代码 

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

您制作一个div并为其指定样式position:relative，然后将按钮div扔出类swiper-container，然后将样式扔给css .slider-main{padding: 0 60px}。问题很容易解决。

WordPress Theme Development and Plugin

答案 3 :(得分：0)

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

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

答案 4 :(得分：0)

这是一个常规解决方案。要将箭头移到容器外部，您需要首先从.swiper-container中删除箭头div。制作另一个更大的带有.swiper-container和移动箭头的容器。给此较大的容器位置：相对，以参考具有位置：绝对的箭头。确保将.swiper-container宽度更改为小于100％（例如90％95％）的值，以避免与箭头重叠。如果您希望使滑动容器的宽度与整个页面宽度的宽度相同，则将-ve边距赋予较大的容器。

答案 5 :(得分：0)

好的，我有另一种方法， 伙计们建议的内容不适用于页面上的多个滑块。 因此，我添加了另外两个箭头，它们将触发真正的箭头。

雨刷器有： { 导航：{ nextEl：'.xnext'， 上一个：'.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');});

答案 6 :(得分：0)

如果slidesPerView = 1，则此方法有效

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

.swiper-slide {
    visibility: hidden;
}

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

答案 7 :(得分：0)

如果使用多个滑动器，则需要向滑动器容器和分页箭头添加不同的类名称。然后创建新的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 },
                },
            });
        });
`

答案 8 :(得分：-1)

今天偶然发现了这个问题，这是我解决它的尝试。基本上它只需要您将 .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,
            },
        });
    });
相关问题
最新问题