BX-Слайдер Flashcards
Какой был интересный случай с transform: rotateZ(180deg) в этом слайдере?
Интересный случай: transform: rotateZ(180deg) заданная для .bx-wrapper .bx-next
применилась на некоторые другие объекты: навбар и контент второго экрана, из-за чего они уехали вправо на 3000 пикселей, причём только в мобильном режиме.
Если в BX-слайдере используется slideMargin, что нужно добавить самим блокам?
Если в BX-слайдере используется slideMargin, то самим блокам тоже не помешает добавить такой же марджин справа, особенно если на экране сразу несколько слайдов.
Какие свойства имеют изображения в BX-слайдере?
Все изображения в BX-слайдере имеют свойство display:block;
Если в BX-слайдере используется сразу несколько слайдов и не все уменьшаются, как поступить?
Если в BX-слайдере используется сразу несколько слайдов и не все уменьшаются, проверить, не жмёт-ли bx-wrapper-у max-width и перебить его !important;-ом
Если в BX-слайдере используется сразу несколько слайдов и его нужно адаптировать под разные экраны, что нужно делать?
Если в BX-слайдере используется сразу несколько слайдов и его нужно адаптировать под разные экраны, использовать только пиксели в стилях (содержимое, bx-wrapper-у max-width) и скрипт (количество слайдов, их ширина в пикселях).
Если в слайдере только картинки, стоит ли их обернуть блоками и зачем?
Стоит, иначе они будут растянуты до ширины, указанной в переменной slideWidth или растянутsы на 100% экрана. Также, в slideWidth в таком слайдере указывать по ширине самой большой картинки.
Если слайдеру нужно задать ширину, отличную от дефолтной, что делать? И чему решение этой задачи может помешать?
Если слайдеру нужно задать ширину, отличную от дефолтной, нужно задавать max-width: px!important; НО! Это помешает изменению minSlides и maxSlides для разных размеров экранов;
Иногда изображениям в слайдере не лишним будет добавить:
.bx-wrapper img {
margin: auto!important;
}
Если не работают/не появляются кнопки вперёд/назад, что делать?
Если не работают/не появляются кнопки вперёд/назад:
- Проверить, скопирован ли спрайт с ними в папку с изобраениямиж
- Проверить, чтобы в цсс файле слайдера имя папки с изображениями совпадало с именем своей папки с изображениями, иначе, поменять в цсс файле слайдера на свою.
Если не работают пейджеры на одном из слайдеров на странице:
Если не работают пейджеры на одном из слайдеров на странице: наверное, изменён wrapperClass: ‘bx-wrapper’ в js на какоё-то другой. Убрать/вернуть стандартный bx-wrapper.
Если элементы, правильно спозиционированные до подключения слайдера с помощью флекс, поплыли, будучи уже внутри слайда,проверить:
скорее всего display:flex; перечёркнуто в консоли. Добавить к нему !important;
Если блок, задуманный как 1 слайд, после подключения слайдера, потерял ширину, что делать?
Если блок, задуманный как 1 слайд, после подключения слайдера, потерял ширину, его (каждый слайд) нужно обернуть ещё одним дивом без стилей. Слайдер сам задаёт ширину слайдам в пикселях, и этот новый див возьмёт эту ширину на себя.
Что важно помнить о ширине слайдера и его родителя?
Слайдер может растягиваться на всю ширину родителя (просто помнить).
Если нужно спозиционировать пейджер,
Если нужно разукрасить пейджер,
Если нужно изменить контролы:
смотреть мануал к BX_SLIDER
Если последний слайдер нависает над первым и/или остальными, что делать?
скорее всего, это его клон (созданный плагином специально), поможет либо infiniteLoop: false - это одна из опций слайдера, но тогда не будет перехода на первый слайд после последнего, либо .bx-clone {display:none;}.
