Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.08.2018, 13:51
Интересующийся
Отправить личное сообщение для oleg13321 Посмотреть профиль Найти все сообщения от oleg13321
 
Регистрация: 14.05.2018
Сообщений: 24

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


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

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

Сейчас залью на хостинг файлики....
Ответить с цитированием
  #2 (permalink)  
Старый 13.08.2018, 13:57
Интересующийся
Отправить личное сообщение для oleg13321 Посмотреть профиль Найти все сообщения от oleg13321
 
Регистрация: 14.05.2018
Сообщений: 24

http://b987144d.beget.tech

ЗАЛИЛ НА ХОСТИНГ!!!
Ответить с цитированием
  #3 (permalink)  
Старый 13.08.2018, 14:02
Интересующийся
Отправить личное сообщение для oleg13321 Посмотреть профиль Найти все сообщения от oleg13321
 
Регистрация: 14.05.2018
Сообщений: 24

Во вложении
Изображения:
Тип файла: jpg Безымянный.jpg (12.7 Кб, 5 просмотров)
Тип файла: jpg 123.jpg (14.5 Кб, 3 просмотров)
Ответить с цитированием
  #4 (permalink)  
Старый 13.08.2018, 14:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

oleg13321,
проблема давняя, решение: 1. все размеры прописать в css, особенно для картинок.
2. цикл инициализации, открыть владку установить слайдер, закрыть вкладку, так по всем вкладкам.
3. при открытии вкладки, делать перерасчёт (или тригер слайдера, обычно reload смотреть документацию или тупо $(window).trigger("resize"));
беда называется есть none, нет размера, 99% сладеров не учитывают того что их поставят на скрытую вкладку.
+ неплохо иницииализацию делать не через ready, а $(window).on("load", )
Ответить с цитированием
  #5 (permalink)  
Старый 13.08.2018, 15:40
Интересующийся
Отправить личное сообщение для oleg13321 Посмотреть профиль Найти все сообщения от oleg13321
 
Регистрация: 14.05.2018
Сообщений: 24

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

Спасибо)
Ответить с цитированием
  #6 (permalink)  
Старый 13.08.2018, 15:46
Интересующийся
Отправить личное сообщение для oleg13321 Посмотреть профиль Найти все сообщения от oleg13321
 
Регистрация: 14.05.2018
Сообщений: 24

Сообщение от рони Посмотреть сообщение
oleg13321,
+ неплохо иницииализацию делать не через ready, а $(window).on("load", )
Банально не вижу профита.
Ответить с цитированием
  #7 (permalink)  
Старый 13.08.2018, 16:00
Интересующийся
Отправить личное сообщение для oleg13321 Посмотреть профиль Найти все сообщения от oleg13321
 
Регистрация: 14.05.2018
Сообщений: 24

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

Я правильно понял,что мне просто после того как все установится, самому пересчитать размеры и выдать их в обход слайдерам которые я использую?
Ответить с цитированием
  #8 (permalink)  
Старый 13.08.2018, 19:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

bxslider and owl
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>

Последний раз редактировалось рони, 13.08.2018 в 19:46.
Ответить с цитированием
  #9 (permalink)  
Старый 14.08.2018, 08:44
Интересующийся
Отправить личное сообщение для oleg13321 Посмотреть профиль Найти все сообщения от oleg13321
 
Регистрация: 14.05.2018
Сообщений: 24

Большое человеческое спасибо)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
вкладки и слайдер slicks ildar94 Элементы интерфейса 6 16.01.2018 15:29
Группы картинок в слайдере ИщуПомощь Элементы интерфейса 2 24.08.2017 20:59
Как поместить слайдер в модальное окно? ИщуПомощь Элементы интерфейса 2 24.08.2017 20:27
Помогите сделать слайдер в слайдере как на mail.ru maksclub Ваши сайты и скрипты 1 04.08.2013 12:46
Слайдер с перемоткой в двух разных блоках Джэй jQuery 0 15.10.2012 23:08