I have a responsive slick slider configured showing 2 slides at a time. I would like the .slick-current (first visible) slide always to be larger then the second.
The problem is that, with every extra slide action, the full slide is not visible anylonger because of the fact that slick.js calculates the slack-track based on the existing image widths... result is also that the caption text becomes unreadable.
I tried adding extra jQuery and using css but that doesn't take the slick.js into consideration.
I need help to write the extra width-pixels into the js script, so that the slide-track width and translate3d values matches the extra width of the .slick-current
This is my slick script:
$('.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
}
}
]
});
This is the html that is written for most slick-slides:
<div class="slick-slide" style="width: 545px;">
img
</div>
This is my css (but maybe this can be omitted when adding extra (205?) px to the .slick-current slide via slick.js):
@media (min-width: 1200px) {
.slick-slide.slick-current {width: 750px!important;}
}
help!
$('.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>
I believe the effect you're looking for can be achieved using the
scale()function is CSS.Here is an example:
The scaling transformation happens without changing the size of the element and thus doesn't affect the calculation of your slick slider plugin.