javascript - Slick Slider 宽度重新计算

Question

我正在尝试使用 CSS 在 Slick 容器上添加面板中的幻灯片。除了在添加空间时不计算新宽度外，轮播的所有内容都有效。一旦我前进到下一张幻灯片，它就会重新校准，但我希望它在每次打开或关闭面板时都发生。我试过同时添加边距和填充，但两者都没有区别。有什么想法吗？

https://jsfiddle.net/mhigley/dpf7mLpL/

HTML:

<button type="button" id="button"><i class="fa fa-arrow-right"></i></button>
<aside>
    <h2>Slide In Panel</h2>
    <ol>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
    </ol>
</aside>
<main role="main">
    <div class="sections">
        <section>
            <article>
                <h2>First Slide</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore libero nesciunt sequi doloribus, non reprehenderit laboriosam laudantium nemo reiciendis illum. Libero eveniet quibusdam blanditiis aspernatur.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis nihil quaerat, officiis autem, sunt dicta!</p>
                <figure>
                    <img src="//unsplash.it/600/200?image=400" style="max-width: 100%;" alt="">
                    <figcaption>Source: <a href="#">Unsplash</a> and a continuation of the same source to wrap to multiple lines... which does not appear to be wrapping.</figcaption>
                </figure>
                <ul>
                    <li>list item</li>
                    <li>list item
                        <ul>
                            <li>nested list item</li>
                            <li>nested list item</li>
                            <li>nested list item
                                <ul>
                                    <li>nested list item</li>
                                    <li>nested list item</li>
                                    <li>nested list item</li>
                                </ul>
                            </li>
                            <li>nested list item</li>
                            <li>nested list item</li>
                        </ul>
                    </li>
                    <li>list item</li>
                    <li>list item</li>
                    <li>list item</li>
                </ul>
                <ol>
                    <li>list item</li>
                    <li>list item
                        <ol>
                            <li>nested list item</li>
                            <li>nested list item</li>
                            <li>nested list item
                                <ol>
                                    <li>nested list item</li>
                                    <li>nested list item</li>
                                    <li>nested list item</li>
                                    <li>nested list item</li>
                                </ol>
                            </li>
                            <li>nested list item</li>
                            <li>nested list item</li>
                        </ol>
                    </li>
                    <li>list item</li>
                    <li>list item</li>
                    <li>list item</li>
                </ol>
                <hr>
                <h3>Subheadline</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptatem. Id alias, magnam molestias voluptas eveniet eos laboriosam quae nemo possimus ipsum esse, fuga nulla.</p>
            </article>
        </section>
        <section>
            <article>
                <h2>Topic One</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore libero nesciunt sequi doloribus, non reprehenderit laboriosam laudantium nemo reiciendis illum. Libero eveniet quibusdam blanditiis aspernatur.</p>
                <figure>
                    <img src="//unsplash.it/600/200?image=410" style="max-width: 100%;" alt="">
                    <figcaption>Source: <a href="#">Unsplash</a> and a continuation of the same source to wrap to multiple lines... which does not appear to be wrapping.</figcaption>
                </figure>
                <hr>
                <h3>Subheadline</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet facilis, atque aperiam, cum animi incidunt ad error voluptate voluptas nihil eius dolores accusamus vel provident.</p>
            </article>
        </section>
        <section>
            <article>
                <h2>Topic Two</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore libero nesciunt sequi doloribus, non reprehenderit laboriosam laudantium nemo reiciendis illum. Libero eveniet quibusdam blanditiis aspernatur.</p>
                <figure>
                    <img src="//unsplash.it/600/200?image=420" style="max-width: 100%;" alt="">
                    <figcaption>Source: <a href="#">Unsplash</a></figcaption>
                </figure>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur distinctio cum molestias, dolor autem voluptatum. Voluptates maxime molestias ipsam, ducimus debitis cupiditate illo nam temporibus, modi in quibusdam enim optio iste
                    perferendis numquam amet odit neque! Velit nisi in id rem blanditiis officiis quas, odit voluptate, corrupti fuga, architecto facere.</p>
            </article>
        </section>
        <section>
            <article>
                <h2>Topic Three</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore libero nesciunt sequi doloribus, non reprehenderit laboriosam laudantium nemo reiciendis illum. Libero eveniet quibusdam blanditiis aspernatur.</p>
                <figure>
                    <img src="//unsplash.it/600/200?image=430" style="max-width: 100%;" alt="">
                    <figcaption>Source: <a href="#">Unsplash</a></figcaption>
                </figure>
                <blockquote>
                    <p>A blockquote Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae incidunt officiis, esse enim, nemo nesciunt.</p>
                </blockquote>
            </article>
        </section>
    </div>
</main>

j查询:

$('.sections').slick({
    speed: 250,
    useCSS: true,
    cssEase: 'ease-in-out',
    slidesToShow: 1,
    initialSlide: 0,
    dots: false,
    infinite: true,
    adaptiveHeight: true,
    draggable: true,
    nextArrow: '<button><i class="fa fa-angle-right"></i></button>',
    prevArrow: '<button><i class="fa fa-angle-left"></i></button>'
});

var $btn = $('#button'),
    $body = $('body');

$btn.on('click', function() {
    $body.toggleClass('padify');
});

Answer 1

此行来自 slick documentation 的方法部分

$('.sections').slick('setPosition');

您可以跟踪旁路过渡的结束并重置 slick 容器。

$('aside', $body).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
    $('.sections').slick('setPosition');  
});