Estoy tratando de crear un control deslizante vertical simple que muestre solo 1 elemento usando 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>¿Por qué no funciona?
Gracias
De acuerdo con su documento , debe usar la pagination para activar el control deslizante vertical.
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>