Как заставить работать слайдер на главной странице в режиме fade? Есть решение

Question

Как заставить работать слайдер на главной странице в режиме fade? Есть решение

Хочу сделать, чтобы картинки на слайдере на главной странице не перелистывались, а плавно исчезали и появлялись (например так, сайт не мой). Тема Megashop, настройки слайдера находятся в шаблоне home.html, выглядят они так:

$('.homepage-bxslider').bxSlider( { auto: 'true', mode: 'horizontal', speed: 1500, pause: 5000, autoDelay: 2000, controls: false, autoHover : true, pager: $('.homepage-bxslider li').length > 1 });

За режим прокрутки отвечает mode: 'horizontal'. Когда я делаю режим mode: 'fade', получается такая картина:

есть предположение, что в этом виноваты настройки jquery (источник), я к сожалению в этом не разбираюсь.

Помогите пожалуста разобраться

5 ответов

+1

Ярослав 14 ноября 2015 03:26 #

я же написал, что бывает, когда ставишь mode:'fade'

+1

Markus 14 ноября 2015 03:59 #

сорри, был не внимателен. Не стал вникать в детали, какой то из параметров конфликтует. Оставьте только auto, mode, controls и pager. Если заработает, настраиваете слайдер при помощи удаленных параметров
1

Ярослав 14 ноября 2015 06:25 # Решение
Немного разобрался в проблеме. Дело не в конфликте параметров, а в настройках самого скрипта bxslider.
Во первых, параметр slideZIndex должен быть равным 0, чтобы кнопки управления были всегда видны.
Во вторых, нужно грамотно проставить настойки отображения для значения fade:
```
"fade" == o.settings.mode && (o.children.css({
                    position: "relative",
                    listStyle: "none",
                    display: "block",
                    float: "left", 
                }), 
o.children.eq(o.settings.startSlide).css({
                    display: "block",
                    listStyle: "none",
                    position: "relative",
                    float: "left", 
})
```
Но все равно получается не то, потому что получается следующее:
1. Первый слайд плавно затухает, и плавно появляется второй
2. Второй слайд плавно затухает, и резко появляется третий
Теперь надо сделать, чтобы следующие слайды плавно появлялись. Этого я пока не понял, и поэтому прошу о помощи, если кто хорошо разбирается в JavaScript

Добавить ответ

**Markus** · Answer 1

1

Markus 14 ноября 2015 03:20 #

mode:'fade'

**®man** · Answer 2

аналогично, разбираюсь с настройками

заменил пережатый скрипт на оригинал (http://bxslider.com/)

и в строчке:

// if "fade" mode, add positioning and z-index CSS
    if(slider.settings.mode == 'fade'){
        slider.children.css({
        //position: 'absolute', <<< закоментировал это свойство
        zIndex: 0,
        display: 'none'
    });

"fade" заработал без дополнительных настроек,

но вот эффект перехода действительно грубый ((

как я понял, появление нового слайда задано через свойство z-index, которое устанавливается сразу, без возможности плавного проявления