Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

swiper plugin causes select can not pop drop-down box

I have an desktop application using swiper to slide page, but when I put a select tag in slide page ,the select tag can not pop the drop-drown box, anyone has happend the problem? Thanks advance! here demo is:

<!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>
like image 399
Dean Avatar asked Jun 08 '13 08:06

Dean


2 Answers

I solved the problem by using the codes underline:

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

Hope this can help you who has happened the same problem like me!

like image 61
Dean Avatar answered Sep 19 '22 22:09

Dean


I know this is old question. But on Swiper 3, Dean's answer does not work.

My solution is add class="swiper-no-swiping" to SELECT tag.

Hope this helps.

like image 38
Saki Yakumo Avatar answered Sep 19 '22 22:09

Saki Yakumo