enter image description here I use owl-carousel in two sections. In the first section, the slider goes on all resolutions. And in the second section, the slider should be included only on resolutions less than 700px . How can this be implemented?

 $(document).ready(function() { $(".owl-carousel").owlCarousel({ loop: true, items: 1, nav: true, navText: "", }); }); <div class="review"> <div class="wrapper"> <div class="owl-carousel" id="owl-carousel1"> <div class="owl-carusel__item"> <p>Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΡƒΠ»ΠΎ ΠΌΠΎΠΉ ΠΌΠΈΡ€ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»ΠΎ ΠΏΠΎ-Π½ΠΎΠ²ΠΎΠΌΡƒ Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹Π΅ сСрыС Π²Π΅Ρ‰ΠΈ! А Π΅Ρ‰Π΅ я познакомился со своСй Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΉ ΠΆΠ΅Π½ΠΎΠΉ Π² коммСнтариях ΠΊ Π²Ρ‹Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ!</p> <span class="owl-carusel__item-name">Николай ΠŸΠ΅Ρ‚Ρ€ΠΎΠ²</span> <span class="owl-carusel__item-descr">25 Π»Π΅Ρ‚, Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ трамвая</span> </div> <div class="owl-carusel__item"> <p>Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΡƒΠ»ΠΎ ΠΌΠΎΠΉ ΠΌΠΈΡ€ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»ΠΎ ΠΏΠΎ-Π½ΠΎΠ²ΠΎΠΌΡƒ Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹Π΅ сСрыС Π²Π΅Ρ‰ΠΈ! А Π΅Ρ‰Π΅ я познакомился со своСй Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΉ ΠΆΠ΅Π½ΠΎΠΉ Π² коммСнтариях ΠΊ Π²Ρ‹Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ!</p> <span class="owl-carusel__item-name">Π’ΠΈΠΌΡƒΡ€ Π‘ΠΎΠΉΠΊΠΎ</span> <span class="owl-carusel__item-descr">43 Π»Π΅Ρ‚, Π°Π΄Π²ΠΎΠΊΠ°Ρ‚</span> </div> <div class="owl-carusel__item"> <p>Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΡƒΠ»ΠΎ ΠΌΠΎΠΉ ΠΌΠΈΡ€ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»ΠΎ ΠΏΠΎ-Π½ΠΎΠ²ΠΎΠΌΡƒ Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹Π΅ сСрыС Π²Π΅Ρ‰ΠΈ! А Π΅Ρ‰Π΅ я познакомился со своСй Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΉ ΠΆΠ΅Π½ΠΎΠΉ Π² коммСнтариях ΠΊ Π²Ρ‹Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ!</p> <span class="owl-carusel__item-name">Максим ΠœΠΎΡ€ΠΎΠ·ΠΎΠ²</span> <span class="owl-carusel__item-descr">21 Π»Π΅Ρ‚, элСктрик</span> </div> </div> </div> </div> <div class="prices"> <div class="wrapper"> <div class="owl-carousel" id="owl-carousel2"> <div class="prices-container"> <table class="prices-table"> <tr> <th></th> <th>Π±Π°Π·Π°<span>1,99 usd</span></th> <th>стандарт<span>3,99 usd</span><span class="prices-table__baner">Ρ…ΠΈΡ‚</span></th> <th>Π°Π½Π»ΠΈΠΌ<span>9,99 usd</span></th> </tr> <tr> <td>Π ΠΎΠ·ΠΎΠ²Ρ‹ΠΉ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€</td> <td></td> <td></td> <td></td> </tr> <tr> <td>Π‘ΠΌΠ°ΠΉΠ»ΠΈΠΊΠΈ</td> <td class="no"></td> <td></td> <td></td> </tr> <tr> <td>ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ</td> <td class="no"></td> <td class="no"></td> <td></td> </tr> </table> </div> </div> </div> </div>
  • Make a snippet. - Alex78191

1 answer 1

Make a screen resolution check

 if ($(window).width() < 700) { $(document).ready(function () { $(".owl-carousel").owlCarousel({ loop: true, items: 1, nav: true, navText: "", }); }); }
  • Thanks for the help, but it's a little different task. Firstly, such a check hides the first roundabout too. And at this resolution you need to connect only the second one. Secondly, such a check completely removes the carousel block on the page. And it is necessary that the content always remains, only the carousel is included. - Denis Denis
  • @FghsdfsdfFghfghfdsf use the id elements instead of the .owl-carousel selector. For two owlCarousel() you need to call owlCarousel() separately. Give HTML markup, I do not know how your content is displayed. - Alex78191
  • Calling the carousel separately is a really great idea, thanks. Now it remains to understand how to connect exactly the carousel at a low resolution, with the content always remaining :) HTML code added to the first message. Thank you for your help) - Denis Denis
  • @FghsdfsdfFghfghfdsf in your markup, only one element with the class owl-carousel - Alex78191
  • I threw off only the second section, now I will add the first one, sorry. - Denis Denis