Отображение активной галереи

Сообщение # 1 | 16:53:10 29 Янв 2021

Добрый день!

Мне необходимо разместить довольно много информации на странице http://amnit.org/index/muzejnyj_kompleks_misis/0-32
Для того, чтобы страница выглядело компактно, я сворачиваю отдельные разделы с помощью скрипта:

Код

Сам скрипт работает очень хорошо. Но в СОДЕРЖИМОМ РАЗДЕЛА мне необходимо разместить активную галерею для которой я использую такой HTML код:

Код

Без скрипта галерея тоже работает хорошо, но когда они вместе - происходит сбой и на странице не выполняются расчеты, которые необходимы для правильного отображения галереи: ширина <li> 100px вместо нужных 443px и снимки наслаиваются друг на друга.
Стоит произвести действие на странице: например, изменить размер окна и все расчеты происходят верно и активная галерея отображается как следует.

Уважаемые гуру скриптов и html-кодов, пожалуйста, подскажите, как мне примирить активную галерею со скриптом, чтобы все автоматически отображалось правильно.

Заранее спасибо!

Сообщение отредактировал mephist2005 - Пятница, 29 Янв 2021, 17:16:40

Сообщение # 5 | 15:13:16 31 Янв 2021

Юрий, большое спасибо!
По Вашей рекомендации я начал искать другие слайдеры и перебрал чуть ли не все слайдеры разобранные здесь https://abclinux.org/search/?q=slider+ucoz
Но все они начинают работать правильно, только после совершения действия с окном браузера.
По-моему самый лучший слайдер вот этот:

Код

<div class="specialties inside-wrapper">
<h3 class="block-title">Основные разделы</h3>
<ul class="slides" id="services-slider">
<li class="doctor">
<img src="http://amnit.ucoz.org/misis1.png" alt="example">
</li>
<li class="doctor">
<img src="http://amnit.ucoz.org/misis2.png" alt="example">
</li>
<li class="doctor">
<img src="http://amnit.ucoz.org/misis3.png" alt="example">
</li>
<li class="doctor">
<img src="http://amnit.ucoz.org/misis4.png" alt="example">
</li>
<li class="doctor">
<img src="http://amnit.ucoz.org/misis5.png" alt="example">
</li>
<li class="doctor">
<img src="http://amnit.ucoz.org/misis6.png" alt="example">
</li>
<li class="doctor">
<img src="http://amnit.ucoz.org/misis7.png" alt="example">
</li>
<li class="doctor">
<img src="http://amnit.ucoz.org/misis8.png" alt="example">
</li>
<li class="doctor">
<img src="http://amnit.ucoz.org/misis9.png" alt="example">
</li>
<li class="doctor">
<img src="http://amnit.ucoz.org/misis10.png" alt="example">
</li>
<li class="doctor">
<img src="http://amnit.ucoz.org/misis11.png" alt="example">
</li>
<li class="doctor">
<img src="http://amnit.ucoz.org/misis12.png" alt="example">
</li>
</ul>
<script type="text/javascript" src="/.s/t/1802/jquery.bxslider.min.js"></script>
<script>
$(window).on('load', function () {
$('#services-slider').bxSlider({
useCSS: false,
nextText: 'keyboard_arrow_right',
prevText: 'keyboard_arrow_left',
minSlides: 2,
maxSlides: 2,
moveSlides: 2,
slideWidth: 365,
slideMargin: 20,
pager: false,
autoStart: true
});
});
</script>
</div>

И он работает именно как Вы говорили - прокручивает целыми частями, но даже он не срабатывает сразу и сначала выглядит так:

а после изменения размера окна браузера правильно:

Для работы этого слайдера я установил рекомендованные стили

Код

Подскажите, пожалуйста, может быть можно что-то сделать с этим слайдером, чтобы он работал?

Заранее спасибо!

Прикрепления: 7162373.png (17.6 Kb) · 0036470.png (298.9 Kb)

Страница 1 из 1 1
Модератор форума: Yuri_G