javascript - Carousel slick.js + bootstrap 列宽问题

Question

我有这个网页 http://staging.karlienfabre.be/pocoloco/reizen/canyoning.html

我在黄色方 block 中的推荐信。我想要一个推荐轮播；但是正如您在第二个黄色 block 中看到的那样，我遇到了宽度问题。它应该是 col-md-4 的轮播；但它让它变得更大。

我也在主页上使用了轮播；在那里一切都很好。 http://staging.karlienfabre.be/pocoloco/ (在页面下方，需要时事通讯订阅)

我已经在 html 中尝试了很多构造；但找不到合适的或丢失的部分。

目前正在 build 中。

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

旋转木马在 testimonial-wrapper 上初始化

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

任何人都可以帮我解决这个问题并解释我缺少的东西...... :-/

谢谢!

Answer 1

我在 bootstrap 列中遇到了类似的 slick 问题。我只是添加了一些填充。

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