Question

我正在使用Bxslider插件和Bootstrap为计算机和触摸设备制作响应式简单转盘。

我正在寻找要添加到此页面的carousel with truncated previous and next images。想要像this page一样实现目标。提前谢谢。

HTML： BX滑块

        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
       <!-- <link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />-->
        <!--<link rel="stylesheet" type="text/css" href="swipe/css/normalize.css">-->
        <link rel="stylesheet" type="text/css" href="bxslider/jquery.bxslider.css">

    <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>-->
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="bxslider/jquery.bxslider.js"></script>
    </head>
    <body>

    <div class="container-fluid">
    <section class="row col-lg-10" style="float: none; margin: 0 auto;">
    <ul class="bxslider">
      <li><img src="image/banner1.png" title="Funky roots" /></li>
      <li><img src="image/banner1.png" title="The long and winding road" /></li>
      <li><img src="image/banner1.png" title="Happy trees" /></li>
    </ul>
                   <!--######################### End Swipe Carousel ##############################-->
    </section>
    </div>

    <script>
        $(document).ready(function () {

    $('.bxslider').bxSlider({
      mode: 'horizontal',
      captions: true,
      auto: true,
      touchEnabled: true,
      oneToOneTouch: true,
     /* controls: false,*/

      pager: false,
      speed: 200
    });

    });

    </script>
    </body>
    </html>

通过使用Bxslider和Bootstrap截断前一个和下一个图像的轮播

0 个答案: