Задать вопрос
@ItWorld
javascript

Картинка повторяется в слайдере. Как исправить?

Здравствуйте. Имеем следующий слайдер: https://jsfiddle.net/9tvuo0my/

Как видите при большой ширине картинка начинает повторятся.

Подскажите, как сделать так, чтобы:

1. Картинка просто была по середине и не повторялась.

Или

2. Чтобы картинка просто занимала всю ширину без повторения.

Заранее спасибо.
  • Вопрос задан
  • 555 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 3
AleksandrB
@AleksandrB
Совсем недавно вывел "Hello world"
Для класса со слайдером
background-repeat: no-repeat;
background-size: cover;

Большее о background
Большее о background size
Ответ написан
3 комментария
3 комментария
@freekirill
Пишу под Битрикс 
.slide:nth-of-type(1) {
 background: url(https://static-pss-eu.wgcdn.co/shop/media/carousel/86/1b/861b8481504e45a6a6a5b838286a5239.jpg) no-repeat center;
}
.slide:nth-of-type(2) {
 background: url(https://static-pss-eu.wgcdn.co/shop/media/carousel/86/1b/861b8481504e45a6a6a5b838286a5239.jpg) no-repeat center;
}
.slide:nth-of-type(3) {
 background: url(https://static-pss-eu.wgcdn.co/shop/media/carousel/86/1b/861b8481504e45a6a6a5b838286a5239.jpg) no-repeat center;
}
.slide:nth-of-type(4) {
 background: url(https://static-pss-eu.wgcdn.co/shop/media/carousel/86/1b/861b8481504e45a6a6a5b838286a5239.jpg) no-repeat center;
}
.slide:nth-of-type(5) {
 background: url(https://static-pss-eu.wgcdn.co/shop/media/carousel/86/1b/861b8481504e45a6a6a5b838286a5239.jpg) no-repeat center;
}


Вот так в CSS нужно поменять, задав 2 параметра no-repeat - не дублировать center-распологать по центру
Ответ написан
Комментировать
Комментировать
@danilr
Чтобы не дублировать в каждый child слайдера, лучше добавьте так
.slide {
 background-repeat: no-repeat;
 background-position: center;
}

так будет Выглядеть
Или второй вариант( как по мне - растягивать картинки - не лучший вариант):
.slide {
 background-position: center;
 background-size: cover;
}

Вот так
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Убрать подпись с печати, в идеале перенести в вектор
19 апр. 2024, в 12:24
1000 руб./за проект
Доработать сайт на React + Nest
19 апр. 2024, в 12:05
1500 руб./в час
Разработать программу в CodeSys
19 апр. 2024, в 12:00
250 руб./за проект
Ещё заказы