Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


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