БЛОГ НА HUSL


После подключения slick slider растягивает каждый член слайдера

Автор вопроса: Саша Васильев

Это отформатирована часть слайдера которая не работает с slick slider

После подключения slick slider растягивает каждый член слайдера Вот так должно выглядеть в итоге Вот мой код:

 <!--html-->
    <!-- slider -->
    <section class="slider">
        <div class="container">
            <div class="slider__inner">
                <h2 class="title slider__title">What<span class="title__special-word"> People </span>Say About Us</h2>
                <div class="slider__reviews">

                    <div class="slider__reviews-item">
                        <div class="reviews__box-img">
                            <img src="/img/client_1.jpg" alt="Client" class="reviews__photo-client">
                        </div>
                        <div class="reviews__box-content">
                            <div class="reviews__box-text">
                                There are many variations of passages of Lorem Ipsum available, but the majority have
                                suffered alteration in some form, by injected humour, or randomised words which don't
                                look
                                even slightly believable.
                            </div>
                            <div class="reviews__box-author">
                                <span class="reviews__box-author-style">Captain America</span> - unemployed
                            </div>
                        </div>
                    </div>
                    <div class="slider__reviews-item">
                        <div class="reviews__box-img">
                            <img src="/img/client_2.jpg" alt="Client" class="reviews__photo-client">
                        </div>
                        <div class="reviews__box-content">
                            <div class="reviews__box-text">
                                There are many variations of passages of Lorem Ipsum available, but the majority have
                                suffered alteration in some form, by injected humour, or randomised words which don't
                                look
                                even slightly believable.
                            </div>
                            <div class="reviews__box-author">
                                <span class="reviews__box-author-style">Tony Stark</span> - CEO Stark Industries
                            </div>
                        </div>
                    </div>

                    <div class="slider__reviews-item">
                        <div class="reviews__box-img">
                            <img src="/img/client_1.jpg" alt="Client" class="reviews__photo-client">
                        </div>
                        <div class="reviews__box-content">
                            <div class="reviews__box-text">
                                There are many variations of passages of Lorem Ipsum available, but the majority have
                                suffered alteration in some form, by injected humour, or randomised words which don't
                                look
                                even slightly believable.
                            </div>
                            <div class="reviews__box-author">
                                <span class="reviews__box-author-style">Captain America</span> - unemployed
                            </div>
                        </div>
                    </div>
                    <div class="slider__reviews-item">
                        <div class="reviews__box-img">
                            <img src="/img/client_2.jpg" alt="Client" class="reviews__photo-client">
                        </div>
                        <div class="reviews__box-content">
                            <div class="reviews__box-text">
                                There are many variations of passages of Lorem Ipsum available, but the majority have
                                suffered alteration in some form, by injected humour, or randomised words which don't
                                look
                                even slightly believable.
                            </div>
                            <div class="reviews__box-author">
                                <span class="reviews__box-author-style">Tony Stark</span> - CEO Stark Industries
                            </div>
                        </div>
                    </div>

                    <div class="slider__reviews-item">
                        <div class="reviews__box-img">
                            <img src="/img/client_1.jpg" alt="Client" class="reviews__photo-client">
                        </div>
                        <div class="reviews__box-content">
                            <div class="reviews__box-text">
                                There are many variations of passages of Lorem Ipsum available, but the majority have
                                suffered alteration in some form, by injected humour, or randomised words which don't
                                look
                                even slightly believable.
                            </div>
                            <div class="reviews__box-author">
                                <span class="reviews__box-author-style">Captain America</span> - unemployed
                            </div>
                        </div>
                    </div>
                    <div class="slider__reviews-item">
                        <div class="reviews__box-img">
                            <img src="/img/client_2.jpg" alt="Client" class="reviews__photo-client">
                        </div>
                        <div class="reviews__box-content">
                            <div class="reviews__box-text">
                                There are many variations of passages of Lorem Ipsum available, but the majority have
                                suffered alteration in some form, by injected humour, or randomised words which don't
                                look
                                even slightly believable.
                            </div>
                            <div class="reviews__box-author">
                                <span class="reviews__box-author-style">Tony Stark</span> - CEO Stark Industries
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
/* slider */
/*css code*/

.slider {
    padding: 120px 0;
    background-color: #fafafa;
}

.slider__reviews {
    margin-top: 160px;
}

.slider__reviews-item {
    max-width: 525px;
    display: flex;
    min-height: 350px;
    /* margin-right: 85px; */
    box-shadow: 0px 21px 49px 1px rgba(41, 44, 61, 0.15);
}

.reviews__box-img {
    display: flex;
    padding: 0 40px;
    align-items: center;
    justify-content: center;
    background-color: #267ae9;
}

.reviews__photo-client {
    border-radius: 50%;
}

.reviews__box-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-style: 16px;
    line-height: 26px;
    padding: 48px 37px;
    background-color: #fff;
    color: #4a6385;
    min-height: 350px;
    align-items: center;
    max-width: 331px;
}

   

.reviews__box-author {
    line-height: 24px;
    margin-bottom: 6px;
    padding-top: 38px;
}
.reviews__box-author-style {
    font-weight: 700;
    color: #267ae9;
}

Очень прошу помочь со слайдером спасибо за внимание


Источник

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

Автор решения: Sviatoslav

Попробуй класу .slider задать фиксированую ширину

→ Ссылка
Автор решения: Саша Васильев

Всем доброго времени суток, я полностью переделал блок слайдера и код css для него, и все работает

<!-- slider -->
    <section class="reviews">
        <div class="container">
            <h2 class="title">
                What <span class="title__special-word">People</span> Say About Us
            </h2>
            <div class="reviews-slider">
                <div class="reviews-slider__item">
                    <div class="reviews-box">
                        <div class="reviews-box-img">
                            <img src="/img/client_1.jpg" alt="client_1">
                        </div>
                        <div class="reviews-box-content">
                            <div class="reviews-box__text">
                                There are many variations of passages of Lorem Ipsum available, but the majority have
                                suffered alteration in some form, by injected humour, or randomised words which don't
                                look even slightly believable.
                            </div>
                            <div class="reviews-box__author">
                                <span class="reviews-box__author-name">Captain America</span> - unemployed
                            </div>
                        </div>
                    </div>
                </div>
                <div class="reviews-slider__item">
                    <div class="reviews-box">
                        <div class="reviews-box-img">
                            <img src="/img/client_2.jpg" alt="client_1">
                        </div>
                        <div class="reviews-box-content">
                            <div class="reviews-box__text">
                                There are many variations of passages of Lorem Ipsum available, but the majority have
                                suffered alteration in some form, by injected humour, or randomised words which don't
                                look even slightly believable.
                            </div>
                            <div class="reviews-box__author">
                                <span class="reviews-box__author-name">Tony Stark</span>  - CEO Stark Industries
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="reviews-slider__item">
                    <div class="reviews-box">
                        <div class="reviews-box-img">
                            <img src="/img/client_1.jpg" alt="client_1">
                        </div>
                        <div class="reviews-box-content">
                            <div class="reviews-box__text">
                                There are many variations of passages of Lorem Ipsum available, but the majority have
                                suffered alteration in some form, by injected humour, or randomised words which don't
                                look even slightly believable.
                            </div>
                            <div class="reviews-box__author">
                                <span class="reviews-box__author-name">Captain America</span> - unemployed
                            </div>
                        </div>
                    </div>
                </div>
                <div class="reviews-slider__item">
                    <div class="reviews-box">
                        <div class="reviews-box-img">
                            <img src="/img/client_2.jpg" alt="client_1">
                        </div>
                        <div class="reviews-box-content">
                            <div class="reviews-box__text">
                                There are many variations of passages of Lorem Ipsum available, but the majority have
                                suffered alteration in some form, by injected humour, or randomised words which don't
                                look even slightly believable.
                            </div>
                            <div class="reviews-box__author">
                                <span class="reviews-box__author-name">Tony Stark</span>  - CEO Stark Industries
                            </div>
                        </div>
                    </div>
                </div>
    
                <div class="reviews-slider__item">
                    <div class="reviews-box">
                        <div class="reviews-box-img">
                            <img src="/img/client_1.jpg" alt="client_1">
                        </div>
                        <div class="reviews-box-content">
                            <div class="reviews-box__text">
                                There are many variations of passages of Lorem Ipsum available, but the majority have
                                suffered alteration in some form, by injected humour, or randomised words which don't
                                look even slightly believable.
                            </div>
                            <div class="reviews-box__author">
                                <span class="reviews-box__author-name">Captain America</span> - unemployed
                            </div>
                        </div>
                    </div>
                </div>
                <div class="reviews-slider__item">
                    <div class="reviews-box">
                        <div class="reviews-box-img">
                            <img src="/img/client_2.jpg" alt="client_1">
                        </div>
                        <div class="reviews-box-content">
                            <div class="reviews-box__text">
                                There are many variations of passages of Lorem Ipsum available, but the majority have
                                suffered alteration in some form, by injected humour, or randomised words which don't
                                look even slightly believable.
                            </div>
                            <div class="reviews-box__author">
                                <span class="reviews-box__author-name">Tony Stark</span>  - CEO Stark Industries
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
/*css slider*/
/* slider */

.reviews{
    padding: 120px 0;
    background-color: #fafafa;
}
.reviews-slider{
    margin-top: 160px;
    
}
.reviews-box {
    display: flex;
    min-height: 350px;
}
.reviews-box-img {
    background-color: #267ae9;
    display: flex;
    align-items: center;
    padding: 0 37px;
}
.reviews-box-img img {
    border-radius: 50%;
    max-width: 120px;
    max-height: 120px;
}
.reviews-box-content {
    background-color: #fff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #4a6385;
    font-size: 16px;
    margin-left: 36px;
    margin-right: 67px;
    
}
.reviews-box__text {
    font-weight: 26px;
}
.reviews-box__author {
    margin-top: 38px;
    color: #3d4c5f;
    font-weight: 24px;
    margin-bottom: 6px;
    
}
.reviews-box__author-name {
    font-weight: 700;
    color: #267ae9;

}

Вот как должно быть: Результат Спасибо каждому кто откликнулся и думаю кому-то пригодится, всем удачи!

→ Ссылка

licensed under cc by-sa 3.0 with attribution.