Перейти к содержанию
artemleon

Баг в работе слайдера, при открытии сайта

Рекомендуемые сообщения

Добрый день!

Есть у меня сайт https://e-kram.com.ua/, а на главной сладер. При открытии я наблюдаю следующую картину:

image.thumb.png.478a923239f634042d9add6bfcc9ce47.png

Ну а буквально через пару секунд все стает на место и работает нормально.

Времени что-то особо переделывать вообще нет. Можете помочь подправить существующий код?

Вот оно:

Спойлер

 

<script src="/catalog/view/javascript/js/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>

<head>

<style type="text/css">

</style>

</head>

 

<body>

<div style="display: flex; align-items: center; justify-content: center; height: 100%; ">

<div id="wrapper" style="display: inline-block; ">

<div id="carousel">

 

<!--------------------------------block slider------------------------------------->

<ul>

 

<!--------------------------------slider 1------------------------------------->

<li><div class="instruction-box clock-banner">

<div class="banner_wrap hover-up hover-darken">

<img  class="hidden-xs hidden-sm" src="/image/catalog/home/banner1.jpg" alt="" />

<img class="hidden-lg hidden-md"

 src="/image/catalog/home/banner1-mob.jpg " style="max-width: 100%; height: 390px; margin-right: 65px; " alt="" />

<div  class=" effect-holder">

<span class="caption" >

<div class="slide-block">

 

<p style="font-size: 16px; font-weight: 600;">

Останні новини

</p>

 

<h4 style="margin-top: 8%;">

ТЕПЕР ПРИЙМАЄМО УСЕ

</h4>

 

<p style="width: 85%; font-size: 16px;">

З квітня ми тепер маємо можливість прийняти навіть техніку яка вам вже не потрібна але так потрібна дітям у дитячих будинках

</p>

 

<p style="margin-top: 10%; margin-bottom: 0px;"><a style="font-size: 16px;" href="#" >

Читати новину..

</a></p>

 

<div class="slide-line-blue"></div>

</div>

</span>

</div>

</div>

</div></li>

 

<!--------------------------------slider 2------------------------------------->

<li><div class="instruction-box clock-banner">

<div class="banner_wrap hover-up hover-darken">

<img  class="hidden-xs hidden-sm" src="/image/catalog/home/ban2.jpg" alt="" />

<img class="hidden-lg hidden-md"

 src="/image/catalog/home/banner1-mob.jpg " style="max-width: 100%; height: 390px; margin-right: 65px; " alt="" />

<div  class=" effect-holder">

<span class="caption" >

<div class="slide-block">

 

<p style="font-size: 16px; font-weight: 600;">

Останні новини

</p>

 

<h4 style="margin-top: 8%;">

ТЕПЕР ПРИЙМАЄМО УСЕ

</h4>

 

<p style="width: 85%; font-size: 16px;">

З квітня ми тепер маємо можливість прийняти навіть техніку яка вам вже не потрібна але так потрібна дітям у дитячих будинках

</p>

 

<p style="margin-top: 10%; margin-bottom: 0px;"><a style="font-size: 16px;" href="#" >

Читати новину..

</a></p>

 

<div class="slide-line-blue"></div>

</div>

</span>

</div>

</div>

</div></li>

 

<!--------------------------------slider 3------------------------------------->

<li><div class="instruction-box clock-banner">

<div class="banner_wrap hover-up hover-darken">

<img  class="hidden-xs hidden-sm" src="/image/catalog/home/banner1.jpg" alt="" />

<img class="hidden-lg hidden-md"

 src="/image/catalog/home/banner1-mob.jpg " style="max-width: 100%; height: 390px; margin-right: 65px; " alt="" />

<div  class=" effect-holder">

<span class="caption" >

<div class="slide-block">

 

<p style="font-size: 16px; font-weight: 600;">

Останні новини

</p>

 

<h4 style="margin-top: 8%;">

ТЕПЕР ПРИЙМАЄМО УСЕ

</h4>

 

<p style="width: 85%; font-size: 16px;">

З квітня ми тепер маємо можливість прийняти навіть техніку яка вам вже не потрібна але так потрібна дітям у дитячих будинках

</p>

 

<p style="margin-top: 10%; margin-bottom: 0px;"><a style="font-size: 16px;" href="#" >

Читати новину..

</a></p>

 

<div class="slide-line-blue"></div>

</div>

</span>

</div>

</div>

</div></li>

 

<!--------------------------------slider 4------------------------------------->

<li><div class="instruction-box clock-banner">

<div class="banner_wrap hover-up hover-darken">

<img  class="hidden-xs hidden-sm" src="/image/catalog/home/ban2.jpg" alt="" />

<img class="hidden-lg hidden-md"

 src="/image/catalog/home/banner1-mob.jpg " style="max-width: 100%; height: 390px; margin-right: 65px; " alt="" />

<div  class=" effect-holder">

<span class="caption" >

<div class="slide-block">

 

<p style="font-size: 16px; font-weight: 600;">

Останні новини

</p>

 

<h4 style="margin-top: 8%;">

ТЕПЕР ПРИЙМАЄМО УСЕ

</h4>

 

<p style="width: 85%; font-size: 16px;">

З квітня ми тепер маємо можливість прийняти навіть техніку яка вам вже не потрібна але так потрібна дітям у дитячих будинках

</p>

 

<p style="margin-top: 10%; margin-bottom: 0px;"><a style="font-size: 16px;" href="#" >

Читати новину..

</a></p>

 

<div class="slide-line-blue"></div>

</div>

</span>

</div>

</div>

</div></li>

 

<!--------------------------------slider 5------------------------------------->

<li><div class="instruction-box clock-banner">

<div class="banner_wrap hover-up hover-darken">

<img  class="hidden-xs hidden-sm" src="/image/catalog/home/banner1.jpg" alt="" />

<img class="hidden-lg hidden-md"

 src="/image/catalog/home/banner1-mob.jpg " style="max-width: 100%; height: 390px; margin-right: 65px; " alt="" />

<div  class=" effect-holder">

<span class="caption" >

<div class="slide-block">

 

<p style="font-size: 16px; font-weight: 600;">

Останні новини

</p>

 

<h4 style="margin-top: 8%;">

ТЕПЕР ПРИЙМАЄМО УСЕ

</h4>

 

<p style="width: 85%; font-size: 16px;">

З квітня ми тепер маємо можливість прийняти навіть техніку яка вам вже не потрібна але так потрібна дітям у дитячих будинках

</p>

 

<p style="margin-top: 10%; margin-bottom: 0px;"><a style="font-size: 16px;" href="#" >

Читати новину..

</a></p>

 

<div class="slide-line-blue"></div>

</div>

</span>

</div>

</div>

</div></li>

 

<!--------------------------------slider 6------------------------------------->

<li><div class="instruction-box clock-banner">

<div class="banner_wrap hover-up hover-darken">

<img  class="hidden-xs hidden-sm" src="/image/catalog/home/ban2.jpg" alt="" />

<img class="hidden-lg hidden-md"

 src="/image/catalog/home/banner1-mob.jpg " style="max-width: 100%; height: 390px; margin-right: 65px; " alt="" />

<div  class=" effect-holder">

<span class="caption" >

<div class="slide-block">

 

<p style="font-size: 16px; font-weight: 600;">

Останні новини

</p>

 

<h4 style="margin-top: 8%;">

ТЕПЕР ПРИЙМАЄМО УСЕ

</h4>

 

<p style="width: 85%; font-size: 16px;">

З квітня ми тепер маємо можливість прийняти навіть техніку яка вам вже не потрібна але так потрібна дітям у дитячих будинках

</p>

 

<p style="margin-top: 10%; margin-bottom: 0px;"><a style="font-size: 16px;" href="#" >

Читати новину..

</a></p>

 

<div class="slide-line-blue"></div>

</div>

</span>

</div>

</div>

</div></li>

 

</ul>

<!------------------------------------------------------------------------------------>

 

 

<div class="clearfix"></div>

<a id="prev" class="prev" href="#">&lt;</a>

<a id="next" class="next" href="#">&gt;</a>

<div class="clearfix"></div>

                                               </div>

                               </div>

   </div>

                </body>

<head>

 

<script type="text/javascript">

        $(function() {

                $('#carousel ul').carouFredSel({

                responsive: true,

                scroll: 1,

        prev: '#prev',

                next: '#next',

                pagination: "#pager",

                items: {

                width: 280,

                height: '100%',

                visible: {

                min: 1,

                max: 3

                }

                }

                });

                });

 

</script>

</head>

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

У вас беда с тегами head) Их несколько, что в корне неверно)

 

Библиотека как только подгружается так и начинает работать Ваш каруселька. Попробуйте переместить Ваш скрипт ближе к слайдеру.

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Так скрипт и так возле слайдера, более того я его поставил уже перед слайдем. Это конечно ничего не дало. Пробывал скрипт загружать с header.tpl. То он тогда вообще не работает.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.