Как сделать в сладере позиционирование текстового блока на одном уровне?
Добрый вечер!
Суть вопроса заключается в том, чтобы разместить текстовый блок на одной высоте относительно верхнего края слайда, как на скриншоте примерных слайдов ниже:
HTML код:
<ion-content> <swiper-container #swiper (afterinit)="swiperReady()" [pagination]="true"> <swiper-slide> <img src="assets/images/onboarding_1.png" class="slide-image"> <div class="slide-content"> <h2>Комплексная поддержка при раке груди</h2> <p>Благотворительный пакет помощи на 360 дней - бесплатно. Доступ к вебинарам, курсам и онлайн-встречам с опытными врачами и поддерживающими специалистами.</p> </div> <ion-button size="large" (click)="goNext()"> Далее <img src="assets/icons/chevron-right.svg" slot="end"/> </ion-button> </swiper-slide> <swiper-slide> <img src="assets/images/onboarding_2.png" class="slide-image"> <div class="slide-content"> <h2>Доказательная информация из проверенных источников</h2> <p>Врачи более 10 лет в практике. Более 9000 пациентов успешно прошли путь выздоровления.</p> </div> <ion-button size="large" (click)="goNext()"> Далее <img src="assets/icons/chevron-right.svg" slot="end"/> </ion-button> </swiper-slide> </swiper-container> </ion-content> |
<ion-content> <swiper-container #swiper (afterinit)="swiperReady()" [pagination]="true"> <swiper-slide> <img src="assets/images/onboarding_1.png" class="slide-image"> <div class="slide-content"> <h2>Комплексная поддержка при раке груди</h2> <p>Благотворительный пакет помощи на 360 дней - бесплатно. Доступ к вебинарам, курсам и онлайн-встречам с опытными врачами и поддерживающими специалистами.</p> </div> <ion-button size="large" (click)="goNext()"> Далее <img src="assets/icons/chevron-right.svg" slot="end"/> </ion-button> </swiper-slide> <swiper-slide> <img src="assets/images/onboarding_2.png" class="slide-image"> <div class="slide-content"> <h2>Доказательная информация из проверенных источников</h2> <p>Врачи более 10 лет в практике. Более 9000 пациентов успешно прошли путь выздоровления.</p> </div> <ion-button size="large" (click)="goNext()"> Далее <img src="assets/icons/chevron-right.svg" slot="end"/> </ion-button> </swiper-slide> </swiper-container> </ion-content>
CSS:
swiper-container { --swiper-pagination-color: #5638cb; /* Цвет активного буллета */ --swiper-pagination-bullet-inactive-color: #E4E2EE; /* Цвет неактивного буллета */ --swiper-pagination-bullet-inactive-opacity: 1; width: 100%; height: 100%; } swiper-slide { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; } .slide-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* Обеспечивает покрытие всего слайда без искажения */ z-index: -1; /* Помещает изображение под текстовый контент */ } .slide-content { z-index: 1; /* Убедитесь, что текстовый контент находится над изображением */ color: white; /* Для лучшей видимости на темном фоне */ display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } .slide-content h2 { color: #5639cb; font-weight: 500; font-family: Ubuntu, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; font-size: 24px; } .slide-content p { color: #4d4b53; font-weight: 400; font-size: 16px; line-height: 22px; font-family: Ubuntu, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; } ion-button { --background: linear-gradient(to right, #7433a8 0%, #3733ba 105.37%); --border-radius: 32px; --box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); --background-activated: linear-gradient(to right, #5a278b 0%, #2a278b 105.37%); --box-shadow-activated: 0 2px 8px rgba(0, 0, 0, 0.2); width: 100%; font-style: normal; font-weight: 500; font-size: 18px; line-height: 24px; /* identical to box height, or 133% */ text-align: center; letter-spacing: 0.2px; } |
swiper-container { --swiper-pagination-color: #5638cb; /* Цвет активного буллета */ --swiper-pagination-bullet-inactive-color: #E4E2EE; /* Цвет неактивного буллета */ --swiper-pagination-bullet-inactive-opacity: 1; width: 100%; height: 100%; } swiper-slide { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; } .slide-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* Обеспечивает покрытие всего слайда без искажения */ z-index: -1; /* Помещает изображение под текстовый контент */ } .slide-content { z-index: 1; /* Убедитесь, что текстовый контент находится над изображением */ color: white; /* Для лучшей видимости на темном фоне */ display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } .slide-content h2 { color: #5639cb; font-weight: 500; font-family: Ubuntu, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; font-size: 24px; } .slide-content p { color: #4d4b53; font-weight: 400; font-size: 16px; line-height: 22px; font-family: Ubuntu, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; } ion-button { --background: linear-gradient(to right, #7433a8 0%, #3733ba 105.37%); --border-radius: 32px; --box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); --background-activated: linear-gradient(to right, #5a278b 0%, #2a278b 105.37%); --box-shadow-activated: 0 2px 8px rgba(0, 0, 0, 0.2); width: 100%; font-style: normal; font-weight: 500; font-size: 18px; line-height: 24px; /* identical to box height, or 133% */ text-align: center; letter-spacing: 0.2px; }
Я сделал позиционировали блоков с помощью Flexbox и прижал текстовый блок к нижнему краю. Соответственно из-за разной высоты текста получается, что весь блок имеет разную высоту.
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для позиционирования текстового блока на одном уровне в слайдере можно использовать CSS свойство "position" в сочетании с другими свойствами. В зависимости от структуры HTML и CSS вашего слайдера, есть несколько способов достичь этого эффекта.
Один из способов - использовать абсолютное позиционирование для текстового блока внутри слайда. Для этого нужно добавить следующие стили к текстовому блоку:
.text-block { position: absolute; top: 0; left: 0; width: 100%; text-align: center; /* Центрируем текст по горизонтали */ background-color: rgba(255, 255, 255, 0.5); /* Добавляем прозрачный фон */ }
Здесь "position: absolute;" позволяет полностью контролировать позиционирование элемента, "top: 0;" и "left: 0;" выравнивают его по верхнему левому краю слайда, "width: 100%;" устанавливает ширину текстового блока равной ширине слайда.
Если вам нужно выровнять текстовый блок по центру слайда, используйте "text-align: center;". Также можно добавить фон текстовому блоку, чтобы сделать его более выразительным.
Если вам нужно выровнять текстовый блок по вертикали внутри слайда, также можно использовать свойство "top" и "transform" для центрирования:
.text-block { position: absolute; top: 50%; left: 0; width: 100%; text-align: center; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.5); }
Здесь "top: 50%;" сначала перемещает текстовый блок на 50% от верхнего края слайда, а затем "transform: translateY(-50%);" центрирует его по вертикали.
Надеюсь, эти советы помогут вам достичь нужного позиционирования текстового блока в слайдере! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.