dsbqfrr098575666
2018-02-27 08:38
浏览 82

光滑的滑块不能与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>
    
    点赞 打赏 评论
  • dsfasdfsda234234 2018-02-27 09:01

    Boostrap has a default class with same name "fade" . just rename it to something else .below i renamed the class 'fade' to 'fadex' and it worked fine.

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
    
          
    
            <!-- Add the slick-theme.css if you want default styling -->
            <link rel="stylesheet" type="text/css" href="https://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="https://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="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
    
        </head>
        <body>
            <div class="fadex">
                <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(){
                    $('.fadex').slick({
                        dots: true,
                        infinite: true,
                        speed: 700,
                        autoplay:true,
                        autoplaySpeed: 2000,
                        arrows:false,
                        slidesToShow: 1,
                        slidesToScroll: 1
                    });
                });
            </script>
        </body>
    </html>

    </div>
    
    点赞 打赏 评论

相关推荐 更多相似问题