Почему не работают два BXslider на странице?

Question

Вадим @Darseed

JavaScript

Почему не работают два BXslider на странице?

Всем привет! На странице есть два BXslider по примеру
и они не работаю если оба запущены.

есть следующая разметка основного(первого) слайдера

<div class="slider-pager-wrap">
                    <div class="arrow-wrap arrow-wrap--prev" id="slider-prev"></div>
                    <ul class="slider-pager" id="bx-pager">
                        <li><a data-slide-index="0" href=""><img src="/img/tovar-page.png" alt="tovar-page.png"></a></li>
                        <li><a data-slide-index="1" href=""><img src="/img/tovar-page.png" alt="tovar-page.png"></a></li>
                        <li><a data-slide-index="2" href=""><img src="/img/tovar-page.png" alt="tovar-page.png"></a></li>
                    </ul>
                    <div class="arrow-wrap arrow-wrap--next" id="slider-next"></div>
                </div>
                <div class="bxslider-wrap">
                    <ul class="bxslider" id="bxslider">
                        <li class="slide"><img src="/img/tovar-page.png" alt="tovar-page.png" /></li>
                        <li class="slide"><img src="/img/tovar-page.png" alt="tovar-page.png" /></li>
                        <li class="slide"><img src="/img/tovar-page.png" alt="tovar-page.png" /></li>
                    </ul>
                </div>

и разметка второго слайдера который находится в модальном окне

<div class="slider-pager-wrap">
                <div class="arrow-wrap arrow-wrap--prev" id="slider-prev-modal"></div>
                <ul class="slider-pager-modal" id="bx-pager-modal">
                    <li><a data-slide-index="0" href=""><img src="/img/tovar-page.png" alt="tovar-page.png"></a></li>
                    <li><a data-slide-index="1" href=""><img src="/img/tovar-page.png" alt="tovar-page.png"></a></li>
                    <li><a data-slide-index="2" href=""><img src="/img/tovar-page.png" alt="tovar-page.png"></a></li>
                </ul>
                <div class="arrow-wrap arrow-wrap--next" id="slider-next-modal"></div>
            </div>
            <div class="bxslider-wrap-modal">
                <ul class="bxslider-modal" id="bxslider-modal">
                    <li class="slide"><img src="/img/tovar-page.png" alt="tovar-page.png" /></li>
                    <li class="slide"><img src="/img/tovar-page.png" alt="tovar-page.png" /></li>
                    <li class="slide"><img src="/img/tovar-page.png" alt="tovar-page.png" /></li>
                </ul>
            </div>

разметка одинаковая изменены только ID и названия классов, JS следующий

$("#bxslider").bxSlider({
    mode: "vertical",
    pagerCustom: '#bx-pager',
    slideWidth: 438,
    minSlides: 1,
    maxSlides: 1,
    slideMargin: 5,
    nextSelector: '#slider-next',
    prevSelector: '#slider-prev',
    nextText: '<img src="/img/arrow-slider-down.png" alt="arrow-slider-down.png">',
    prevText: '<img src="/img/arrow-slider-up.png" alt="arrow-slider-up.png">'
});

$("#bxslider-modal").bxSlider({
    mode: "vertical",
    pagerCustom: '#bx-pager-modal',
    slideWidth: 438,
    minSlides: 1,
    maxSlides: 1,
    slideMargin: 5,
    nextSelector: '#slider-next-modal',
    prevSelector: '#slider-prev-modal',
    nextText: '<img src="/img/arrow-slider-down.png" alt="arrow-slider-down.png">',
    prevText: '<img src="/img/arrow-slider-up.png" alt="arrow-slider-up.png">'
});

Если оставить на странице только один слайдер то все работает, но если попытаться запустить два то не работает.
В консоль выдает такую ошибку

В чем может быть проблема ?