Question

我确信这是一个基本问题。我需要一些帮助，试图让一个菜单粘在屏幕的右侧，同时滑块从一个移动到另一个，如我的例子中所示。另外，需要解决溢出问题。有人可以帮忙吗？

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.1/css/swiper.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.1/js/swiper.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 

    <style type="text/css">
    html, body {
    position: relative;
    width: 100%;
    height: 100%;
    background: #eee;
    margin:0;
    overflow: hidden;
    }
    .swiper-container, .swiper-slide {
    width: 100%;
    height: 100%;
    }
   .swiper-slide {
   text-align: center;
   background: #fff; 
   box-sizing: border-box;
   /* padding: 30px; */
   z-index: 90;
   }
   </style>

   <title></title>


   <script type='text/javascript'>
   $(document).ready(function(){
   var swiper = new Swiper(...);

   $('.slide-to-link').on('click', function (e){
      e.preventDefault();
      swiper.slideTo($(this).attr('data-slide'));
   });
   });
   </script>

   </head>

   <body>


  <div id="wrapper">
  <div id="header">
    <div id="menu">
        <a href="#" data-slide="0" class="slide-to-link">Link One</a>
        <a href="#" data-slide="1" class="slide-to-link">Link Two</a>
    </div>
   </div>
   </div>



    <div class="swiper-container">
    <div class="swiper-wrapper">
    <div class="swiper-slide">Slide One</div>
    <div class="swiper-slide">Slide Two</div>
    </div>
    </div>

    <script>
    $(document).ready(function(){
    var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: '.swiper-pagination',
    grabCursor: true
    });
    $('.slide-to-link').on('click', function (e){
    e.preventDefault();
    swiper.slideTo($(this).attr('data-slide'));
    });
    });
    </script>


    </body>

    </html>

菜单重叠和滚动问题

0 个答案: