Задать вопрос
@atabrakadabra

Как для мобильных сделать правильную нумерацию?

Есть слайдер
Для пк выводится в 3 колонки
Для мобильных в 1 колонку
Через before задана нумерация блоков
var swiper = new Swiper(".keysstat", {
      slidesPerView: 3,
			spaceBetween: 10,
      slidesPerColumn: 2,
			touchReleaseOnEdges: true, 
			longSwipesMs: 100,
				
					

					breakpoints: {
						769: {
							slidesPerView: 1,
							slidesPerColumn:5,
						
						},
						1024: {
							slidesPerView: 3,
							slidesPerColumn: 2,
						},
					},
				});


.slist{
			position: relative;


			.keysstat{
				counter-reset: slide-counter;
				width: 100%;
				height: auto;
				overflow: hidden;
				@media screen and (max-width:769px) {	
					height:auto;
					
				}
				 .swiper-wrapper {
					@media screen and (max-width:769px) {	
						padding-bottom: 60px;
						
						
					}
					
					.swiper-slide {	
						background: #f5f4f4;
						
						display: flex;
						align-items: center;
						height: 100px!important;
						
						@media screen and (max-width:769px) {	
							height:100px;
							
							
						}
						a{
							display: block;
							padding: 20px;
							color: #000;
							font-weight: 700;
							&::before {
								content: counter(slide-counter, decimal-leading-zero) " "; 
								counter-increment: slide-counter;
								font-size: 20px;
								font-weight: 900;
								color: #999;
								display: block;
								margin-bottom: 5px;
								@media screen and (max-width:769px) {	
									font-size: 17px;
									
								}


							}
						}
					}
				}
				
				
			}

		}


для пк все ок
блоки идут
1 2 3
4 5 6
а вот для мобильных

4 5 3
1 2 4

как сделать, что бы нумерация правильно работала для моб?
  • Вопрос задан
  • 37 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
Я бы повесил слушателя на смену слайда и скриптом навешивал цифры. У свайпера есть свойство содержащее реальный номер слайда без учета клонов (посмотрите в документации), от него и отталкивался бы.

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

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

Похожие вопросы