Проблемы по мобильности с переполнением: скрытый и разбитый слайдерJavascript

Форум по Javascript
Ответить
Anonymous
 Проблемы по мобильности с переполнением: скрытый и разбитый слайдер

Сообщение Anonymous »

Я использую Splide на своем сайте веб -потока, чтобы создать слайдер сервисов. На рабочем столе он отлично работает, и в мобильном предварительном просмотре на рабочем столе он также работает. Проблема начинается, когда я пытаюсь просматривать его на своем телефоне, содержание на каждом слайд -глюках включает и выходит во время каждого перехода. У меня был весь раздел, который содержит набор Splide Slider для переполнения: скрыто, чтобы он не получил горизонтальную полосу прокрутки, когда я выключил это, он снова работал на мобильном телефоне. сломал его, я также попытался установить Splide__track на определенную ширину, но я все еще получаю проблему горизонтального прокрутки.

Код: Выделить всё


.splide__track {
overflow: visible;
}





function slider1() {

let splides = $('.slider_model');
for ( let i = 0, splideLength = splides.length; i < splideLength; i++ ) {
new Splide( splides[ i ], {
// Desktop on down
autoplay: true,
interval: 3000,
perPage: 3,
perMove: 1,
focus: 'center', // 0 = left and 'center' = center
type: 'loop', // 'loop' or 'slide'
gap: '.5em', // space between slides
arrows: 'false', // 'slider' or false
pagination: 'false', // 'slider' or false
speed : 1000, // transition speed in miliseconds
dragAngleThreshold: 30, // default is 30
autoWidth: false, // for cards with differing widths
rewind : false, // go back to beginning when reach end
rewindSpeed : 400,
waitForTransition : true,
updateOnMove : true,
trimSpace: false, // true removes empty space from end of list
breakpoints: {
991: {
perPage: 2,
// Tablet
},
767: {
// Mobile Landscape
perPage: 2,

},
479: {
// Mobile Portrait
perPage: 1,
}
}
} ).mount();
}

}
slider1();


< /code>
Это анимация CSS для активного слайда < /p>


.splide__slide.is-active .service_slider-content{
opacity: 100%;
transform: translate(0%);
}

.splide__slide.is-active .slider_mood{
transform:scale(1);
}


Как я бы хотел, чтобы мой сайт выглядел, без горизонтальной прокрутки
Запись экрана глюка на моем телефоне -> https://drive.google.com/file/d/1gr0ozn ... shispharbk /> Клянусь, я погуглил и искал сплайдные документы перед тем, как сделать этот пост, пожалуйста, если ответ был очевиден, я бы хотел быть смиренным: ') < /p>

Подробнее здесь: https://stackoverflow.com/questions/796 ... ide-slider
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»