Задать вопрос
@saplas
html

Почему slick slider соединяет блоки?

Сделал вариант без слайдера (сверху) есть отступы(потому что ширина 360px), со слайдером же сливается все в кучу(ширина 380px)
Почему так происходит и как исправить? 2441d1d498.png
<div class="container">
		<div class="card-slider">
			
				<div class="portfolio__card">
					<img src="/local/templates/building/img/proekt1.png" alt="" class="img-responsive portfolio__card_img">
					<h3 class="portfolio__card_name">
						Ремонт двухкомнатной
квартиры 74 м<sup>2</sup>
					</h3>
					<p class="portfolio__card_description">
						С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании систем массового участия. 
					</p>
					<span class="porftolio__card_price">от 126 000 руб.</span>
				</div>
			
		
								<div class="portfolio__card">
					<img src="/local/templates/building/img/proekt2.png" alt="" class="img-responsive portfolio__card_img">
					<h3 class="portfolio__card_name">
						Ремонт двухкомнатной
квартиры 74 м<sup>2</sup>
					</h3>
					<p class="portfolio__card_description">
						С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании систем массового участия. 
					</p>
					<span class="porftolio__card_price">от 126 000 руб.</span>
				</div>
			
			
								<div class="portfolio__card">
					<img src="/local/templates/building/img/proekt3.png" alt="" class="img-responsive portfolio__card_img">
					<h3 class="portfolio__card_name">
						Ремонт двухкомнатной
квартиры 74 м<sup>2</sup>
					</h3>
					<p class="portfolio__card_description">
						С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании систем массового участия. 
					</p>
					<span class="porftolio__card_price">от 126 000 руб.</span>
				
			</div>
		</div>
</div>

$(document).ready(function(){
      $('.card-slider').slick({
        slidesToShow: 3
      });
    });
  • Вопрос задан
  • 492 просмотра
16 комментариев
Подписаться 1 Простой 16 комментариев
Решения вопроса 1
Get-Web
@Get-Web Куратор тега CSS
Front-End Developer
Желательно заливать полноценные рабочие примеры, тогда можно было не только посмотреть, но и поправить.
Вы скорее всего навешали стилей на portfolio__card, но вы не учил того, что каждый слайд в слик слайдере имеет свои свойства, в том числе, для правильно работы он обнуляет margin. Правильнее всего добавлять обертку для каждого слайда, а уже внутри делать свои блоки как хотите:

<div class="container">
	<div class="card-slider">
		<div>
			<div class="portfolio__card">
				<img src="/local/templates/building/img/proekt1.png" alt="" class="img-responsive portfolio__card_img">
				<h3 class="portfolio__card_name">
					Ремонт двухкомнатной квартиры 74 м<sup>2</sup>
				</h3>
				<p class="portfolio__card_description">
					С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании
					систем массового участия.
				</p>
				<span class="porftolio__card_price">от 126 000 руб.</span>
			</div>
		</div>
		<div>
			<div class="portfolio__card">
				<img src="/local/templates/building/img/proekt2.png" alt="" class="img-responsive portfolio__card_img">
				<h3 class="portfolio__card_name">
					Ремонт двухкомнатной квартиры 74 м<sup>2</sup>
				</h3>
				<p class="portfolio__card_description">
					С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании
					систем массового участия.
				</p>
				<span class="porftolio__card_price">от 126 000 руб.</span>
			</div>
		</div>
		<div>

			<div class="portfolio__card">
				<img src="/local/templates/building/img/proekt3.png" alt="" class="img-responsive portfolio__card_img">
				<h3 class="portfolio__card_name">
					Ремонт двухкомнатной квартиры 74 м<sup>2</sup>
				</h3>
				<p class="portfolio__card_description">
					С другой стороны новая модель организационной деятельности позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным образом постоянный количественный рост и сфера нашей активности играет важную роль в формировании
					систем массового участия.
				</p>
				<span class="porftolio__card_price">от 126 000 руб.</span>
			</div>
		</div>
	</div>
</div>
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
@AndriyBroda
Исправить можно путём добавления margin`ов для слайдов. Обратите внимание на специфичность, возможно у вас стили перебиваются.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка бота в Telegram (POIZON)
16 апр. 2024, в 06:30
30000 руб./за проект
Исправить ошибку в пагинации 1с-битрикс
16 апр. 2024, в 05:27
500 руб./за проект
Ментор по программированию
16 апр. 2024, в 04:35
10 руб./в час
Ещё заказы