动态设置当前幻灯片（Slick）为750px

问题描述 投票：0回答：1

我有一个响应式光滑滑块，配置为一次显示 2 张幻灯片。 我希望 .slick-current（第一个可见的）幻灯片始终大于第二个。

问题是，随着每一个额外的幻灯片操作，完整的幻灯片不再可见，因为 slick.js 根据现有图像宽度计算松弛轨道......结果也是标题文本变得不可读.

我尝试添加额外的 jQuery 并使用 css，但这并没有考虑 slick.js。

我需要帮助将额外的宽度像素写入 js 脚本中，以便幻灯片轨道宽度和 translate3d 值与 .slick-current 的额外宽度相匹配

这是我的巧妙脚本：

$('.slickhouder').slick({
    adaptiveHeight: true,
    dots: false,
    infinite: true,
    speed: 600,
    slidesToShow: 2,
    slidesToScroll: 2,
    responsive: [
        {
            breakpoint: 992,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        },
        {
            breakpoint: 576,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
    ]
});

这是为大多数光滑幻灯片编写的 html：

<div class="slick-slide" style="width: 545px;">
img
</div>

这是我的CSS（但也许在通过 slick.js 添加额外的（205？）px 到 .slick-current 幻灯片时可以省略）：

@media (min-width: 1200px) {
    .slick-slide.slick-current {width: 750px!important;}
}

救命！

$('.slickhouder').slick({
    adaptiveHeight: true,
    dots: false,
    infinite: true,
    speed: 600,
    slidesToShow: 2,
    slidesToScroll: 2,
    responsive: [
        {
            breakpoint: 992,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        },
        {
            breakpoint: 576,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
    ]
});
@media (min-width: 1200px) {
    .slick-slide.slick-current {width: 750px!important;}
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.1/jquery-migrate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>


<div class="row">
    <div class="col-md-12 px-5 px-xl-4">
        <div class="slickhouder">
            <div data-bs-toggle="modal" data-bs-target="#fotoPopup">
                <figure class="figure m-4 m-sm-3">
                    <a href="https://picsum.photos/1920/1310" class="d-inline-block" data-bs-target="#carouselFotos" data-bs-slide-to="0">
                        <img src="https://picsum.photos/1920/1310" class="figure-img mb-0 img-fluid" alt="Klik om de afbeelding groter te bekijken">
                    </a>
                    <figcaption class="figure-caption text-dark small">Lorem ipsum dolor sit amet</figcaption>
                </figure>
            </div>
            <div data-bs-toggle="modal" data-bs-target="#fotoPopup">
                <figure class="figure m-4 m-sm-3">
                    <a href="https://picsum.photos/1920/1310" class="d-inline-block" data-bs-target="#carouselFotos" data-bs-slide-to="0">
                        <img src="https://picsum.photos/1920/1310" class="figure-img mb-0 img-fluid" alt="Klik om de afbeelding groter te bekijken">
                    </a>
                    <figcaption class="figure-caption text-dark small">Lorem ipsum dolor sit amet</figcaption>
                </figure>
            </div>
            <div data-bs-toggle="modal" data-bs-target="#fotoPopup">
                <figure class="figure m-4 m-sm-3">
                    <a href="https://picsum.photos/1920/1310" class="d-inline-block" data-bs-target="#carouselFotos" data-bs-slide-to="0">
                        <img src="https://picsum.photos/1920/1310" class="figure-img mb-0 img-fluid" alt="Klik om de afbeelding groter te bekijken">
                    </a>
                    <figcaption class="figure-caption text-dark small">Lorem ipsum dolor sit amet</figcaption>
                </figure>
            </div>
            <div data-bs-toggle="modal" data-bs-target="#fotoPopup">
                <figure class="figure m-4 m-sm-3">
                    <a href="https://picsum.photos/1920/1310" class="d-inline-block" data-bs-target="#carouselFotos" data-bs-slide-to="0">
                        <img src="https://picsum.photos/1920/1310" class="figure-img mb-0 img-fluid" alt="Klik om de afbeelding groter te bekijken">
                    </a>
                    <figcaption class="figure-caption text-dark small">Lorem ipsum dolor sit amet</figcaption>
                </figure>
            </div>
            <div data-bs-toggle="modal" data-bs-target="#fotoPopup">
                <figure class="figure m-4 m-sm-3">
                    <a href="https://picsum.photos/1920/1310" class="d-inline-block" data-bs-target="#carouselFotos" data-bs-slide-to="0">
                        <img src="https://picsum.photos/1920/1310" class="figure-img mb-0 img-fluid" alt="Klik om de afbeelding groter te bekijken">
                    </a>
                    <figcaption class="figure-caption text-dark small">Lorem ipsum dolor sit amet</figcaption>
                </figure>
            </div>
            <div data-bs-toggle="modal" data-bs-target="#fotoPopup">
                <figure class="figure m-4 m-sm-3">
                    <a href="https://picsum.photos/1920/1310" class="d-inline-block" data-bs-target="#carouselFotos" data-bs-slide-to="0">
                        <img src="https://picsum.photos/1920/1310" class="figure-img mb-0 img-fluid" alt="Klik om de afbeelding groter te bekijken">
                    </a>
                    <figcaption class="figure-caption text-dark small">Lorem ipsum dolor sit amet</figcaption>
                </figure>
            </div>
            <div data-bs-toggle="modal" data-bs-target="#fotoPopup">
                <figure class="figure m-4 m-sm-3">
                    <a href="https://picsum.photos/1920/1310" class="d-inline-block" data-bs-target="#carouselFotos" data-bs-slide-to="0">
                        <img src="https://picsum.photos/1920/1310" class="figure-img mb-0 img-fluid" alt="Klik om de afbeelding groter te bekijken">
                    </a>
                    <figcaption class="figure-caption text-dark small">Lorem ipsum dolor sit amet</figcaption>
                </figure>
            </div>
            <div data-bs-toggle="modal" data-bs-target="#fotoPopup">
                <figure class="figure m-4 m-sm-3">
                    <a href="https://picsum.photos/1920/1310" class="d-inline-block" data-bs-target="#carouselFotos" data-bs-slide-to="0">
                        <img src="https://picsum.photos/1920/1310" class="figure-img mb-0 img-fluid" alt="Klik om de afbeelding groter te bekijken">
                    </a>
                    <figcaption class="figure-caption text-dark small">Lorem ipsum dolor sit amet</figcaption>
                </figure>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="fotoPopup" tabindex="-1" aria-labelledby="fotoPopupLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5 d-none" id="fotoPopupLabel">De afbeelding in het groot</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Sluit"></button>
            </div>
            <div class="modal-body">
                <div id="carouselFotos" class="carousel slide" data-bs-ride="false">
                  <div class="carousel-indicators mb-1">
                        <button type="button" data-bs-target="#carouselFotos" data-bs-slide-to="0" class="" aria-label="Foto 1"></button>
                        <button type="button" data-bs-target="#carouselFotos" data-bs-slide-to="1" aria-label="Foto 2" class="active" aria-current="true"></button>
                        <button type="button" data-bs-target="#carouselFotos" data-bs-slide-to="2" aria-label="Foto 3"></button>
                        <button type="button" data-bs-target="#carouselFotos" data-bs-slide-to="3" aria-label="Foto 4"></button>
                        <button type="button" data-bs-target="#carouselFotos" data-bs-slide-to="4" aria-label="Foto 5"></button>
                        <button type="button" data-bs-target="#carouselFotos" data-bs-slide-to="5" aria-label="Foto 6"></button>
                        <button type="button" data-bs-target="#carouselFotos" data-bs-slide-to="6" aria-label="Foto 7"></button>
                        <button type="button" data-bs-target="#carouselFotos" data-bs-slide-to="7" aria-label="Foto 8"></button>
                    </div>
<div class="carousel-inner">
                        <div class="carousel-item">
                            <img src="https://picsum.photos/1920/1310" class="img-fluid d-block w-100" alt="">
                            <div class="carousel-caption p-1 pb-2 d-block bg-secondary bg-opacity-50 small">
                                <p>Lorem ipsum dolor sit amet</p>
                            </div>
                        </div>
                        <div class="carousel-item active">
                            <img src="https://picsum.photos/1920/1310" class="img-fluid d-block w-100" alt="">
                            <div class="carousel-caption p-1 pb-2 d-block bg-secondary bg-opacity-50 small">
                                <p>Lorem ipsum dolor sit amet2</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://picsum.photos/1920/1310" class="img-fluid d-block w-100" alt="">
                            <div class="carousel-caption p-1 pb-2 d-block bg-secondary bg-opacity-50 small">
                                <p>Lorem ipsum dolor sit amet 3</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://picsum.photos/1920/1310" class="img-fluid d-block w-100" alt="">
                            <div class="carousel-caption p-1 pb-2 d-block bg-secondary bg-opacity-50 small">
                                <p>Lorem ipsum dolor sit amet 4</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://picsum.photos/1920/1310" class="img-fluid d-block w-100" alt="">
                            <div class="carousel-caption p-1 pb-2 d-block bg-secondary bg-opacity-50 small">
                                <p>Lorem ipsum dolor sit amet 5</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://picsum.photos/1920/1310" class="img-fluid d-block w-100" alt="">
                            <div class="carousel-caption p-1 pb-2 d-block bg-secondary bg-opacity-50 small">
                                <p>Lorem ipsum dolor sit amet 6</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://picsum.photos/1920/1310" class="img-fluid d-block w-100" alt="">
                            <div class="carousel-caption p-1 pb-2 d-block bg-secondary bg-opacity-50 small">
                                <p>Lorem ipsum dolor sit amet 7</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://picsum.photos/1920/1310" class="img-fluid d-block w-100" alt="">
                            <div class="carousel-caption p-1 pb-2 d-block bg-secondary bg-opacity-50 small">
                                <p>Lorem ipsum dolor sit amet 8</p>
                            </div>
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselFotos" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Vorige</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselFotos" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Volgende</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

javascript slick.js
1个回答
0
投票

我相信使用CSS的

scale()
功能可以实现你想要的效果。

这是一个例子：

@media (min-width: 1200px) {
    .slick-slide.slick-current {
        transform: scale(1.5);
    }
}

缩放变换不会改变元素的大小，因此不会影响光滑滑块插件的计算。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.