Задать вопрос
Tolly
@Tolly
css

Зачем слайдеру Swiper задавать ширину 1px для класса swiper-wrapper?

Не могу понять, зачем слайдеру Swiper задавать ширину 1px, для класса swiper-wrapper.

https://codepen.io/workcode/pen/WYEovd

Видно, что блок aside не вошел.
Если прописать
.swiper-wrapper {
	width: 1px;
}

слайдер и aside вписываются в ширину экрана.
Это хак или фишка?

PS. codepen не корректно показывает, лучше скопировать код ниже и вставить в файл:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css">
	<link rel="stylesheet" href="style.css">
</head>
<body>

	<div class="flex">
		<main>
			<div class="slider">
				<!-- Swiper -->
			  <div class="swiper-container">
			   	<div class="swiper-wrapper">

						<!-- Slide 1 -->
			     	<div class="swiper-slide">
							<div class="flex">
								<div class="slider_image" style="background-image: url('https://picsum.photos/600/800/?gravity1');">
								</div> <!-- /slider_image -->
								<div>
									<h1>Lorem ipsum dolor sit amet.</h1>
									<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни силуэт, даль гор которой назад которое диких, деревни текст?.</p>
								</div>
							</div> <!-- /flex -->
			     	</div> <!-- /swiper-slider -->

						<!-- Slide 2 -->
			     	<div class="swiper-slide">
							<div class="flex">
								<div class="slider_image" style="background-image: url('https://picsum.photos/600/800/?gravity2');">
								</div> <!-- /slider_image -->
								<div>
									<h1>Lorem ipsum dolor sit amet.</h1>
									<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Жизни силуэт, даль гор которой назад которое диких, деревни текст?.</p>
								</div>
							</div> <!-- /flex -->
			     	</div> <!-- /swiper-slider -->

				  </div> <!-- /swiper-wrapper -->
				</div> <!-- /swiper-container -->
			</div> <!-- /slider -->
		</main>
		<aside>
			Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Буквенных, жизни выйти пунктуация? Города подпоясал знаках даже жизни, живет переулка деревни образ коварных, решила всеми, встретил до заманивший, необходимыми даль предупреждал жаренные. Раз над грустный толку, единственное решила страна его запятых выйти но маленькая текст она последний свой курсивных обеспечивает всемогущая необходимыми, на берегу даль лучше диких рыбного своего вершину прямо! Инициал своих прямо, за запятой до. Семантика образ лучше великий снова речью, переписывается текст, взгляд подпоясал, что залетают инициал вопрос страна?
		</aside>
	</div>


	<!-- Swiper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
    });
  </script>
</body>
</html>


style.css
html, body {padding: 0; margin: 0;}
.flex {	display: flex; }
main {	width: 100%; }
aside {	width: 350px;	background-color: #5f9; }

.swiper-wrapper {	width: 1px; }

.slider {	background-color: #eee;	padding: 10px; }

.slider_image {
	margin-right: 20px;
	flex-shrink: 0;
	width: 40%;
	min-height: 280px;
	background: no-repeat center center;
	background-size: cover; }

.slider h1 { font-size: 23px; }
.slider p {	font-size: 18px; }
  • Вопрос задан
  • 1338 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
Tolly
@Tolly Автор вопроса 
main {
    flex: 0 0 auto;
    overflow: hidden;
}

aside {
    flex: 1 1 600px;
    background-color: #5f9;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
AngReload
@AngReload
Кратко о себе
Это свойство в любом случае перебивается width: 100% из подключенного swiper.min.css
Что с ним, что без - никакой разницы не вижу, присутствует горизонтальная прокрутка. Оно просто не работает.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
Верстальщик HTML
MST
от 450 $
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Распознавание текста и образов, OCR
07 янв. 2025, в 19:55
30000 руб./за проект
Помощь с исходниками на unity
07 янв. 2025, в 19:38
20000 руб./за проект
Дизайн многостраничного сайта-информационной системы в Figma
07 янв. 2025, в 19:23
11000 руб./за проект
Ещё заказы