Я использую 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>
Я использую Splide на своем сайте веб -потока, чтобы создать слайдер сервисов. На рабочем столе он отлично работает, и в мобильном предварительном просмотре на рабочем столе он также работает. Проблема начинается, когда я пытаюсь просматривать его на своем телефоне, содержание на каждом слайд -глюках включает и выходит во время каждого перехода. У меня был весь раздел, который содержит набор Splide Slider для переполнения: скрыто, чтобы он не получил горизонтальную полосу прокрутки, когда я выключил это, он снова работал на мобильном телефоне. сломал его, я также попытался установить Splide__track на определенную ширину, но я все еще получаю проблему горизонтального прокрутки.[code]
.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,
[/code] Как я бы хотел, чтобы мой сайт выглядел, без горизонтальной прокрутки Запись экрана глюка на моем телефоне -> https://drive.google.com/file/d/1gr0oznd2q6qs3x1cblgsksvnpauvpkkkkkbkbkbkbksphrishshsphrishshsphrishshsphispharshispharshasphispharsharsharsharsharsharsharshispharshispharshispharsharshispharshispharshispharshispharbk /> Клянусь, я погуглил и искал сплайдные документы перед тем, как сделать этот пост, пожалуйста, если ответ был очевиден, я бы хотел быть смиренным: ') < /p>