Как исправить ошибку в слайдере bxslider?

Question

[Ghost_Bear]

Есть сайт
Спускаемся до блока "Эти квартиры мы уже отремонтировали"

При нажатии на картинку или на кнопку "Смета проекта" всплывает модальное окно, в котором и находится проблемный слайдер. Изображение на слайдере и первая миниатюра не соответствуют. Отображается изображение последней миниатюры. Но когда начинаешь листать, все в порядке.

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

//Создаю слайдер
        $('.tips_slider').each(function(){
            id = $(this).data("idfolio");

            $('#folio-slider_' + id).bxSlider({
                pagerCustom: '#folio-slider-pager_' + id,
                onSlideNext: function(){
                    katiaslider($(this), 'next');
                },
                onSlidePrev: function(){
                    katiaslider($(this), 'prev');
                }
            });
        });
        
        //Функции расширяющие возможности слайдера
        function repeatHtml(id, index)
        {
            //alert($(('.title_' + id + '_' + index)).html());
            $('#tips_' + id + ' .tips_title h3').html($(('.title_' + id + '_' + index)).html());
            $("#price_table_" + id).html($(('.list_' + id + '_' + index)).html());
        }
        
        function katiaslider(th, np)
        {   
            pgr = th.attr('pagerCustom');
            id = $(pgr).data('id');
            childs = $(pgr).children('a');

            max = childs.size();

            $.makeArray(childs).forEach(function (item, i) {
                if (childs.eq(i).attr('class') == 'active')
                {
                    if (np == 'next')
                    {
                        index = (childs.eq(i).data('slide-index') + 1);
                        if (index > max-1) index = 0;
                            repeatHtml(id, Number(index)+1);
                    }

                    if (np == 'prev')
                    {
                        index = (childs.eq(i).data('slide-index') - 1);
                        if (index<0) index = max-1;
                           repeatHtml(id, Number(index)+1);
                    }
                }
            });
        }
        
        $('.folio-slider-pager a').click(function(){
            repeatHtml($(this).data('id'), Number($(this).data('slide-index'))+1);
        });

        //Создаю модальные окна
        $( ".folioModal" ).click(function() {
            target = $(this).data('target');
            mwidth = $(this).data('mwidth');
            if (!mwidth) mwidth=950;


            $('#' + target).dialog({
                autoOpen: false,
                closeOnEscape: true,
                closeOnClick: true,
                dialogClass: "folioModal",
                width: mwidth,
                height: 'auto',
                modal: true
            });

            $('#' + target).dialog( "open" );

            return false;
        });

        //Принудительно закрывать на перекрывающий слой
        $(document).on('click', '.ui-widget-overlay', function(){
            $(".ui-dialog-titlebar-close").trigger('click');
        });

Comments

[Arman]

1. Где var'ы? =) глюков отловите с этим
2. Верстку сами делаете? Можете рядом с data-target сделать что-то вроде data-main-photo-index?
Просто при клике не знаете какая главная фотка, вот если бы знали, то можно было отправить чтоб открыли нужную фотографию

[Ghost_Bear]

Arik: Нет, я к этому сайту вообще не причастен. Понравился данный блок. Сделал тоже самое, потом заметил проблемы. Стало интересно разобраться. Спасибо, буду пробовать

[Ghost_Bear]

Arik: Так и не разобрался... Не могли бы показать как и где прописать data-main-photo-index?

[Arman]

Ghost_Bear: у вас генерица примерно такая верстка ... вот надо найти код, где собирается эта верстка, видно что надо открыть, видно какая картинка главная, значит скорее всего можно сделать что-то вроде

[Arman]

Ghost_Bear: тут оказывается можно тэги использовать, в общем вам надо найти код который собирает этот блок

[Ghost_Bear]

Arik: спасибо Вам! Меня как будто осенило )))) Я сразу нашел, что за вывод данной картинки отвечает класс .bx-clone. Нашел в файле jquery.bxslider.js такую строчку

var slicePrepend = slider.children.slice(-slice).clone().addClass('bx-clone');

и заменил ее на

var slicePrepend = slider.children.slice(0, slice).clone().addClass('bx-clone');

И все, готово. Правда заметил, что если сразу листать слайдер назад, то не листается. Ну это ладно )

Answer 1

[imdeveloper]

Установите в параметрах startSlide на нужны при инициализации