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

Question

[saplas]

Сделал вариант без слайдера (сверху) есть отступы(потому что ширина 360px), со слайдером же сливается все в кучу(ширина 380px)
Почему так происходит и как исправить?

<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
      });
    });

Comments

[Сергей delphinpro]

Потому что у него нет соответствующей настройки.
Слайдер отличный, но часто приходится именно поэтому от него отказываться в пользу owl или tns, у которых можно в настройках задать расстояние между слайдами.

[Виталий Першин]

Сергей delphinpro, омг, а сделать отступы внутри слайда не судьба? Из-за такой мелочи которая решается на уровне html/css отказываться... что?

[Сергей delphinpro]

Виталий, отступы будут влиять на размер слайда, т.к. сам слайдер всегда делит свой вьюпорт между слайдами на равные части. Таким образом у вас либо будут ненужные отступы по краям слайдера, либо крайние слайды будут немного других размеров, либо придется прибегать к дополнительным ухищрениям для компенсации этих отступов. Иногда проще сразу сделать npm install tiny-slider и всё.

[Виталий Першин]

Сергей delphinpro, Они будут влиять, только если делать неправильно. Элементарнейший способ, задать размер с учетом отступа:

width: calc(100% - 20px);
margin: 0 10px;

Если это сложно, тогда да, наверно нужно отказываться от библиотеки.

[saplas]

Виталий, и по краям слайдера появляются ненужные отступы.
Пример:

[Сергей delphinpro]

Виталий, Люблю таких умников, как вы =))
А давайте поговорим не о сферических отступах в вакууме, а предметно, на конкретном примере. Вот я даже не поленился сделать его:

https://codepen.io/anon/pen/NVygjd

Для наглядности проблемы заданы жесткие размеры:
картинка 200 в ширину
промежуток 20 пикс
кол-во отображаемых слайдов — 3
отсюда ширина слайдера 200*3+20*2 = 640 пикс

Также для наглядности убран overflow и раскрашены фоны слайдов.

В идеале в видимой части слева и справа не должно быть видно фона слайдов, а промежутки между картинками должны быть ровно 20 пикс, причем по 10 от каждого слайда.

Дерзайте, умный вы наш

PS/ Решение есть, и я писал об этом выше, если внимательно читаете, а не только спорите.

[Виталий Першин]

Сергей delphinpro, Зачем красить фон слайдов, если вам нужен другой размер, используйте обертку. В слике слайд нужно использовать только ради слайда, а уже внутри создавайте свои блоки и кастомизируйе как угодно, проблем не будет.

и по краям слайдера появляются ненужные отступы.

Вы наверно и про отрицательные маржины не слышали, для компенсанции отступов по краям.

Дерзайте, умный вы наш

У вас проблема в подходе, если для вас это слишком умно, ну это ваши проблемы.

[Виталий Першин]

Сергей delphinpro, Давайте объективно, я не пытаюсь показать превосходство над другими слайдерами и т.д.., я просто утверждаю что проблема решаема на уровне стилей и разметки о чем я и написал в первом комментарии, а вы мне пытаетесь доказать безысходность использования слик. В нем есть одна существенная проблема, но совсем не в этой области.

[Сергей delphinpro]

Виталий,

Зачем красить фон слайдов

>> Для наглядности проблемы
(сама проблема описана выше)

Вы наверно и про отрицательные маржины не слышали, для компенсанции отступов по краям.

Я же предложил — предметно. Исправьте пример по ТЗ.

После всего перечитайте еще выше написанные строчки, я для вас их все-таки процитирую:

либо придется прибегать к дополнительным ухищрениям для компенсации этих отступов. Иногда проще сразу сделать npm install tiny-slider и всё.

И перестаньте умничать. Будьте взрослее.

[Сергей delphinpro]

Виталий,

а вы мне пытаетесь доказать безысходность использования слик.

где? дайте мою цитату, где я пытаюсь доказать безысходность использования слик.

[Сергей delphinpro]

Виталий, вот еще один страдалец Как убрать отступ у последнего элемента в Slick slaider?
вместо выбора более подходящего плагина костылит решение "на уровне стилей".
=))

[Виталий Першин]

Для наглядности проблемы

Вы бы для начала прочитали мой ответ, в котором я четко написал, что не нужно вешать стили на сами слайды. Вы сами создали проблему.

Я же предложил — предметно. Исправьте пример по ТЗ.

Предметно я бы полностью сделал свою разметку и выкинул этот говнокод

И перестаньте умничать. Будьте взрослее.

Сорян. Вы столько глупостей пишите, что читаю через строку. То есть вы знаете про отрицательные маржины, но все равно настаиваете что все это ухищрения и проблемы.

[Виталий Першин]

Сергей delphinpro,

где? дайте мою цитату, где я пытаюсь доказать безысходность использования слик.

А к чему тогда такое желание показать проблем, в то время как вы знаете что это решаемо?

(сама проблема описана выше)

Сами себе противоречите

[Сергей delphinpro]

Виталий, ну так проблема же есть. я ее даже проиллюстрировал.
для решения нужно делать лишние движения.
хотя куда проще написать {gutter: 20} в настройках.
Правда ведь?

[Сергей delphinpro]

Виталий,

Предметно я бы полностью сделал свою разметку и выкинул этот говнокод

Отлично. Это тоже подходит.

Может перестанете трепаться, и покажете на деле?
А то так вас можно заподозрить в троллинге.

[Виталий Першин]

Сергей delphinpro,

ну так проблема же есть. я ее даже проиллюстрировал.

Проблемы нет, это просто не жаление понять, как иначе можно решить задачу.

для решения нужно делать лишние движения.
хотя куда проще написать {gutter: 20} в настройках.
Правда ведь?

Конечно, куда проще сменить библиотеку не разобравшись. А в другой библиотеке у вас другая сложность возникнет, будете еще одну искать?

Может перестанете трепаться, и покажете на деле?

Я даже спорить не собирался, это у вас навязчивая идея, что я вам что-то должен доказать.

А то так вас можно заподозрить в троллинге.

Аналогично про вас могу сказать, или вы прикалываетесь или реально не видите очевидного.

Но раз уж начали тратить время. Вот достал из недавнего проекта и немного передал под ваше так называемое тз. Ширина, отступы, еще и адаптация:

Answer 1

[Виталий Першин]

Желательно заливать полноценные рабочие примеры, тогда можно было не только посмотреть, но и поправить.
Вы скорее всего навешали стилей на 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>

Comments

[saplas]

Спасибо, это максимально приблизило меня к решению)

Answer 2

[Андрій Брода]

Исправить можно путём добавления margin`ов для слайдов. Обратите внимание на специфичность, возможно у вас стили перебиваются.

Comments

[saplas]

Тогда для каждого слайда нужно будет делать отдельный margin, чтобы они встали на свое место