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