OWl-Carousel mobile only

Question

I want to put carousel only on mobile, and desktop displays divs. I thought of adding a javascript to screen.width.

screen.width,however I am not able to put javascript with html and php together.

<script type="text/javascript">
if(screen.width < 500){
document.write("<div class='owl-carousel'><div><div class='col-md-2 colunaone'><center><br><p>NÚMERO DO PEDIDO</p><p><b><?php /* @escapeNotVerified */ echo __($link_to_order); ?></b></p></center></div> </div> <div><div class="col-md-2 col-md-offset-1 colunatwo"><center><br><p>STATUS DO PAGAMENTO</p><p><b><?php echo __(ucfirst($paymentResponse['status'])); ?></b></p></center></div> </div> <div> <div class='col-md-2 col-md-offset-1 colunafour'><center><br><p>PRAZO DE ENTREGA</p>em <b>xx</b> dias úteis seu produto chegará até você.</center></div></div> <div> <div class='col-md-2 col-md-offset-1 colunathree'><center><br><p>ENDEREÇO DE ENTREGA</p><b><?=$address?></b></center></div> </div> <div> <div class='col-md-2 col-md-offset-1 colunafour'><center><br><p>TOTAL</p><b>R$<?=$total;?></b></center></div></div></div>";
        $(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});
}else{
</script>
<div class="col-md-12 divcolunas">
<div class="col-md-2 colunaone"><center><br><p>NÚMERO DO PEDIDO</p><p><b><?php /* @escapeNotVerified */ echo __($link_to_order); ?></b></p></center></div>
<div class="col-md-2 col-md-offset-1 colunatwo"><center><br><p>STATUS DO PAGAMENTO</p><p><b><?php echo __(ucfirst($paymentResponse['status'])); ?></b></p></center></div>
<div class="col-md-2 col-md-offset-1 colunafour"><center><br><p>PRAZO DE ENTREGA</p>em <b>xx</b> dias úteis seu produto chegará até você.</center></div>
<div class="col-md-2 col-md-offset-1 colunathree"><center><br><p>ENDEREÇO DE ENTREGA</p><b><?=$address?></b></center></div>
<div class="col-md-2 col-md-offset-1 colunafour"><center><br><p>TOTAL</p><b>R$<?=$total;?></b></center></div>
</div>
<script type="text/javascript">
}
</script>

Do not display anything

Possible duplicate of [How do I pass variables and data from PHP to JavaScript?](https://stackoverflow.com/questions/23740548/how-do-i-pass-variables-and-data-from-php-to-javascript) - Although... Not displaying anything? You must have a PHP error. Look at the page source in the browser? — ficuscr, Jul 23 '19 at 20:37
Have you checked for PHP errors / warnings? You are saying you get a blank page? — ficuscr, Jul 23 '19 at 20:41
No php error, just not doing screen condition and displaying owl-carousel on mobile. — Richard Nicson, Jul 23 '19 at 20:55
Well let's debug perhaps then by replacing `(window.screen.width <= 500)` with something like `(1 == 1)`. What happens then? Maybe that conditional is just not working as expected. What is the reported width? — ficuscr, Jul 23 '19 at 20:56

score 0 · Answer 1 · answered Jul 23 '19 at 23:29

To archieve this, I will use

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    $(".owl-carousel").owlCarousel();
}

This makes you display the carousel only on certain kind of devices, hopefully to all mobile devices including tablets, you could delete or add devices types as you need.

You could also use this simply js mobiledetect.js

OWl-Carousel mobile only

1 Answers1