CODEWITHSUNDEEP
javascriptphphtmlcsstwitter-bootstrap
Gaurav
Gaurav

Reputation: 45

Slick slider not working with 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/[email protected]/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/[email protected]/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/[email protected]/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.

Upvotes: 2

Views: 4392

Answers (2)

Md.Rafiuzzaman Khan
Md.Rafiuzzaman Khan

Reputation: 29

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/[email protected]/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/[email protected]/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/[email protected]/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>

Upvotes: 0

ADreNaLiNe-DJ
ADreNaLiNe-DJ

Reputation: 4919

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/[email protected]/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/[email protected]/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/[email protected]/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>

Upvotes: 4

Related Questions