Почему не 100%?

Question

[Sashqa]

Есть сайт
на главной слайдер. swiper-slide должен быть 100%, почему он урезает на 20px?

Comments

[Роман]

у меня и свайпер-контейнер и свайпер-слайд одинаково равны 100% или 1353пкс в абсолюте

[Александр Таратин]

Вот это пестротища... Сделайте прозрачные элементы более непрозрачными. Ничего же не разглядеть.

Answer 1

[Valery]

Заверните вызов слайдера в $(document).ready():

$(document).ready(function(){
	    	var swiper = new Swiper('.swiper-container', {
	        pagination: '.swiper-pagination',
	        nextButton: '.swiper-button-next',
	        prevButton: '.swiper-button-prev',
	        simulateTouch: false,
	        paginationClickable: true,
	        spaceBetween: 30,
	        centeredSlides: true,
	        autoplay: 5000,
	        loop: true,
	        autoplayDisableOnInteraction: false,
});

Comments

[Sashqa]

ничего не поменялось )

[Valery]

Упс, в конце потерялись еще одни закрывающие скобки
});

Сохраняю вашу страницу локально, заворачиваю скрипт в $(document).ready() — проблема решается

[Sashqa]

Valery: Нашел в чем была проблема. Спасибо

Answer 2

[Андрей Гончаров]

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

Answer 3

[Алексей Рытиков]

html,body {
  overflow-y:hidden;
}

все равно верстка на скролл не рассчитана, а проблема должна уйти

Comments

[Sashqa]

Нельзя убирать скролл)

[teotlu]

Sashqa: а вы, если у слайдера есть событие/коллбэк после инициализации, просто в нём добавьте скролл обратно. Например, навесив на body класс "scroll".

Answer 4

[Денис Инешин]

Да есть зазор справа. Проблема скорее всего в том, что вначале строится слайдер, а потом уже убирается вертикальный скролл бар, после которого не происходит никакого события "resize" и слайдер себя не пересчитывает.

Answer 5

[teotlu]

Попробуйте либо то, что предложил Valery , либо после инициализации свайпа триггернуть resize у window:
$(window).trigger('resize');

Comments

[Sashqa]

Тоже не помогло