Twitter Bootstrap Question posted in

Multiple rows carousel centering – Twitter bootstrap

Explanation

I’m trying to center a multiple rows carousel (slick.js), but it doesn’t center. As you can see in the code below, I tried to use .slick-slide{text-align: center !important;} and set Bootstrap’s text-center – which is the same of text-align: center – to the carousel class, but still, nothing happens.

enter image description here

Code

You can also see it in JSFiddle and in “fullscreen mode”.

ps: it’s be better to visualize it in fullscreen.

$('.carousel').slick({
    infinite: true,
    arrows: false,
    dots: true,
    slidesPerRow: 3,
    rows: 3
});
.carousel-wrapper {
    background-color: rgb(235, 235, 235);
    position: relative;
}

img {
    background-color: black;
}

.slick-slide {
    text-align: center !important;
}
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
</head>

<body>

    <section class="carousel-wrapper">
        <div class="container">
            <div class="row">

                <ul class="col-md-12 carousel text-center">
                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                </ul>

            </div>
        </div>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

</body>

</html>

Thanks in advance,
Luiz.

Tags:

2

Answers


  1. 0

    Reviewing your fiddle code, the width of the “li” element holding the images are 33.33% and that fills up the container making it 3 “li” elements per row. Having said that, the images in them do not fill up the 33.33% width of their parents. SO you need to center them in their containers.
    You can try this code below.

    .carousel-wrapper .slick-slide img{
   margin: 0 auto;
}

    This will be specific to only the slick slider in the “.carousel-wrapper” container

    This fixes the dots

    .carousel-wrapper .slick-dots {
    left: 0;
    right: 0;
}
    Login or Signup to reply.
  2. 0 
    .slick-slide li a {
    display: inline-block;
}

    Add this centers your image tiles, especially since they are fixed size and smaller than the list item width. This also gives your anchor tags ‘layout’, which they don’t currently have. However, your navigation dots’ alignment is a little off as well, FYI.

    EDIT: Add this solves the dot alignment.

    .slick-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search