Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.08.2021, 22:57
Интересующийся
Отправить личное сообщение для Tempest Посмотреть профиль Найти все сообщения от Tempest
 
Регистрация: 21.05.2018
Сообщений: 25

Почему не появляется блок на десктопной версии?
Для блока .features-slider я задал свойство, чтобы при разрешении больше 1100 пикселей он отображался, как блок, а при разрешении менее 1100 пикселей активизировался слайдер .owl-carousel, но в итоге на разрешении больше 1100 пикселей этот блок не отображается. Почему?

Сам сайт ch38740.tmweb.ru

Весь код https://jsfiddle.net/rdwjqkz0/1/

<section class="features">
        <div class="wrapper">
            <div class="content">
                <div class="owl-carousel  features-slider">
                    <div class="meeting subblock">
                        <img src="img/meeting.svg" alt="1">
                        <div class="text">
                            <span>500+</span>
                            <span>Meeting rooms</span>
                        </div>
                    </div>
                    <div class="event subblock">
                        <img src="img/event.svg" alt="2">
                        <div class="text">
                            <span>100+</span>
                            <span>Event spaces</span>
                        </div>
                    </div>
                    <div class="countries subblock">
                        <img src="img/countries.svg" alt="3">
                        <div class="text">
                            <span>60+</span>
                            <span>Countries</span>
                        </div>
                    </div>
                    <div class="internet subblock">
                        <img src="img/internet.svg" alt="4">
                        <div class="text">
                            <span>500 Mbps</span>
                            <span>Internet speed</span>
                        </div>
                    </div>
                    <div class="startup subblock">
                        <img src="img/startup.svg" alt="5">
                        <div class="text">
                            <span>5K+</span>
                            <span>Startup mentors</span>
                        </div>
                    </div>
                    <div class="comm subblock">
                        <img src="img/comm.svg" alt="6">
                        <div class="text">
                            <span>200+</span>
                            <span>Communities inside</span>
                        </div>
                    </div>
                </div>
                <div class="features-desc">
                    <div class="features-desc-wrap">
                        <div class="foreword">Why Frispes</div>
                        <h3>We revolutionize your workspace</h3>
                        <p>With a decade of insights and expertise, we're<br>decided to reimagine co-working space, designed<br>to help a new startup grow up and realize their<br>ideas so they can give a positive impacts on<br>many people</p>
                    </div>
                </div>
            </div>
        </div>
    </section>


$(window).on('load resize ', function() {
        if ($(this).width() > 1100) {
            $('.owl-carousel.features-slider').trigger('destroy.owl.carousel');
        } else {
            $('.owl-carousel.features-slider').owlCarousel({
                slideSpeed: 2000,
                loop: true,
                margin: 0,
                responsiveClass: true,
                autoplay: true,
                smartSpeed: 800,
                items: 3,
                nav: true,
                navText: ["<i class='fas fa-chevron-left'></i>", "<i class='fas fa-chevron-right'></i>"],
                responsive: {
                    0: {
                        items: 1
                    },
                    530: {
                        items: 2
                    },
                    730: {
                        items: 3
                    }
                }
            });
        }
    });
Изображения:
Тип файла: jpg Screenshot_1.jpg (102.3 Кб, 3 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 19.08.2021, 22:18
Новичок на форуме
Отправить личное сообщение для Wass13 Посмотреть профиль Найти все сообщения от Wass13
 
Регистрация: 19.08.2021
Сообщений: 2

Как по мне ваша проблема в том, что вы изначально не смогли сформировать в голове алгоритм, что и как вы хотите, чтобы работало. Собственно ответ уже есть в вашем вопрос - "блок появляется если разрешение больше 1100, а если меньше, чтобы блока не было."

Называется "ресайз".

И еще, если не ошибаюсь, минимальный десктоп - 1024px.

function screenResize(desktop) {

  // if screen resolution is less then 1023px
  if (desktop.matches) {

   // your code here
        
    // if screen resolution is higher then 1023px
    } else {

      // your code here
    
    }  
  } // screen resolution function

  let x = window.matchMedia("(max-width: 1023px)");
  screenResize(x);
  x.addListener(screenResize);
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему не срабатывает java script второй код, если они одинаковы ? Texnarik Элементы интерфейса 4 28.02.2020 08:41
Увеличение ширины в мобильной версии puzjob Элементы интерфейса 15 13.09.2018 20:24
При нажатии появляется блок Изучаю_JS Общие вопросы Javascript 12 22.07.2015 16:26
При наведении на определенный блок, DIV, появляется скрытое сожержимое kismedia Элементы интерфейса 9 22.05.2015 19:15
Скрыть/показать блок в зависимости от radio MBmusic Элементы интерфейса 10 08.05.2013 17:23