javascript - Slick Slider width recalculation - Stack Overflow

admin管理员组

文章数量:1431426

I'm trying to add a slide in panel over a Slick container with CSS. Everything about the carousel works except the new width is not being calculated when the space has been added. It does recalibrate once I advance to the next slide but I'd like it to happen each time the panel is opened or closed. I've tried adding both margin and padding, but neither makes a difference. Any ideas?

/

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>

jQUERY:

$('.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');
});

I'm trying to add a slide in panel over a Slick container with CSS. Everything about the carousel works except the new width is not being calculated when the space has been added. It does recalibrate once I advance to the next slide but I'd like it to happen each time the panel is opened or closed. I've tried adding both margin and padding, but neither makes a difference. Any ideas?

https://jsfiddle/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>

jQUERY:

$('.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');
});

• javascript
• jquery
• css
• slick.js

Share Improve this question Follow asked Jul 15, 2016 at 19:58 mhigleymhigley 6811 silver badge66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

This line is from the Methods portion of the slick documentation

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

You could track the end of the aside transition and reset the slick container.

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

本文标签： javascriptSlick Slider width recalculationStack Overflow