Carousel slick.js + bootstrap 列宽问题

Question

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

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

我也用过首页的轮播；那里一切都很好。 http://staging.karlienfabre.be/pocoloco/（页面下方，不需要时事通讯订阅）

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

目前正在建设中。

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

轮播在推荐包装器上初始化的地方

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

任何人都可以帮我解决这个问题并解释一下我缺少什么...:-/

谢谢！

Answer 1

我在引导列中遇到了类似的 slick 问题。我刚刚添加了一些填充物。

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

Answer 2

因为

.testimonial_wrapper

是您要初始化 slick 功能的元素，并且您只说显示一张带有

slidesToShow: 1

的幻灯片，所以具有

col-md-4

类的幻灯片将继承

.testimonial_wrapper

的整个宽度元素，因为您选择了

slidesToShow: 1

。

本质上，SlickJS 使用 javascript 处理所有内容，这将覆盖 Bootstraps CSS 设置。

我会提出以下两件事之一：

如果您希望滑块只有一张幻灯片并占据

col-md-4

列的大小，请向

col-md-4

元素添加

.testimonial_wrapper

类。

或者

您可以通过在调用 slick 函数/初始化滑块时声明该属性来一次显示 3 张幻灯片（模仿滑块中的

col-md-4

类）：

slidesToShow: 3

除此之外 ^ - 如果您对滑块的响应断点感兴趣，Slick 也有办法处理这个问题。您可以查看他们的文档以了解响应式断点设置。