Home>

Can't adapt slick slider. I've tried every method I can find, but nothing works. The code

<section class="film">                    <
div class="container">                        <
div class="film_inner">                            <
p class="vertical-text film_text">                                Best
                            <
/p >
                            <
div class="film_variants">                                <
div class="film_item">                                    <
div class="film__item-inner">                                        <
div class="film_general">                                            <
div class="film__general--img">                                                <
img src="images/spnwhposter.jpg" alt="">                                            <
/div >
                                            <
div class="film_general--gen">                                                <
h3 class="film_general-title">                                                    Spider-Man: No Way Home
                                                <
/h3>                                                <
div class="film_general--inf">                                                    <
ul class="film_general-list">                                                        <
li class="film__general-item">                                                            <
div class="film_general-item-left">                                                                Year
                                                            <
/div >
                                                            <
div class="film_general-item-right">                                                                2021
                                                            <
/div >
                                                        <
/li >
                                                        <
li class="film__general-item">                                                            <
div class="film_general-item-left">                                                                The country
                                                            <
/div >
                                                            <
div class="film_general-item-right">                                                                USA, India
                                                            <
/div >
                                                        <
/li >
                                                        <
li class="film_general-item">                                                            <
div class="film_general-item-left">                                                                Director
                                                            <
/div >
                                                            <
div class="film__general-item-right">                                                                John Watts
                                                            <
/div >
                                                        <
/li >
                                                        <
li class="film_general-item">                                                            <
div class="film_general-item-left">                                                                genre
                                                            <
/div >
                                                            <div class="film__general-item-right"> science fiction, action, adventure, fantasy
                                                            <
/div >
                                                        <
/li >
                                                        <
li class="film_general-item">                                                            <
div class="film_general-item-left">                                                                Budget
                                                            <
/div >
                                                            <
div class="film__general-item-right">                                                                $200,000,000
                                                            <
/div >
                                                        <
/li >
                                                        <
li class="film_general-item">                                                            <
div class="film_general-item-left">                                                                Duration
                                                            <
/div >
                                                            <
div class="film__general-item-right">                                                                148 min. /02:28
                                                            <
/div >
                                                        <
/li >
                                                    <
/ul >
                                                <
/div >
                                            <
/div >
                                        <
/div >
                                        <
div class="film_media">                                            <
video src="video/Spider-Man_ No Way Home -Official Trailer.mp4" controls="controls" poster="images/teaser.jpg" muted="muted"><
/video>                                            <
div class="film__media-text">                                                <
h4 class="film_media-title">                                                    Spider-Man: No Way Home
                                                <
/h4>                                                <
p class="film_media-actors">                                                    Cast: Tom Holland, Zendaya, Benedict Cumberbatch, Marisa Tomei, Willem Dafoe, Alfred Molina, Jamie Foxx
                                                <
/p >
                                            <
/div >
                                        <
/div >
                                        <
div class="film__descr">                                            Peter Parker's life and reputation are in jeopardy as Mysterio reveals Spider-Man's identity to the world. In an attempt to rectify the situation, Peter turns to Stephen Strange for help, but things soon become much more dangerous.
                                        <
/div >
                                        <
div class="film_images">                                            <
a href="images/smnwhimg1.jpg"><
img src="images/smnwhimg1.jpg" alt=""><
/a >
                                            <
a href="images/smnwhimg2.jpg"><img src="images/smnwhimg2.jpg" alt=""></a >
                                            <
a href="images/smnwhimg3.jpg"><
img src="images/smnwhimg3.jpg" alt=""><
/a >
                                            <
a href="images/smnwhimg4.jpg"><
img src="images/smnwhimg4.jpg" alt=""><
/a >
                                            <
a href="images/smnwhimg5.jpg"><
img src="images/smnwhimg5.jpg" alt=""><
/a >
                                            <
a href="images/smnwhimg6.jpg"><
img src="images/smnwhimg6.jpg" alt=""><
/a >
                                        <
/div >
                                    <
/div >
                                <
/div >
                                <
div class="film_item">                                    <
div class="film__item-inner">                                        <
div class="film_general">                                            <
div class="film__general--img">                                                <
img src="images/spnwhposter.jpg" alt="">                                            <
/div >
                                            <
div class="film_general--gen">                                                <
h3 class="film_general-title">                                                    Spider-Man: No Way Home
                                                <
/h3>                                                <
div class="film_general--inf">                                                    <
ul class="film_general-list">                                                        <
li class="film_general-item">                                                            <
div class="film_general-item-left">                                                                year
                                                            <
/div >
                                                            <
div class="film__general-item-right">                                                                2021
                                                            <
/div >
                                                        <
/li >
                                                        <
li class="film_general-item">                                                            <
div class="film_general-item-left">                                                                the country
                                                            <
/div >
                                                            <
div class="film__general-item-right">                                                                USA, India
                                                            <
/div >
                                                        <
/li >
                                                        <
li class="film_general-item">                                                            <
div class="film_general-item-left">                                                                Director
                                                            <
/div >
                                                            <
div class="film__general-item-right">                                                                John Watts
                                                            <
/div >
                                                        <
/li >
                                                        <
li class="film_general-item">                                                            <
div class="film_general-item-left">Genre </div >
                                                            <
div class="film__general-item-right">                                                                science fiction, action, adventure, fantasy
                                                            <
/div >
                                                        <
/li >
                                                        <
li class="film_general-item">                                                            <
div class="film_general-item-left">                                                                Budget
                                                            <
/div >
                                                            <
div class="film__general-item-right">                                                                $200,000,000
                                                            <
/div >
                                                        <
/li >
                                                        <
li class="film_general-item">                                                            <
div class="film_general-item-left">                                                                Duration
                                                            <
/div >
                                                            <
div class="film__general-item-right">                                                                148 min. /02:28
                                                            <
/div >
                                                        <
/li >
                                                    <
/ul >
                                                <
/div >
                                            <
/div >
                                        <
/div >
                                        <
div class="film_media">                                            <
video src="video/Spider-Man_ No Way Home -Official Trailer.mp4" controls="controls" poster="images/teaser.jpg" muted="muted"><
/video>                                            <
div class="film__media-text">                                                <
h4 class="film_media-title">                                                    Spider-Man: No Way Home
                                                <
/h4>                                                <
p class="film_media-actors">                                                    Cast: Tom Holland, Zendaya, Benedict Cumberbatch, Marisa Tomei, Willem Dafoe, Alfred Molina, Jamie Foxx
                                                <
/p >
                                            <
/div >
                                        <
/div >
                                        <
div class="film__descr">                                            Peter Parker's life and reputation are in jeopardy as Mysterio reveals Spider-Man's identity to the world. In an attempt to rectify the situation, Peter turns to Stephen Strange for help, but things soon become much more dangerous.
                                        <
/div >
                                        <
div class="film_images">                                            <a href="images/smnwhimg1.jpg"><img src="images/smnwhimg1.jpg" alt=""><
/a >
                                            <
a href="images/smnwhimg2.jpg"><
img src="images/smnwhimg2.jpg" alt=""><
/a >
                                            <
a href="images/smnwhimg3.jpg"><
img src="images/smnwhimg3.jpg" alt=""><
/a >
                                            <
a href="images/smnwhimg4.jpg"><
img src="images/smnwhimg4.jpg" alt=""><
/a >
                                            <
a href="images/smnwhimg5.jpg"><
img src="images/smnwhimg5.jpg" alt=""><
/a >
                                            <
a href="images/smnwhimg6.jpg"><
img src="images/smnwhimg6.jpg" alt=""><
/a >
                                        <
/div >
                                    <
/div >
                                <
/div >
                            <
/div >
                        <
/div >
                    <
/div >
<
/section>
.film__inner {
    display:grid;
    grid-template: 1fr /35px 100%
}
.film_variants {
    background-color: #07131B;
    color: #fff;
    max-width: 100%;
}
.film_item {
    margin: 12px 0 0 12px;
    padding-bottom: 5px;
}
$('.film__variants').slick({
    prevArrow: '<button class="slick-prev slick-arrow"><
img src="images/icon/left-arrow.png" width="32px" alt=""><
/button >
',
    nextArrow: '<button class="slick-next slick-arrow"><
img src="images/icon/right-arrow.png" width="32px" alt=""><
/button >
',
    dots: true
});

More specifically, when changing the width, the slider does not adapt. And when I remove it -everything adapts

Darth Revan2022-01-15 09:12:13
  • Answer # 1

    Solved (maybe this is a crutch, but at least somehow). Briefly speaking! On .slick-list. draggable (these are the classes that js gives when we set the slider) set the max-width: 92vw properties. Next, .film__item .slick-slide .slick-current .slick-active (There, too, all classes except the first one are set by JS itself and I override their values) set the properties max-width: 100vw. In my case it helped.

  • Answer # 2

    Solved (maybe this is a crutch, but at least somehow). Briefly speaking! On .slick-list. draggable (these are the classes that js gives when we set the slider) set the max-width: 92vw properties. Next, .film__item .slick-slide .slick-current .slick-active (There, too, all classes except the first one are set by JS itself and I override their values) set the properties max-width: 100vw. In my case it helped.