iDangerous салфетка не работает

Question

Я пытаюсь поставить следующую/предыдущую кнопку на свой swiper, и я не могу заставить ее работать. Я пробовал разные вещи и ее просто не работал, может кто-то потушить, почему это не за работой. Я использую jquery один не zepto.

Пробовал этот.

<span class="button-next">Next button</span> 
<span class="button-prev">Previous button</span> 
<script> 
$(function(){ 
    var mySwiper = $('.swiper-container').swiper(); 
    $('.button-next').click(function(){mySwiper.swipeNext()}) 
    $('.button-prev').click(function(){mySwiper.swipePrev()}) 

}) 
</script> 

Вот как я инициализирую свой салфетки, который отлично работает.

var swiper1 = new Swiper('.swiper-container.newscol-swiper',{ 
     slideClass: 'post-item', 
      slidesPerView: 4, 
      slidesPerViewFit: false, 
      loop: true, 
      centeredSlides: true, 
      autoplay: 5000, 
      speed: 400, 
      calculateHeight: true, 
      roundLength: true, 
      mode: 'horizontal' 
      }) 

Answer 1

Вы пробовали использовать следующее? (Убедитесь, что вы используете последнюю версию Swiper)

var swiper = new Swiper('.swiper-container', { 
 
    pagination: '.swiper-pagination', 
 
    paginationClickable: '.swiper-pagination', 
 
    nextButton: '.swiper-button-next', 
 
    prevButton: '.swiper-button-prev', 
 
    spaceBetween: 30 
 
});

html, 
 
body { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 
body { 
 
    background: #eee; 
 
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
 
    font-size: 14px; 
 
    color: #000; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.swiper-container { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.swiper-slide { 
 
    text-align: center; 
 
    font-size: 18px; 
 
    background: #fff; 
 
    /* Center slide text vertically */ 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
}

<link href="https://rawgit.com/nolimits4web/Swiper/master/dist/css/swiper.min.css" rel="stylesheet" /> 
 
<script src="https://rawgit.com/nolimits4web/Swiper/master/dist/js/swiper.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="swiper-container"> 
 
    <div class="swiper-wrapper"> 
 
    <div class="swiper-slide">Slide 1</div> 
 
    <div class="swiper-slide">Slide 2</div> 
 
    <div class="swiper-slide">Slide 3</div> 
 
    <div class="swiper-slide">Slide 4</div> 
 
    <div class="swiper-slide">Slide 5</div> 
 
    <div class="swiper-slide">Slide 6</div> 
 
    <div class="swiper-slide">Slide 7</div> 
 
    <div class="swiper-slide">Slide 8</div> 
 
    <div class="swiper-slide">Slide 9</div> 
 
    <div class="swiper-slide">Slide 10</div> 
 
    </div> 
 
    <!-- Add Pagination --> 
 
    <div class="swiper-pagination"></div> 
 
    <!-- Add Arrows --> 
 
    <div class="swiper-button-next"></div> 
 
    <div class="swiper-button-prev"></div> 
 
</div>

В соответствии с поручением здесь: https://github.com/nolimits4web/Swiper/blob/master/demos/14-nav-arrows.html