Как закрепить слайдер на место?

Question

Делаю слайдер и при уменьшении масштаба страницы, слайдер едет вправо. Не понимаю как его закрепить.Слайдер slick.js. Пробую display: inline-block; Не получается, возможно подскажите как правильно его использовать чтобы он работал? Я немного не допонимаю. Также не могли бы подсказать как сделать чтобы точки двигались вместе с контентом. Спасибо!

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>Adiliti Store</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
</head>

<body>
    <header class="banner">
        <div class="container">
            <div class="banner__top">
                <div class="banner__row">
                    <img src="./img/Aditii.png" alt="Aditii">
                    <form action="#" method="get">
                        <input type="search">
                        <input type="image" src="img/loop.png" class="loop" />
                    </form>
                    <div class="banner__market">
                        <img src="./img/market.png" alt="Market">
                        <h2>$300</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="banner__row2">
            <div class="banner__menu">
                <a href="#">Home</a> | <a href="#">Sale</a> | <a href="#">Handbags</a> | <a href="#">Wallets</a>
                | <a href="#">Accessories</a> | <a href="#">Mens Store</a>
                | <a href="#">Shoes</a>
                | <a href="#">Vintage</a> | <a href="#">Services</a> | <a href="#">Contact us</a>
            </div>
        </div>
            <div class="banner__main">
                <div class="banner__slider">
                    <div class="banner__card">

                        <img src="img/Slider.png" alt="T-Shirt" />
                        <div class="banner__text">
                            <h1>Cowhide
                                <p>Standard Crew</p>
                            </h1>
                            <h4>White coloured, short-sleeved, printed T-shirt for <p>men by Levi's.
                                    This crew-neck T-shirt is made of or-</p>ganic cotton and comes in a regular fit.
                            </h4>
                            <a href="#">Shop Now</a>
                        </div>
                    </div>
                </div>
                <div class="banner__slider">
                    <div class="banner__card">
                        <img src="img/Slider.png" alt="T-Shirt" />
                        <div class="banner__text">
                            <h1>Cowhide
                                <p>Standard Crew</p>
                            </h1>
                            <h4>White coloured, short-sleeved, printed T-shirt for <p>men by Levi's.
                                    This crew-neck T-shirt is made of or-</p>ganic cotton and comes in a regular fit.
                            </h4>
                            <a href="#">Shop Now</a>
                            <ul class="slick-dots"></ul>
                        </div>

                    </div>

                </div>
                <div class="banner__slider">
                    <div class="banner__card">
                        <img src="img/Slider.png" alt="T-Shirt" />
                        <div class="banner__text">
                            <h1>Cowhide
                                <p>Standard Crew</p>
                            </h1>
                            <h4>White coloured, short-sleeved, printed T-shirt for <p>men by Levi's.
                                    This crew-neck T-shirt is made of or-</p>ganic cotton and comes in a regular fit.
                            </h4>
                            <a href="#">Shop Now</a>
                            <ul class="slick-dots"></ul>
                        </div>
                    </div>

                </div>
                <div class="banner__slider">
                    <div class="banner__card">
                        <img src="img/Slider.png" alt="T-Shirt" />
                        <div class="banner__text">
                            <h1>Cowhide
                                <p>Standard Crew</p>
                            </h1>
                            <h4>White coloured, short-sleeved, printed T-shirt for <p>men by Levi's.
                                    This crew-neck T-shirt is made of or-</p>ganic cotton and comes in a regular fit.
                            </h4>
                            <a href="#">Shop Now</a>
                        </div>

                    </div>

                </div>
                <div class="banner__slider">
                    <div class="banner__card">
                        <img src="img/Slider.png" alt="T-Shirt" />
                        <div class="banner__text">
                            <h1>Cowhide
                                <p>Standard Crew</p>
                            </h1>
                            <h4>White coloured, short-sleeved, printed T-shirt for <p>men by Levi's.
                                    This crew-neck T-shirt is made of or-</p>ganic cotton and comes in a regular fit.
                            </h4>
                            <a href="#">Shop Now</a>
                            <div class="slick-dots"></div>
                        </div>
                    </div>
                </div>

    </header>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<script src="js/script.js"></script>
.banner__main {
    height: 450px;
    background-color: #3bc7b3;
    margin-top: 3px;

    img {
        margin-top: 70px;
    }
}


.slick-dots{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    bottom: 250px;
}
.slick-dots li{
    margin: 0 10px;
}
/* Активная точка */
.slick-dots li.slick-active button{
    background-color: #3db5b1;
}
/* Элемент точки */
.slick-dots li button{
    width: 10px;
    height: 10px;
    font-size: 0;
    background-color: #fff;
    border-radius: 50%;
}

.banner__slider {
    display: flex;
    margin-left: 500px;
    width: 200px;
}

.banner__text {
    position: relative;
    left: 350px;
    bottom: 320px;
}

Answer 1

.banner__slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;        
}
.banner__slider .banner__card {
  width: 100%;
  max-width: 200px;
}

по идее оно, без нормального обзора сложно сказать

БЛОГ НА HUSL

Как закрепить слайдер на место?

Ответы (1 шт):