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

Question

我正在使用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看起来像这样：

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

Answer 1

对于所有我的 React 伙伴：

import { Swiper as SwiperClass } from 'swiper/types';
import { Swiper, SwiperSlide } from 'swiper/react';

 export const MySwiper = () => {
   const [swiperRef, setSwiperRef] = useState<SwiperClass>();
   
   const theSlides = useMemo(()=> ['slide one', 'slide two'], [])

   const handlePrevious = useCallback(() => {
     swiperRef?.slidePrev();
   }, [swiperRef]);

   const handleNext = useCallback(() => {
     swiperRef?.slideNext();
   }, [swiperRef]);

   return (
     <div>
       <div>
         <button onClick={handlePrevious }>
             previous
         </button>
       </div>
       <Swiper
         onSwiper={setSwiperRef}
       >
         {theSlides.map((slide) => (<SwiperSlide key={slide}>{slide}</SwiperSlide>)
       </Swiper>
       <div>
         <button onClick={handleNext}>
           Next
         </button>
       </div>
     </div>
   );
 };

Answer 2

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

Answer 3

如果您使用多个 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 },
                },
            });
        });
`

Answer 4

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

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