Изображение слайд-шоу взрывается при загрузке страницы

Я только что добавил слайдер и карусель на домашнюю страницу своего веб-сайта Volusion. Однако, когда я заходил на страницу, первое изображение карусели увеличивалось до огромных размеров (исходный размер всего 180 x 270) и дважды мигало. Поэтому я просмотрел код и удалил строку:

<script src="/v/vspfiles/templates/192/homepage/js/jquery.js" type="text/javascript"></script>

Потому что я подумал, может быть, он пытается дважды загрузить javascript или что-то в этом роде.

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

Вот страница, на которой это происходит: http://www.wallsrepublic.com

Весь соответствующий код, который у меня есть на моей домашней странице, приведен ниже:

 <script src="/v/vspfiles/templates/192/homepage/js/mobilyslider.js" type="text/javascript"></script>
<script src="/v/vspfiles/templates/192/homepage/js/init.js" type="text/javascript"></script>

Для основного слайдера:

    <link rel="stylesheet" href="http://www.wallsrepublic.com/v/slider/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://www.wallsrepublic.com/v/Slider/jquery.flexslider.js"></script>`

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$(".flexslider").flexslider();
});


$(window).load(function() {
  $(".flexslider").flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 4
  });
});
</script>

<div class="flexslider" style="width:auto;overflow:hidden;">
<ul class="slides">
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm' ><img alt='Home Wallpaper' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Murals' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide2-1.jpg" height='452' width='975' border='0' /></a>
</li>
<li>
<a href='http://www.wallsrepublic.com/home-wallpapers-online-s/1814.htm'><img alt='Wallpaper Sale' src="http://www.wallsrepublic.com/v/vspfiles/slider/slide3.jpg" height='452' width='975' border='0' /></a>
</li>
</ul>
</div>

Для проблемной карусели:

    <script src="http://wallsrepublic.com/v/carousel/amazingcarousel.js"></script>
    <link rel="stylesheet" type="text/css" href="http://wallsrepublic.com/v/carousel/initcarousel-1.css">
    <script src="http://wallsrepublic.com/v/carousel/initcarousel-1.js"></script>


<!-- PRODUCT CAROUSEL -->
<div id="amazingcarousel-container-1">
    <div id="amazingcarousel-1" style="display:block;position:relative;width:100%;max-width:900px;margin:0px auto 0px;">
        <div class="amazingcarousel-list-container">
            <ul class="amazingcarousel-list">
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-damask-wallpaper-p/r2067-parent.htm" title="GOLD DAMASK   " ><img src="http://wallsrepublic.com/v/carousel/1.png"  alt="GOLD DAMASK   " /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">GOLD DAMASK  </div>
    <div class="amazingcarousel-description">$159 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/grey-overlay-wallpaper-p/s43712-parent.htm" title="GREY OVERLAY    " ><img src="http://wallsrepublic.com/v/carousel/2.png"  alt="GREY OVERLAY  " /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">GREY OVERLAY </div>
    <div class="amazingcarousel-description">$89 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-white-dogstooth-wallpaper-p/r2542-parent.htm" title="BLACK & WHITE DOGSTOOTH " ><img src="http://wallsrepublic.com/v/carousel/3.png"  alt="BLACK & WHITE DOGSTOOTH   " /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">BLACK & WHITE DOGSTOOTH  </div>
    <div class="amazingcarousel-description">$119 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/brown-fawn-wallpaper-p/r2339-parent.htm" title="BROWN FAWN " ><img src="http://wallsrepublic.com/v/carousel/4.png"  alt="BROWN FAWN    " /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">BROWN FAWN   </div>
    <div class="amazingcarousel-description">$139 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/R1373-p/r1373-parent.htm" title="SERENITY SAND" ><img src="http://wallsrepublic.com/v/carousel/5.png"  alt="SERENITY SAND" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">SERENITY SAND</div>
    <div class="amazingcarousel-description">$149 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/taupe-stone-modern-residential-wallpaper-R1875-p/r1875-parent.htm" title="BLOCK-STONE GREY" ><img src="http://wallsrepublic.com/v/carousel/6.png"  alt="BLOCK-STONE GREY" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">BLOCK-STONE GREY</div>
    <div class="amazingcarousel-description">$79 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/marsala-running-brick-wallpaper-p/r2587-parent.htm" title="MARSALA RUNNING BRICK" ><img src="http://wallsrepublic.com/v/carousel/7.png"  alt="MARSALA RUNNING BRICK" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">MARSALA RUNNING BRICK</div>
    <div class="amazingcarousel-description">$79 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/geometric-gold-residential-wallpaper-R1861-p/r1861-parent.htm" title="TIA GOLD" ><img src="http://wallsrepublic.com/v/carousel/8.png"  alt="TIA GOLD" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">TIA GOLD</div>
    <div class="amazingcarousel-description">$119 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/antique-world-map-mural-p/m9167-parent.htm" title="ANTIQUE WORLD MAP MURAL" ><img src="http://wallsrepublic.com/v/carousel/9.png"  alt="ANTIQUE WORLD MAP MURAL" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">ANTIQUE WORLD MAP MURAL</div>
    <div class="amazingcarousel-description">$399 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/blue-wood-pattern-residential-wallpaper-R1878-p/r1878-parent.htm" title="BRUSHED WOOD BLUE" ><img src="http://wallsrepublic.com/v/carousel/10.png"  alt="BRUSHED WOOD BLUE" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">BRUSHED WOOD BLUE</div>
    <div class="amazingcarousel-description">$89 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/black-and-white-lattice-wallpaper-p/r2548-parent.htm" title="BLACK & WHITE LATTICE" ><img src="http://wallsrepublic.com/v/carousel/11.png"  alt="BLACK & WHITE LATTICE" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">BLACK & WHITE LATTICE</div>
    <div class="amazingcarousel-description">$119 USD</div>
</div>                    </div>
                </li>
                <li class="amazingcarousel-item">
                    <div class="amazingcarousel-item-container">
<div class="amazingcarousel-image"><a href="http://www.wallsrepublic.com/gold-victorian-wallpaper-p/s43751-parent.htm" title="GOLD VICTORIAN" ><img src="http://wallsrepublic.com/v/carousel/12.png"  alt="GOLD VICTORIAN" /></a></div>
<div class="amazingcarousel-text">
    <div class="amazingcarousel-title">GOLD VICTORIAN</div>
    <div class="amazingcarousel-description">$149 USD</div>
</div>                    </div>
                </li>
            </ul>
            <div class="amazingcarousel-prev"></div>
            <div class="amazingcarousel-next"></div>
        </div>
        <div class="amazingcarousel-nav"></div>
    </div>
</div>

Раньше у меня были файлы javascript и css в заголовке моего шаблона, но тогда слайд-шоу не работали, поэтому мне пришлось переместить их прямо на домашнюю страницу.

Любая помощь будет оценена по достоинству.

Jessica Rodriguez 05.03.2015 источник

comment

вместо окна.загрузить. Попробуйте использовать готовый дом jquery. $(документ).готовый(функция() {}); - dowomenfart 05.03.2015

comment

@dowomenfart не сработало, все так же - Jessica Rodriguez 05.03.2015

Ответы (2)

arrow_upward
0
arrow_downward

$(window).load(function() {
$(".flexslider").flexslider();
});

Попробуйте удалить эти строки, вы вызываете ползунок 2 раза для одного и того же класса.

CaRRaSKo 05.03.2015

comment

Когда я удалил эти строки, мой ползунок стал выглядеть ужасно и перестал работать. - Jessica Rodriguez; 05.03.2015

comment

Это подключено, вы пытались вместо этого загрузить js внизу страницы? - CaRRaSKo; 06.03.2015

comment

Только что попробовал, к сожалению, это все еще не решает проблему. - Jessica Rodriguez; 06.03.2015

arrow_upward
0
arrow_downward

Я не думаю, что причиной этого является проблема с Flexslider.

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

Попробуйте добавить это в свою таблицу стилей

.amazingcarousel-item {
    float: left;
    width: 150px;
}

Это придаст элементу карусели ширину по умолчанию, что, в свою очередь, приведет к уменьшению ширины изображения внутри него.

Adam Taylor 12.03.2015

comment

Хорошо, теперь вместо того, чтобы увеличивать изображение, оно показывает все товары одновременно, как будто карусель не работает должным образом, а затем возвращается в нормальное состояние. Я все еще думаю, что это выглядит лучше, чем увеличенное изображение, но оно все еще не отображается должным образом. - Jessica Rodriguez; 13.03.2015

Изображение слайд-шоу взрывается при загрузке страницы

Ответы (2)

Похожие вопросы