@saplas

Почему 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
      });
    });
  • Вопрос задан
  • 96 просмотров
Решения вопроса 1
Get-Web
@Get-Web
Верстальщик
Желательно заливать полноценные рабочие примеры, тогда можно было не только посмотреть, но и поправить.
Вы скорее всего навешали стилей на 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
Исправить можно путём добавления margin`ов для слайдов. Обратите внимание на специфичность, возможно у вас стили перебиваются.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
26 июн. 2019, в 20:56
10000 руб./за проект
26 июн. 2019, в 20:44
3000 руб./за проект
26 июн. 2019, в 19:34
300 руб./за проект