光滑的滑块不适用于引导程序答案

【问题标题】：Slick slider not working with bootstrap光滑的滑块不适用于引导程序
【发布时间】：2018-02-27 17:37:06
【问题描述】：

我无法使用光滑的滑块进行引导。如果我删除 bootstrap cdn slick 滑块可以正常工作，但是当我重新添加它时它会停止工作。我知道怎么了。这是代码：-

<!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>

删除引导 cdn 文件后，它工作正常。我也试过 bootstrap 4，得到了同样的结果。

【问题讨论】：

滑块脚本中需要的某些功能被引导脚本覆盖。我猜他们俩都需要。我的肮脏解决方案是首先放置引导文件，然后进行测试以确保我正在使用的所有引导功能仍然有效。一些函数将被覆盖，但您似乎有可能不使用这些函数。

标签： javascript php html css twitter-bootstrap

【解决方案1】：

如果您查看div 和fade 类，您会看到opacity 在加载bootstrap 时设置为0。

所以你必须在这个div上加上opacity到1。

你可以这样做：

div.fade {
    opacity: 1;
}

编辑：正如@OmkarVaity 在 cmets 中所说（谢谢），.fade 是引导程序中的一个类，它将opacity 设置为0。为避免混淆样式，您可以重命名 .fade 类并将您的调用更新为 slick。

这是一个有效的 sn-p：

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>

【讨论】：

.fade 是引导程序中的默认类，它具有不透明度：0；所以使用其他类名。
因此，.fade 上使用的 div 类可以重命名以避免混淆引导程序。
是的，你应该这样做而不是在 css 中覆盖，.fade 具有不透明度等属性。

【解决方案2】：

Boostrap 有一个同名的默认类 "fade" 。只需将其重命名为其他名称即可。下面我将“fade”类重命名为“fadex”，效果很好。

<!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>

【讨论】：

你从他们的例子中改变了什么？请解释为什么您认为此解决方案会起作用以及 OP 遗漏了什么。
我刚刚将类名 'fade' 重命名为 'fadex'
请通过编辑您的答案将其添加到答案正文中。不是每个人都阅读 cmets，如果您解释为什么您的答案对他们的问题有效，这有助于提问的人了解。