dsbqfrr098575666 2018-02-27 08:38
浏览 84
已采纳

光滑的滑块不能与bootstrap一起使用

I can't get bootstrap working with slick slider. If I remove bootstrap cdn slick slider works ok but when I add it back it stops working. idk what's wrong. Here's the code:-

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <!-- Add the slick-theme.css if you want default styling -->
        <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
        <!-- Add the slick-theme.css if you want default styling -->
        <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-3.0.1.min.js"></script>
        <script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
    </head>
    <body>
        <div class="fade">
            <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
            <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
            <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
        </div>

        <script type="text/javascript">
            $(document).ready(function(){
                $('.fade').slick({
                    dots: true,
                    infinite: true,
                    speed: 700,
                    autoplay:true,
                    autoplaySpeed: 2000,
                    arrows:false,
                    slidesToShow: 1,
                    slidesToScroll: 1
                });
            });
        </script>
    </body>
</html>

After removing the bootstrap cdn file it works fine. I have also tried bootstrap 4, got same result.

  • 写回答

2条回答 默认 最新

  • dongxiao9583 2018-02-27 08:48
    关注

    If you look at you div with fade class, you'll see that the opacity is set to 0 when bootstrap is loaded.

    So you have to put opacity to 1 on this div.

    You can do it like this:

    div.fade {
    opacity: 1;
}

    EDIT : As @OmkarVaity said in comments (thanks), .fade is a class in bootstrap which sets the opacity to 0. To avoid messing styles, you can rename the .fade class and update your call to slick.

    Here is a working snippet:

    div.myslider {
  opacity: 1;
}
    <!DOCTYPE html>
<html>
    <head>
        <title></title>
        <!-- Add the slick-theme.css if you want default styling -->
        <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
        <!-- Add the slick-theme.css if you want default styling -->
        <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-3.0.1.min.js"></script>
        <script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
    </head>
    <body>
        <div class="myslider">
            <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
            <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
            <div><img src="http://placehold.it/1000x400&text=[ img 1 ]" /></div>
        </div>

        <script type="text/javascript">
            $(document).ready(function(){
                $('.myslider').slick({
                    dots: true,
                    infinite: true,
                    speed: 700,
                    autoplay:true,
                    autoplaySpeed: 2000,
                    arrows:false,
                    slidesToShow: 1,
                    slidesToScroll: 1
                });
            });
        </script>
    </body>
</html>

    </div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能！！有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗？
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘