Почему не появляется блок на десктопной версии?
Вложений: 1
Для блока .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 } } }); } }); |
Как по мне ваша проблема в том, что вы изначально не смогли сформировать в голове алгоритм, что и как вы хотите, чтобы работало. Собственно ответ уже есть в вашем вопрос - "блок появляется если разрешение больше 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); |
Часовой пояс GMT +3, время: 19:09. |