Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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

artemleon

Автор: ,
в Opencart 2.x: Загальні питання

 Share

Recommended Posts

artemleon Enthusiast

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>

 

 

Надіслати
Поділитися на інших сайтах

Leingard Proficient

Leingard

Опубліковано:
Опубліковано:

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

 

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

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

Надіслати
Поділитися на інших сайтах
1

artemleon Enthusiast

artemleon

Опубліковано:
  • Автор
Опубліковано:

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

Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду