Как заставить работать слайдер на главной странице в режиме 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 (источник), я к сожалению в этом не разбираюсь.

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

3 ответа

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

    mode:'fade'

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

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

      • +1
        Markus 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

  • 1
    ®man 8 мая 2016 09:56 #

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

    заменил пережатый скрипт на оригинал (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, которое устанавливается сразу, без возможности плавного проявления

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

Чтобы добавить комментарий, зарегистрируйтесь или войдите