Как сделать слайдер со сменяющимся текстом внутри?
Всем привет! Возникла проблем с тем, что при вёрстке слайдера (Slick-слайдера, чтобы быть точной) текст, должный располагаться на первом слайдере уезжает на второй. Как с этим можно бороться?
<div class="header__slider"> <div class="header__slider-item"> <div class="header__slider-img"> <img src="./img/slide-1.jpg" alt="картинка"> </div> <div class="header__slider-text"> <p>Черный, цветной гранит</p> <p>Плитка полированная</p> <p>В наличии</p> </div> </div> <div class="header__slider-item"> <div class="header__slider-img"> <img src="./img/slide-2.jpg" alt="картинка"> </div> <div class="header__slider-text"> <p>Столбы, навершия, шары, вазы в наличи и под заказ</p> </div> </div> </div> |
<div class="header__slider"> <div class="header__slider-item"> <div class="header__slider-img"> <img src="./img/slide-1.jpg" alt="картинка"> </div> <div class="header__slider-text"> <p>Черный, цветной гранит</p> <p>Плитка полированная</p> <p>В наличии</p> </div> </div> <div class="header__slider-item"> <div class="header__slider-img"> <img src="./img/slide-2.jpg" alt="картинка"> </div> <div class="header__slider-text"> <p>Столбы, навершия, шары, вазы в наличи и под заказ</p> </div> </div> </div>
.header__slider { min-width: 0; position: relative; z-index: 2; } .header__slider-img { width: 100%; } .header__slider-text { display:block; position: absolute; z-index: 15; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } |
.header__slider { min-width: 0; position: relative; z-index: 2; } .header__slider-img { width: 100%; } .header__slider-text { display:block; position: absolute; z-index: 15; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
Что нужно
И что у меня
Дополнительно:
Учить основы CSS - с чем едят свойство position.
В данном случае для вас неожиданностью является поведение свойства position: absolute; у контейнера .header__slider-text.
Чтобы абсолютное позиционирование было относительно слайда, дайте контейнеру слайда .header__slider-item свойство position: relative;
- Спасибо. А я мозг сломала и не понимала, в чём ошибка. Помогло.
- oksana_melikhova, а ещё лучше не использовать для этого абсолют. Флексы, гриды в помощь.
- Ankhena, Не подскажете, как это возможно организовать? Лучше со статьёй)
Я представляю, как флекссы и гриды использовать вне слайдера, но как на нём это сделать? - oksana_melikhova, точно так же, как и без него.
- Ankhena, Спасибо, попробую намудрить чего дельного
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания слайдера со сменяющимся текстом внутри, можно использовать HTML, CSS и JavaScript. Вот простой пример реализации слайдера с помощью jQuery:
1. HTML:
```html
Text 1
Text 2
Text 3
```
2. CSS:
```html
.slider {
width: 100%;
overflow: hidden;
}
.slide {
display: none;
}
.active {
display: block;
}
```
3. JavaScript (с использованием jQuery):
```html
$(document).ready(function(){
var currentIndex = 0;
var slides = $('.slide');
function showSlide(index) {
slides.removeClass('active');
slides.eq(index).addClass('active');
}
function nextSlide() {
currentIndex++;
if(currentIndex >= slides.length) {
currentIndex = 0;
}
showSlide(currentIndex);
}
setInterval(nextSlide, 3000); // менять слайд каждые 3 секунды
});
```
В данном примере слайдер будет переключать изображения и текст каждые 3 секунды. Вы можете настроить время смены слайдов, стилизацию слайдера и добавить дополнительный функционал в зависимости от ваших потребностей.