Carousel slick.js + bootstrap column width issue

Question

I'm having this webpage http://staging.karlienfabre.be/pocoloco/reizen/canyoning.html

Where I've a testimonial in the yellow block. I would like to have a carousel of testimonials; but as you can see in the second yellow block I'm having issues with the width. It should be a carousel of col-md-4 ; but it's making it way bigger.

I'v used the carousel at the homepage too; ander there everything is fine. http://staging.karlienfabre.be/pocoloco/ (way down at the page, underneed newsletter subscription)

I've already tries a lot of constructions in html; but can't find the right one or the missing piece.

currently this is the construction.

        <section class="row yellow">
        <div class="border-top">
            <div class="container">
                <img src="../img/border_top.png"/>
            </div>
        </div>
        <div class="container yellow-content">
            <div class="row center-vertical">
                <div class="col-md-8 vertical-center-element vertical-centered-text">
                    <h2>Actie en avontuur</h2>
                    <p>
                        540 smith grind grind hang up launch ramp. Sponsored gnarly no comply regular footed hang-up. Quarter pipe tic-tac aerial hang ten airwalk. Deck baseplate crail grab bluntslide regular footed. Varial carve darkslide ollie hole Vans Calfornia Daze rocket air. Pivot kick-nose ollie sketchy death box Steve Rocco.
                    </p>
                </div>
                <div class="testimonial_wrapper">
                    <div class="col-md-4  vertical-center-element">
                        <div class="testimonail_container">
                            <div class="row">
                                <div class="col-md-12  bgwhite">
                                    <div class="row text-center">
                                        <div class="col-md-6 col-md-offset-3">
                                            <div class="text-center testimonial">
                                                <img class="img-circle img-responsive" src="../img/reisaanbod/testimonials/testi_canyoning.jpg" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row text-center">
                                        <div class="row-md-9">
                                                <p>Tic-tac nollie bearings Ron Allen disaster. Downhill blunt no comply Kevin Jarvis slob air. Deck Brooklyn Banks indy grab slap maxwell pop shove-it.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4  vertical-center-element">
                        <div class="testimonail_container">
                            <div class="row">
                                <div class="col-md-12  bgwhite">
                                    <div class="row text-center">
                                        <div class="col-md-6 col-md-offset-3">
                                            <div class="text-center testimonial">
                                                <img class="img-circle img-responsive" src="../img/reisaanbod/testimonials/testi_canyoning.jpg" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row text-center">
                                        <div class="row-md-9">
                                                <p>Tic-tac nollie bearings Ron Allen disaster. Downhill blunt no comply Kevin Jarvis slob air. Deck Brooklyn Banks indy grab slap maxwell pop shove-it.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="border-bottom">
                <div class="container">
                    <img src="../img/border_bottom.png"/>
                </div>
            </div>

    </section>

where the carousel is initialized on testimonial-wrapper

        <script>
        //testimonial slider
        $('.testimonial_wrapper').slick({
          infinite: false,
          slidesToShow: 1,
          slidesToScroll: 1
        });
    </script>

Can anyone help me out with this one and explain what I'm missing... :-/

Thx!

Answer 1

I had a similar issue with slick in a bootstrap column. I just added some padding.

.bootstrap-column { padding: 0 35px;}

Answer 2

Because .testimonial_wrapper is the element you're initializing the slick function on, and you're only saying to show one slide with: slidesToShow: 1, the slide with class col-md-4 will inherit the entire width of the .testimonial_wrapper element because you chose slidesToShow: 1.

By nature, SlickJS handles everything with javascript which will overwrite Bootstraps CSS settings.

I would propose one of two things:

If you want the slider to have one slide and take up the size of a col-md-4 column then add a col-md-4 class to the .testimonial_wrapper element.

Or

You can have the slide show 3 slides at once (mimicking a col-md-4 class within in the slider) by declaring that property when calling the slick function/initializing the slider: slidesToShow: 3

In addition to this ^ - If you're interested in responsive breakpoints for your slider Slick has a way to handle that as well. You can look through their documentation for the responsive breakpoints settings.