web-dev-qa-db-ja.com

CSS-12列の行を占めるスライダーの外側にスワイパースライダー矢印を表示する方法

スワイパースライダー を使用していますが、スライダーの外側にナビゲーション矢印を配置したいと考えています。基本的に私がやりたいのは airbnb サイトの場合と同じです。画像付きのスライダーは12列の行全体を占めますが、矢印はその外にあります。私はbootstrap Twitter css frameworkを使用しています。さまざまなことを試しましたが、何も機能せず、これを達成する方法がわかりませんか？

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();
});
htmlcsstwitter-bootstrapswiper
8
Leff

私は現在のプロジェクトの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を使用すると、矢印をラッパーの外側に簡単に配置できます。

10
Ezequiel Alba
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>

これは私にとってはうまくいきます、それは古い答えと同じですが、多分それは良く見えます:)

1
unforgiven

これは一般的な解決策です。矢印をコンテナーの外に移動するには、最初に.swiper-containerから矢印divを削除する必要があります。 .swiper-containerと移動した矢印を持つ別の大きなコンテナーを作成します。このより大きなコンテナの位置：相対を、位置：絶対の矢印への参照として与えます。矢印と重ならないように、.swiper-containerの幅が100％未満の値（90％95％など）に変更されていることを確認してください。スワイパーコンテナーの幅をページ全体の幅と同じにしたい場合は、大きなコンテナーに-veマージンを与えます。

1
Jay Modh

これは、それを達成する方法の基本的な例です。あなたは近くにいた。スニペット内に表示されるようにコードを少し変更しました。

$(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>
0
Serg Chernata

わかりました、私は別の方法を持っていました、ページの複数のスライダーで動作しない人が提案するもの。そこで、さらに2つの矢印を追加しました。これにより、実際の矢印がトリガーされます。

スワイパーは次のとおりでした：{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');});
0
Massalha Shady

こんにちは私もこの問題がありました。
しかし、この問題を解決するのは非常に簡単です。
次のコードに注意してください

<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テーマ開発とプラグイン

0
Mahdi Haghighi