CODEWITHSUNDEEP
javascriptswiper.js
odedta
odedta

Reputation: 2478

Swiper JS vertical slider showing only 1 row of items

I'm trying to create a simple vertical slider that shows only 1 item using Swiper JS V8

jQuery(document).ready(function ($) {
  var termsSwiper;
  let swiperSettings = {
    direction: "vertical",
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    }
  };

  termsSwiper = new Swiper(".swiper", swiperSettings);
});
<link href="https://unpkg.com/swiper@8/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swiper term-swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <a data-parent_term_id="205" data-child_term_id="206">בין אדם לחברו</a>
    </div>
    <div class="swiper-slide">
      <a data-parent_term_id="205" data-child_term_id="244">זהות אישית</a>
    </div>
    <div class="swiper-slide">
      <a data-parent_term_id="205" data-child_term_id="270">חברה וקהילה</a>
    </div>
    <div class="swiper-slide">
      <a data-parent_term_id="205" data-child_term_id="208">מדינת ישראל</a>
    </div>
    <div class="swiper-slide">
      <a data-parent_term_id="205" data-child_term_id="245">עמיות יהודית</a>
    </div>
    <div class="swiper-slide">
      <a data-parent_term_id="205" data-child_term_id="285">קיימות</a>
    </div>
    <div class="swiper-slide">
      <a data-parent_term_id="205" data-child_term_id="221">קיימות וסביבה</a>
    </div>
    <div class="swiper-slide">
      <a data-parent_term_id=" 205" data-child_term_id="276">תפילה</a>
    </div>
  </div>

  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

Why isn't it working?

Thanks

Upvotes: 0

Views: 1183

Answers (1)

Sifat Haque
Sifat Haque

Reputation: 6057

According to their doc you need to use the pagination to activate the vertical slider.

pagination: {
  el: ".swiper-pagination",
  clickable: true,
},


jQuery(document).ready(function ($) {
  var termsSwiper;
  let swiperSettings = {
    direction: "vertical",
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  };

  termsSwiper = new Swiper(".swiper", swiperSettings);
});
.swiper-wrapper {
  max-height: 400px;
}
<link href="https://unpkg.com/swiper@8/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swiper term-swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <a data-parent_term_id="205" data-child_term_id="206">בין אדם לחברו</a>
    </div>
    <div class="swiper-slide">
      <a data-parent_term_id="205" data-child_term_id="244">זהות אישית</a>
    </div>
    <div class="swiper-slide">
      <a data-parent_term_id="205" data-child_term_id="270">חברה וקהילה</a>
    </div>
    <div class="swiper-slide">
      <a data-parent_term_id="205" data-child_term_id="208">מדינת ישראל</a>
    </div>
    <div class="swiper-slide">
      <a data-parent_term_id="205" data-child_term_id="245">עמיות יהודית</a>
    </div>
    <div class="swiper-slide">
      <a data-parent_term_id="205" data-child_term_id="285">קיימות</a>
    </div>
    <div class="swiper-slide">
      <a data-parent_term_id="205" data-child_term_id="221">קיימות וסביבה</a>
    </div>
    <div class="swiper-slide">
      <a data-parent_term_id=" 205" data-child_term_id="276">תפילה</a>
    </div>
  </div>
  <div class="swiper-pagination"></div>
</div>

Upvotes: 1

Related Questions