Слайдер в слайдере...

[oleg13321]

Вообщем задача была сделать большой слайдер (БС).
В одном слайде БС есть статичный заголовок и описание, под всем этим, есть каруселька, которая автоматом прокручивает маленькие блоки.
Всего ТРИ слайда БС, в каждом есть каруселька.
Все, шикарно, я все сделал!
Использовал для начала OWL для маленьких каруселек, попытался все это завернуть в Owl-Слайдер (БС) не получилось.
В итоге нарыл BX Slider и БС реализовал на нем, а внутри него вертятся Owl-Карусельки.


Так вот проблема!!!
Которая решается просто сворачиванием окна)
На последнем слайде БС у меня вместо 3х элементов отображается один. И вообще ему ширину задает в 6000px. Но стоит только переключить вкладку туд-сюда, все норм.

Я грешил сначала на то, что где-то с версткой накосячил. Ан нет.
Потом, что где-то запятую пропустил, ан нет...
В итоге просто переключил вкладку, и все отображается как нужно.

Сейчас залью на хостинг файлики....

[oleg13321]

http://b987144d.beget.tech

ЗАЛИЛ НА ХОСТИНГ!!!

[oleg13321]

Во вложении

[рони]

oleg13321,
проблема давняя, решение: 1. все размеры прописать в css, особенно для картинок.
2. цикл инициализации, открыть владку установить слайдер, закрыть вкладку, так по всем вкладкам.
3. при открытии вкладки, делать перерасчёт (или тригер слайдера, обычно reload смотреть документацию или тупо $(window).trigger("resize"));
беда называется есть none, нет размера, 99% сладеров не учитывают того что их поставят на скрытую вкладку.
+ неплохо иницииализацию делать не через ready, а $(window).on("load", )

[oleg13321]

Хорошо.
Я надеюсь вы правильно понимаете, что мне как раз и нужно, чтобы отображалось именно так как после перехода с другой вкладки?

Спасибо)

[oleg13321]

oleg13321,
+ неплохо иницииализацию делать не через ready, а $(window).on("load", )

Банально не вижу профита.

[oleg13321]

И я или за сегодня уже наработался, или я просто туп, и не могу понять как воспринимать эту информацию)
Видимо завтра...

Я правильно понял,что мне просто после того как все установится, самому пересчитать размеры и выдать их в обход слайдерам которые я использую?

[рони]

oleg13321,

3. при открытии вкладки, делать перерасчёт (или тригер слайдера, обычно reload смотреть документацию

строка 60

<!-- Scripts -->
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script src="libs/owl/owl.carousel.min.js"></script>
<script>
    $(function() {
        var owl = $(".topslider");
        owl.owlCarousel({
            items: 1,
            loop: true,
            margin: 0,
            dots: false,
            autoplay: true,
            autoplayTimeout: 5E3,
            autoplayHoverPause: true
        });
        $(".play").on("click", function() {
            owl.trigger("play.owl.autoplay", [5E3])
        });
        $(".stop").on("click", function() {
            owl.trigger("stop.owl.autoplay")
        });
        var owl = $(".wrap_practice");
        owl.owlCarousel({
            margin: 60,
            dots: false,
            responsive: {
                0: {
                    items: 1
                },
                500: {
                    items: 2
                },
                1E3: {
                    items: 4
                }
            }
        });
        var owl = $(".wrap_news");
        owl.owlCarousel({
            items: 1,
            loop: true,
            margin: 0,
            dots: false,
            autoplay: true,
            autoplayTimeout: 5E3,
            autoplayHoverPause: true
        });
        var owl = $(".wrap_partner");
        owl.owlCarousel({
            items: 3,
            loop: true,
            margin: 100,
            dots: false,
            autoplay: true,
            autoplayTimeout: 1E3,
            autoplayHoverPause: true
        });
        $("#homeSlider").bxSlider({
            onSlideAfter: function($slideElement) {
                $slideElement.find(".owl-carousel").trigger("refresh.owl.carousel")
            },
            slideMargin: 60,
            pager: false,
            nextText: "&rarr;",
            prevText: "&larr;",
            useCSS: false,
            tickerHover: true,
            adaptiveHeight: true,
            touchEnabled: false
        })
    });
</script>

[oleg13321]

Большое человеческое спасибо)