All geek questions in one place

Swiper plugin causes selection can not pop-up list

I have a desktop application using swiper for a slide page, but when I put the select tag on the slide page, the select tag cannot appear in the Drop-Drown box, did anyone have a problem? Thanks in advance! here is a demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="styles/swiper/idangerous.swiper.css"/> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script> <!-- ็ฟป้กต ไพ่ต–jquery --> <script type="text/javascript" src="js/swiper/idangerous.swiper-1.9.js"></script> <title>swiper demo</title> <script type="text/javascript"> $(function(){ $('.swiper-container, .swiper-slide').css({ height: ($(window).height()) + 'px', width: '100%' }); var mySwiper = $('.swiper-container').swiper({ //Your options here: mode:'horizontal', loop: false, keyboardControl: true, // mousewheelControl: true, onSlideChangeStart: function(swiper){ pageCurrentNum = swiper.realIndex; $('#currentPage').text(pageCurrentNum + 1); gridster = null; gridster = $('#gridster' + pageCurrentNum +'>ul').gridster(gridsterOpts).data('gridster'); if(!confingInfo.isDebug){ gridster.disable(); } }, }); }) </script> </head> <body> <div class="swiper-container responsive"> <div class="swiper-wrapper" style="background:red;"> <!--First Slide--> <div class="swiper-slide "> page1 <select> <option>test1</option> <option>test2</option> <option>test3</option> </select> </div> <!--Second Slide--> <div class="swiper-slide"> page2 </div> </div> </div> </body> </html>
+4
source share
3 answers

I solved the problem using underscores:

  $('.swiper-slide select').on('mousedown touchstart MSPointerDown', function(e){ e.stopPropagation(); });

Hope this helps you who had the same problem as me!

+8
source

I know this is an old question. But on Swiper 3, Dean's answer doesn't work.

My solution adds class = "swiper-no-swiping" to the SELECT tag.

Hope this helps.

+4
source

Or, if you do not need touch events on the desktop, you can disable it using the simulateTouch option.

See: http://idangero.us/swiper/api/

0
source

Source: https://habr.com/ru/post/1485159/

More articles:


All Articles