How to disable owl-carousel on desktop and enable on mobile device





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0















I am using the owl-carousel plugin(https://owlcarousel2.github.io/OwlCarousel2/). I want to disable the owl-carousel on the desktop so that my all content will display in a line and enable on the mobile device so my content will slide one by one. I tried some code but it is not working.



Would you help me out in this?






$(document).ready(function() {
$("#owl_about_main_slider").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 500,
margin:10,
paginationSpeed : 400,
autoplay:true,
items : 1,
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsMobile : false,
loop:true,
nav:true,
navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
});
});


$(function() {
var owl = $('.owl-carousel'),
owlOptions = {
loop: false,
margin: 10,
responsive: {
0: {
items: 1
}
}
};

if ( $(window).width() < 854 ) {
var owlActive = owl.owlCarousel(owlOptions);
} else {
owl.addClass('off');
}

$(window).resize(function() {
if ( $(window).width() < 854 ) {
if ( $('.owl-carousel').hasClass('off') ) {
var owlActive = owl.owlCarousel(owlOptions);
owl.removeClass('off');
}
} else {
if ( !$('.owl-carousel').hasClass('off') ) {
owl.addClass('off').trigger('destroy.owl.carousel');
owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
}
}
});
});

html,body{
margin: 0;
padding: 0;
height: 100%;
}
body .owl-nav div{
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
border:1px solid #000;
width: 40px;
height: 40px;
border-radius: 50%;
}
body .owl-prev{
left: 0;
display: flex;
}
body .owl-next{
right: 0;
display: flex;
}
body .owl-prev i, body .owl-next i{
margin: auto;
}
#owl_about_main_slider div h2{
text-align: center;
}
.owl-carousel.off {
display: block;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

<div id="owl_about_main_slider" class="owl-carousel">
<div><h2>This is First Slider</h2></div>
<div><h2>This is Second Slider</h2></div>
<div><h2>This is Third Slider</h2></div>
<div><h2>This is Fourth Slider </h2></div>
</div>












share|improve this question





























    0















    I am using the owl-carousel plugin(https://owlcarousel2.github.io/OwlCarousel2/). I want to disable the owl-carousel on the desktop so that my all content will display in a line and enable on the mobile device so my content will slide one by one. I tried some code but it is not working.



    Would you help me out in this?






    $(document).ready(function() {
    $("#owl_about_main_slider").owlCarousel({
    navigation : true, // Show next and prev buttons
    slideSpeed : 500,
    margin:10,
    paginationSpeed : 400,
    autoplay:true,
    items : 1,
    itemsDesktop : false,
    itemsDesktopSmall : false,
    itemsTablet: false,
    itemsMobile : false,
    loop:true,
    nav:true,
    navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
    });
    });


    $(function() {
    var owl = $('.owl-carousel'),
    owlOptions = {
    loop: false,
    margin: 10,
    responsive: {
    0: {
    items: 1
    }
    }
    };

    if ( $(window).width() < 854 ) {
    var owlActive = owl.owlCarousel(owlOptions);
    } else {
    owl.addClass('off');
    }

    $(window).resize(function() {
    if ( $(window).width() < 854 ) {
    if ( $('.owl-carousel').hasClass('off') ) {
    var owlActive = owl.owlCarousel(owlOptions);
    owl.removeClass('off');
    }
    } else {
    if ( !$('.owl-carousel').hasClass('off') ) {
    owl.addClass('off').trigger('destroy.owl.carousel');
    owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
    }
    }
    });
    });

    html,body{
    margin: 0;
    padding: 0;
    height: 100%;
    }
    body .owl-nav div{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    border:1px solid #000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    }
    body .owl-prev{
    left: 0;
    display: flex;
    }
    body .owl-next{
    right: 0;
    display: flex;
    }
    body .owl-prev i, body .owl-next i{
    margin: auto;
    }
    #owl_about_main_slider div h2{
    text-align: center;
    }
    .owl-carousel.off {
    display: block;
    }

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

    <div id="owl_about_main_slider" class="owl-carousel">
    <div><h2>This is First Slider</h2></div>
    <div><h2>This is Second Slider</h2></div>
    <div><h2>This is Third Slider</h2></div>
    <div><h2>This is Fourth Slider </h2></div>
    </div>












    share|improve this question

























      0












      0








      0


      1






      I am using the owl-carousel plugin(https://owlcarousel2.github.io/OwlCarousel2/). I want to disable the owl-carousel on the desktop so that my all content will display in a line and enable on the mobile device so my content will slide one by one. I tried some code but it is not working.



      Would you help me out in this?






      $(document).ready(function() {
      $("#owl_about_main_slider").owlCarousel({
      navigation : true, // Show next and prev buttons
      slideSpeed : 500,
      margin:10,
      paginationSpeed : 400,
      autoplay:true,
      items : 1,
      itemsDesktop : false,
      itemsDesktopSmall : false,
      itemsTablet: false,
      itemsMobile : false,
      loop:true,
      nav:true,
      navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
      });
      });


      $(function() {
      var owl = $('.owl-carousel'),
      owlOptions = {
      loop: false,
      margin: 10,
      responsive: {
      0: {
      items: 1
      }
      }
      };

      if ( $(window).width() < 854 ) {
      var owlActive = owl.owlCarousel(owlOptions);
      } else {
      owl.addClass('off');
      }

      $(window).resize(function() {
      if ( $(window).width() < 854 ) {
      if ( $('.owl-carousel').hasClass('off') ) {
      var owlActive = owl.owlCarousel(owlOptions);
      owl.removeClass('off');
      }
      } else {
      if ( !$('.owl-carousel').hasClass('off') ) {
      owl.addClass('off').trigger('destroy.owl.carousel');
      owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
      }
      }
      });
      });

      html,body{
      margin: 0;
      padding: 0;
      height: 100%;
      }
      body .owl-nav div{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      border:1px solid #000;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      }
      body .owl-prev{
      left: 0;
      display: flex;
      }
      body .owl-next{
      right: 0;
      display: flex;
      }
      body .owl-prev i, body .owl-next i{
      margin: auto;
      }
      #owl_about_main_slider div h2{
      text-align: center;
      }
      .owl-carousel.off {
      display: block;
      }

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

      <div id="owl_about_main_slider" class="owl-carousel">
      <div><h2>This is First Slider</h2></div>
      <div><h2>This is Second Slider</h2></div>
      <div><h2>This is Third Slider</h2></div>
      <div><h2>This is Fourth Slider </h2></div>
      </div>












      share|improve this question














      I am using the owl-carousel plugin(https://owlcarousel2.github.io/OwlCarousel2/). I want to disable the owl-carousel on the desktop so that my all content will display in a line and enable on the mobile device so my content will slide one by one. I tried some code but it is not working.



      Would you help me out in this?






      $(document).ready(function() {
      $("#owl_about_main_slider").owlCarousel({
      navigation : true, // Show next and prev buttons
      slideSpeed : 500,
      margin:10,
      paginationSpeed : 400,
      autoplay:true,
      items : 1,
      itemsDesktop : false,
      itemsDesktopSmall : false,
      itemsTablet: false,
      itemsMobile : false,
      loop:true,
      nav:true,
      navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
      });
      });


      $(function() {
      var owl = $('.owl-carousel'),
      owlOptions = {
      loop: false,
      margin: 10,
      responsive: {
      0: {
      items: 1
      }
      }
      };

      if ( $(window).width() < 854 ) {
      var owlActive = owl.owlCarousel(owlOptions);
      } else {
      owl.addClass('off');
      }

      $(window).resize(function() {
      if ( $(window).width() < 854 ) {
      if ( $('.owl-carousel').hasClass('off') ) {
      var owlActive = owl.owlCarousel(owlOptions);
      owl.removeClass('off');
      }
      } else {
      if ( !$('.owl-carousel').hasClass('off') ) {
      owl.addClass('off').trigger('destroy.owl.carousel');
      owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
      }
      }
      });
      });

      html,body{
      margin: 0;
      padding: 0;
      height: 100%;
      }
      body .owl-nav div{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      border:1px solid #000;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      }
      body .owl-prev{
      left: 0;
      display: flex;
      }
      body .owl-next{
      right: 0;
      display: flex;
      }
      body .owl-prev i, body .owl-next i{
      margin: auto;
      }
      #owl_about_main_slider div h2{
      text-align: center;
      }
      .owl-carousel.off {
      display: block;
      }

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

      <div id="owl_about_main_slider" class="owl-carousel">
      <div><h2>This is First Slider</h2></div>
      <div><h2>This is Second Slider</h2></div>
      <div><h2>This is Third Slider</h2></div>
      <div><h2>This is Fourth Slider </h2></div>
      </div>








      $(document).ready(function() {
      $("#owl_about_main_slider").owlCarousel({
      navigation : true, // Show next and prev buttons
      slideSpeed : 500,
      margin:10,
      paginationSpeed : 400,
      autoplay:true,
      items : 1,
      itemsDesktop : false,
      itemsDesktopSmall : false,
      itemsTablet: false,
      itemsMobile : false,
      loop:true,
      nav:true,
      navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
      });
      });


      $(function() {
      var owl = $('.owl-carousel'),
      owlOptions = {
      loop: false,
      margin: 10,
      responsive: {
      0: {
      items: 1
      }
      }
      };

      if ( $(window).width() < 854 ) {
      var owlActive = owl.owlCarousel(owlOptions);
      } else {
      owl.addClass('off');
      }

      $(window).resize(function() {
      if ( $(window).width() < 854 ) {
      if ( $('.owl-carousel').hasClass('off') ) {
      var owlActive = owl.owlCarousel(owlOptions);
      owl.removeClass('off');
      }
      } else {
      if ( !$('.owl-carousel').hasClass('off') ) {
      owl.addClass('off').trigger('destroy.owl.carousel');
      owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
      }
      }
      });
      });

      html,body{
      margin: 0;
      padding: 0;
      height: 100%;
      }
      body .owl-nav div{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      border:1px solid #000;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      }
      body .owl-prev{
      left: 0;
      display: flex;
      }
      body .owl-next{
      right: 0;
      display: flex;
      }
      body .owl-prev i, body .owl-next i{
      margin: auto;
      }
      #owl_about_main_slider div h2{
      text-align: center;
      }
      .owl-carousel.off {
      display: block;
      }

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

      <div id="owl_about_main_slider" class="owl-carousel">
      <div><h2>This is First Slider</h2></div>
      <div><h2>This is Second Slider</h2></div>
      <div><h2>This is Third Slider</h2></div>
      <div><h2>This is Fourth Slider </h2></div>
      </div>





      $(document).ready(function() {
      $("#owl_about_main_slider").owlCarousel({
      navigation : true, // Show next and prev buttons
      slideSpeed : 500,
      margin:10,
      paginationSpeed : 400,
      autoplay:true,
      items : 1,
      itemsDesktop : false,
      itemsDesktopSmall : false,
      itemsTablet: false,
      itemsMobile : false,
      loop:true,
      nav:true,
      navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
      });
      });


      $(function() {
      var owl = $('.owl-carousel'),
      owlOptions = {
      loop: false,
      margin: 10,
      responsive: {
      0: {
      items: 1
      }
      }
      };

      if ( $(window).width() < 854 ) {
      var owlActive = owl.owlCarousel(owlOptions);
      } else {
      owl.addClass('off');
      }

      $(window).resize(function() {
      if ( $(window).width() < 854 ) {
      if ( $('.owl-carousel').hasClass('off') ) {
      var owlActive = owl.owlCarousel(owlOptions);
      owl.removeClass('off');
      }
      } else {
      if ( !$('.owl-carousel').hasClass('off') ) {
      owl.addClass('off').trigger('destroy.owl.carousel');
      owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
      }
      }
      });
      });

      html,body{
      margin: 0;
      padding: 0;
      height: 100%;
      }
      body .owl-nav div{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      border:1px solid #000;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      }
      body .owl-prev{
      left: 0;
      display: flex;
      }
      body .owl-next{
      right: 0;
      display: flex;
      }
      body .owl-prev i, body .owl-next i{
      margin: auto;
      }
      #owl_about_main_slider div h2{
      text-align: center;
      }
      .owl-carousel.off {
      display: block;
      }

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

      <div id="owl_about_main_slider" class="owl-carousel">
      <div><h2>This is First Slider</h2></div>
      <div><h2>This is Second Slider</h2></div>
      <div><h2>This is Third Slider</h2></div>
      <div><h2>This is Fourth Slider </h2></div>
      </div>






      jquery html css owl-carousel






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Dec 25 '17 at 11:50







      user6930268































          3 Answers
          3






          active

          oldest

          votes


















          7














          Right now, it looks like you are loading the carousel as soon as the document is ready, then looking for the device width (e.g. checking for a mobile device). Instead, wouldn't it make sense to first determine the device width, then apply the owlCarousel if the width is below a certain threshold?



          Something like this:






          $(document).ready(function() {
          if ( $(window).width() < 854 ) {
          startCarousel();
          } else {
          $('.owl-carousel').addClass('off');
          }
          });

          $(window).resize(function() {
          if ( $(window).width() < 854 ) {
          startCarousel();
          } else {
          stopCarousel();
          }
          });

          function startCarousel(){
          $("#owl_about_main_slider").owlCarousel({
          navigation : true, // Show next and prev buttons
          slideSpeed : 500,
          margin:10,
          paginationSpeed : 400,
          autoplay:true,
          items : 1,
          itemsDesktop : false,
          itemsDesktopSmall : false,
          itemsTablet: false,
          itemsMobile : false,
          loop:true,
          nav:true,
          navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
          });
          }
          function stopCarousel() {
          var owl = $('.owl-carousel');
          owl.trigger('destroy.owl.carousel');
          owl.addClass('off');
          }

          html,body{
          margin: 0;
          padding: 0;
          height: 100%;
          }
          body .owl-nav div{
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          -webkit-transform: translateY(-50%);
          border:1px solid #000;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          }
          body .owl-prev{
          left: 0;
          display: flex;
          }
          body .owl-next{
          right: 0;
          display: flex;
          }
          body .owl-prev i, body .owl-next i{
          margin: auto;
          }
          #owl_about_main_slider div h2{
          text-align: center;
          }
          .owl-carousel.off {
          display: block;
          }

          <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
          <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
          <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>



          <div id="owl_about_main_slider" class="owl-carousel">
          <div><h2>This is First Slider</h2></div>
          <div><h2>This is Second Slider</h2></div>
          <div><h2>This is Third Slider</h2></div>
          <div><h2>This is Fourth Slider </h2></div>
          </div>








          share|improve this answer


























          • It will be good for me if you share the snippet with an example.

            – user6930268
            Dec 25 '17 at 12:40











          • I edited my earlier response. I added a style change to the 'owl' element to the stopCarousel function, as currently, the .owl-carousel class is set to 'display:none'

            – yinken
            Dec 25 '17 at 13:16











          • Thanks for the reply, I tested your code but it's not working even I am not getting the content on desktop

            – user6930268
            Dec 25 '17 at 13:24











          • Sorry, there was an error in there... Should work now.

            – yinken
            Dec 25 '17 at 13:53











          • Sorry to say, It's still not working. This time i got the content on desktop but not getting on mobile device

            – user6930268
            Dec 26 '17 at 4:45



















          2














          You can Easily Destroy Owl Carousel On Desktop and Enable Owl Carousel under the screen size 1280 during the responsive checking with screen resolution.



          function owlInitialize() {
          if ($(window).width() < 1280) {
          $('.prdt_category').addClass("owl-carousel");
          $('.owl-carousel').owlCarousel({
          loop:false,
          margin: 5,
          nav: true,
          navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
          dots: false,
          responsive:{
          0:{
          items:3,
          },
          480:{
          items:4,
          },
          640:{
          items:5,
          },
          1000:{
          items:8,
          }
          }
          });
          }else{
          $('.owl-carousel').owlCarousel('destroy');
          $('.prdt_category').removeClass("owl-carousel");
          }
          }
          $(document).ready(function(e) {
          owlInitialize();
          });
          $(window).resize(function() {
          owlInitialize();
          });





          share|improve this answer

































            0














            You can Easily Destroy Owl Carousel On Desktop/Responsive Devices Using this Code.



            function postsCarousel() {
            var checkWidth = $(window).width();
            var owlPost = $("#latest-posts .posts-wrapper");
            if (checkWidth > 767) {
            if (typeof owlPost.data('owl.carousel') != 'undefined') {
            owlPost.data('owl.carousel').destroy();
            }
            owlPost.removeClass('owl-carousel');
            } else if (checkWidth < 768) {
            owlPost.addClass('owl-carousel');
            owlPost.owlCarousel({
            items: 1,
            slideSpeed: 500,
            animateOut: 'fadeOut',
            touchDrag: false,
            mouseDrag: false,
            autoplay: true,
            autoplaySpeed: 8000,
            autoplayTimeout: 8000,
            dots: true,
            loop: true
            });
            }
            }

            postsCarousel();
            $(window).resize(postsCarousel);





            share|improve this answer
























              Your Answer






              StackExchange.ifUsing("editor", function () {
              StackExchange.using("externalEditor", function () {
              StackExchange.using("snippets", function () {
              StackExchange.snippets.init();
              });
              });
              }, "code-snippets");

              StackExchange.ready(function() {
              var channelOptions = {
              tags: "".split(" "),
              id: "1"
              };
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function() {
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled) {
              StackExchange.using("snippets", function() {
              createEditor();
              });
              }
              else {
              createEditor();
              }
              });

              function createEditor() {
              StackExchange.prepareEditor({
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader: {
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              },
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              });


              }
              });














              draft saved

              draft discarded


















              StackExchange.ready(
              function () {
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47968333%2fhow-to-disable-owl-carousel-on-desktop-and-enable-on-mobile-device%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown
























              3 Answers
              3






              active

              oldest

              votes








              3 Answers
              3






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              7














              Right now, it looks like you are loading the carousel as soon as the document is ready, then looking for the device width (e.g. checking for a mobile device). Instead, wouldn't it make sense to first determine the device width, then apply the owlCarousel if the width is below a certain threshold?



              Something like this:






              $(document).ready(function() {
              if ( $(window).width() < 854 ) {
              startCarousel();
              } else {
              $('.owl-carousel').addClass('off');
              }
              });

              $(window).resize(function() {
              if ( $(window).width() < 854 ) {
              startCarousel();
              } else {
              stopCarousel();
              }
              });

              function startCarousel(){
              $("#owl_about_main_slider").owlCarousel({
              navigation : true, // Show next and prev buttons
              slideSpeed : 500,
              margin:10,
              paginationSpeed : 400,
              autoplay:true,
              items : 1,
              itemsDesktop : false,
              itemsDesktopSmall : false,
              itemsTablet: false,
              itemsMobile : false,
              loop:true,
              nav:true,
              navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
              });
              }
              function stopCarousel() {
              var owl = $('.owl-carousel');
              owl.trigger('destroy.owl.carousel');
              owl.addClass('off');
              }

              html,body{
              margin: 0;
              padding: 0;
              height: 100%;
              }
              body .owl-nav div{
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              -webkit-transform: translateY(-50%);
              border:1px solid #000;
              width: 40px;
              height: 40px;
              border-radius: 50%;
              }
              body .owl-prev{
              left: 0;
              display: flex;
              }
              body .owl-next{
              right: 0;
              display: flex;
              }
              body .owl-prev i, body .owl-next i{
              margin: auto;
              }
              #owl_about_main_slider div h2{
              text-align: center;
              }
              .owl-carousel.off {
              display: block;
              }

              <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>



              <div id="owl_about_main_slider" class="owl-carousel">
              <div><h2>This is First Slider</h2></div>
              <div><h2>This is Second Slider</h2></div>
              <div><h2>This is Third Slider</h2></div>
              <div><h2>This is Fourth Slider </h2></div>
              </div>








              share|improve this answer


























              • It will be good for me if you share the snippet with an example.

                – user6930268
                Dec 25 '17 at 12:40











              • I edited my earlier response. I added a style change to the 'owl' element to the stopCarousel function, as currently, the .owl-carousel class is set to 'display:none'

                – yinken
                Dec 25 '17 at 13:16











              • Thanks for the reply, I tested your code but it's not working even I am not getting the content on desktop

                – user6930268
                Dec 25 '17 at 13:24











              • Sorry, there was an error in there... Should work now.

                – yinken
                Dec 25 '17 at 13:53











              • Sorry to say, It's still not working. This time i got the content on desktop but not getting on mobile device

                – user6930268
                Dec 26 '17 at 4:45
















              7














              Right now, it looks like you are loading the carousel as soon as the document is ready, then looking for the device width (e.g. checking for a mobile device). Instead, wouldn't it make sense to first determine the device width, then apply the owlCarousel if the width is below a certain threshold?



              Something like this:






              $(document).ready(function() {
              if ( $(window).width() < 854 ) {
              startCarousel();
              } else {
              $('.owl-carousel').addClass('off');
              }
              });

              $(window).resize(function() {
              if ( $(window).width() < 854 ) {
              startCarousel();
              } else {
              stopCarousel();
              }
              });

              function startCarousel(){
              $("#owl_about_main_slider").owlCarousel({
              navigation : true, // Show next and prev buttons
              slideSpeed : 500,
              margin:10,
              paginationSpeed : 400,
              autoplay:true,
              items : 1,
              itemsDesktop : false,
              itemsDesktopSmall : false,
              itemsTablet: false,
              itemsMobile : false,
              loop:true,
              nav:true,
              navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
              });
              }
              function stopCarousel() {
              var owl = $('.owl-carousel');
              owl.trigger('destroy.owl.carousel');
              owl.addClass('off');
              }

              html,body{
              margin: 0;
              padding: 0;
              height: 100%;
              }
              body .owl-nav div{
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              -webkit-transform: translateY(-50%);
              border:1px solid #000;
              width: 40px;
              height: 40px;
              border-radius: 50%;
              }
              body .owl-prev{
              left: 0;
              display: flex;
              }
              body .owl-next{
              right: 0;
              display: flex;
              }
              body .owl-prev i, body .owl-next i{
              margin: auto;
              }
              #owl_about_main_slider div h2{
              text-align: center;
              }
              .owl-carousel.off {
              display: block;
              }

              <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>



              <div id="owl_about_main_slider" class="owl-carousel">
              <div><h2>This is First Slider</h2></div>
              <div><h2>This is Second Slider</h2></div>
              <div><h2>This is Third Slider</h2></div>
              <div><h2>This is Fourth Slider </h2></div>
              </div>








              share|improve this answer


























              • It will be good for me if you share the snippet with an example.

                – user6930268
                Dec 25 '17 at 12:40











              • I edited my earlier response. I added a style change to the 'owl' element to the stopCarousel function, as currently, the .owl-carousel class is set to 'display:none'

                – yinken
                Dec 25 '17 at 13:16











              • Thanks for the reply, I tested your code but it's not working even I am not getting the content on desktop

                – user6930268
                Dec 25 '17 at 13:24











              • Sorry, there was an error in there... Should work now.

                – yinken
                Dec 25 '17 at 13:53











              • Sorry to say, It's still not working. This time i got the content on desktop but not getting on mobile device

                – user6930268
                Dec 26 '17 at 4:45














              7












              7








              7







              Right now, it looks like you are loading the carousel as soon as the document is ready, then looking for the device width (e.g. checking for a mobile device). Instead, wouldn't it make sense to first determine the device width, then apply the owlCarousel if the width is below a certain threshold?



              Something like this:






              $(document).ready(function() {
              if ( $(window).width() < 854 ) {
              startCarousel();
              } else {
              $('.owl-carousel').addClass('off');
              }
              });

              $(window).resize(function() {
              if ( $(window).width() < 854 ) {
              startCarousel();
              } else {
              stopCarousel();
              }
              });

              function startCarousel(){
              $("#owl_about_main_slider").owlCarousel({
              navigation : true, // Show next and prev buttons
              slideSpeed : 500,
              margin:10,
              paginationSpeed : 400,
              autoplay:true,
              items : 1,
              itemsDesktop : false,
              itemsDesktopSmall : false,
              itemsTablet: false,
              itemsMobile : false,
              loop:true,
              nav:true,
              navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
              });
              }
              function stopCarousel() {
              var owl = $('.owl-carousel');
              owl.trigger('destroy.owl.carousel');
              owl.addClass('off');
              }

              html,body{
              margin: 0;
              padding: 0;
              height: 100%;
              }
              body .owl-nav div{
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              -webkit-transform: translateY(-50%);
              border:1px solid #000;
              width: 40px;
              height: 40px;
              border-radius: 50%;
              }
              body .owl-prev{
              left: 0;
              display: flex;
              }
              body .owl-next{
              right: 0;
              display: flex;
              }
              body .owl-prev i, body .owl-next i{
              margin: auto;
              }
              #owl_about_main_slider div h2{
              text-align: center;
              }
              .owl-carousel.off {
              display: block;
              }

              <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>



              <div id="owl_about_main_slider" class="owl-carousel">
              <div><h2>This is First Slider</h2></div>
              <div><h2>This is Second Slider</h2></div>
              <div><h2>This is Third Slider</h2></div>
              <div><h2>This is Fourth Slider </h2></div>
              </div>








              share|improve this answer















              Right now, it looks like you are loading the carousel as soon as the document is ready, then looking for the device width (e.g. checking for a mobile device). Instead, wouldn't it make sense to first determine the device width, then apply the owlCarousel if the width is below a certain threshold?



              Something like this:






              $(document).ready(function() {
              if ( $(window).width() < 854 ) {
              startCarousel();
              } else {
              $('.owl-carousel').addClass('off');
              }
              });

              $(window).resize(function() {
              if ( $(window).width() < 854 ) {
              startCarousel();
              } else {
              stopCarousel();
              }
              });

              function startCarousel(){
              $("#owl_about_main_slider").owlCarousel({
              navigation : true, // Show next and prev buttons
              slideSpeed : 500,
              margin:10,
              paginationSpeed : 400,
              autoplay:true,
              items : 1,
              itemsDesktop : false,
              itemsDesktopSmall : false,
              itemsTablet: false,
              itemsMobile : false,
              loop:true,
              nav:true,
              navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
              });
              }
              function stopCarousel() {
              var owl = $('.owl-carousel');
              owl.trigger('destroy.owl.carousel');
              owl.addClass('off');
              }

              html,body{
              margin: 0;
              padding: 0;
              height: 100%;
              }
              body .owl-nav div{
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              -webkit-transform: translateY(-50%);
              border:1px solid #000;
              width: 40px;
              height: 40px;
              border-radius: 50%;
              }
              body .owl-prev{
              left: 0;
              display: flex;
              }
              body .owl-next{
              right: 0;
              display: flex;
              }
              body .owl-prev i, body .owl-next i{
              margin: auto;
              }
              #owl_about_main_slider div h2{
              text-align: center;
              }
              .owl-carousel.off {
              display: block;
              }

              <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>



              <div id="owl_about_main_slider" class="owl-carousel">
              <div><h2>This is First Slider</h2></div>
              <div><h2>This is Second Slider</h2></div>
              <div><h2>This is Third Slider</h2></div>
              <div><h2>This is Fourth Slider </h2></div>
              </div>








              $(document).ready(function() {
              if ( $(window).width() < 854 ) {
              startCarousel();
              } else {
              $('.owl-carousel').addClass('off');
              }
              });

              $(window).resize(function() {
              if ( $(window).width() < 854 ) {
              startCarousel();
              } else {
              stopCarousel();
              }
              });

              function startCarousel(){
              $("#owl_about_main_slider").owlCarousel({
              navigation : true, // Show next and prev buttons
              slideSpeed : 500,
              margin:10,
              paginationSpeed : 400,
              autoplay:true,
              items : 1,
              itemsDesktop : false,
              itemsDesktopSmall : false,
              itemsTablet: false,
              itemsMobile : false,
              loop:true,
              nav:true,
              navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
              });
              }
              function stopCarousel() {
              var owl = $('.owl-carousel');
              owl.trigger('destroy.owl.carousel');
              owl.addClass('off');
              }

              html,body{
              margin: 0;
              padding: 0;
              height: 100%;
              }
              body .owl-nav div{
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              -webkit-transform: translateY(-50%);
              border:1px solid #000;
              width: 40px;
              height: 40px;
              border-radius: 50%;
              }
              body .owl-prev{
              left: 0;
              display: flex;
              }
              body .owl-next{
              right: 0;
              display: flex;
              }
              body .owl-prev i, body .owl-next i{
              margin: auto;
              }
              #owl_about_main_slider div h2{
              text-align: center;
              }
              .owl-carousel.off {
              display: block;
              }

              <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>



              <div id="owl_about_main_slider" class="owl-carousel">
              <div><h2>This is First Slider</h2></div>
              <div><h2>This is Second Slider</h2></div>
              <div><h2>This is Third Slider</h2></div>
              <div><h2>This is Fourth Slider </h2></div>
              </div>





              $(document).ready(function() {
              if ( $(window).width() < 854 ) {
              startCarousel();
              } else {
              $('.owl-carousel').addClass('off');
              }
              });

              $(window).resize(function() {
              if ( $(window).width() < 854 ) {
              startCarousel();
              } else {
              stopCarousel();
              }
              });

              function startCarousel(){
              $("#owl_about_main_slider").owlCarousel({
              navigation : true, // Show next and prev buttons
              slideSpeed : 500,
              margin:10,
              paginationSpeed : 400,
              autoplay:true,
              items : 1,
              itemsDesktop : false,
              itemsDesktopSmall : false,
              itemsTablet: false,
              itemsMobile : false,
              loop:true,
              nav:true,
              navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
              });
              }
              function stopCarousel() {
              var owl = $('.owl-carousel');
              owl.trigger('destroy.owl.carousel');
              owl.addClass('off');
              }

              html,body{
              margin: 0;
              padding: 0;
              height: 100%;
              }
              body .owl-nav div{
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              -webkit-transform: translateY(-50%);
              border:1px solid #000;
              width: 40px;
              height: 40px;
              border-radius: 50%;
              }
              body .owl-prev{
              left: 0;
              display: flex;
              }
              body .owl-next{
              right: 0;
              display: flex;
              }
              body .owl-prev i, body .owl-next i{
              margin: auto;
              }
              #owl_about_main_slider div h2{
              text-align: center;
              }
              .owl-carousel.off {
              display: block;
              }

              <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
              <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>



              <div id="owl_about_main_slider" class="owl-carousel">
              <div><h2>This is First Slider</h2></div>
              <div><h2>This is Second Slider</h2></div>
              <div><h2>This is Third Slider</h2></div>
              <div><h2>This is Fourth Slider </h2></div>
              </div>






              share|improve this answer














              share|improve this answer



              share|improve this answer








              edited Dec 26 '17 at 12:10

























              answered Dec 25 '17 at 12:19









              yinkenyinken

              25329




              25329













              • It will be good for me if you share the snippet with an example.

                – user6930268
                Dec 25 '17 at 12:40











              • I edited my earlier response. I added a style change to the 'owl' element to the stopCarousel function, as currently, the .owl-carousel class is set to 'display:none'

                – yinken
                Dec 25 '17 at 13:16











              • Thanks for the reply, I tested your code but it's not working even I am not getting the content on desktop

                – user6930268
                Dec 25 '17 at 13:24











              • Sorry, there was an error in there... Should work now.

                – yinken
                Dec 25 '17 at 13:53











              • Sorry to say, It's still not working. This time i got the content on desktop but not getting on mobile device

                – user6930268
                Dec 26 '17 at 4:45



















              • It will be good for me if you share the snippet with an example.

                – user6930268
                Dec 25 '17 at 12:40











              • I edited my earlier response. I added a style change to the 'owl' element to the stopCarousel function, as currently, the .owl-carousel class is set to 'display:none'

                – yinken
                Dec 25 '17 at 13:16











              • Thanks for the reply, I tested your code but it's not working even I am not getting the content on desktop

                – user6930268
                Dec 25 '17 at 13:24











              • Sorry, there was an error in there... Should work now.

                – yinken
                Dec 25 '17 at 13:53











              • Sorry to say, It's still not working. This time i got the content on desktop but not getting on mobile device

                – user6930268
                Dec 26 '17 at 4:45

















              It will be good for me if you share the snippet with an example.

              – user6930268
              Dec 25 '17 at 12:40





              It will be good for me if you share the snippet with an example.

              – user6930268
              Dec 25 '17 at 12:40













              I edited my earlier response. I added a style change to the 'owl' element to the stopCarousel function, as currently, the .owl-carousel class is set to 'display:none'

              – yinken
              Dec 25 '17 at 13:16





              I edited my earlier response. I added a style change to the 'owl' element to the stopCarousel function, as currently, the .owl-carousel class is set to 'display:none'

              – yinken
              Dec 25 '17 at 13:16













              Thanks for the reply, I tested your code but it's not working even I am not getting the content on desktop

              – user6930268
              Dec 25 '17 at 13:24





              Thanks for the reply, I tested your code but it's not working even I am not getting the content on desktop

              – user6930268
              Dec 25 '17 at 13:24













              Sorry, there was an error in there... Should work now.

              – yinken
              Dec 25 '17 at 13:53





              Sorry, there was an error in there... Should work now.

              – yinken
              Dec 25 '17 at 13:53













              Sorry to say, It's still not working. This time i got the content on desktop but not getting on mobile device

              – user6930268
              Dec 26 '17 at 4:45





              Sorry to say, It's still not working. This time i got the content on desktop but not getting on mobile device

              – user6930268
              Dec 26 '17 at 4:45













              2














              You can Easily Destroy Owl Carousel On Desktop and Enable Owl Carousel under the screen size 1280 during the responsive checking with screen resolution.



              function owlInitialize() {
              if ($(window).width() < 1280) {
              $('.prdt_category').addClass("owl-carousel");
              $('.owl-carousel').owlCarousel({
              loop:false,
              margin: 5,
              nav: true,
              navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
              dots: false,
              responsive:{
              0:{
              items:3,
              },
              480:{
              items:4,
              },
              640:{
              items:5,
              },
              1000:{
              items:8,
              }
              }
              });
              }else{
              $('.owl-carousel').owlCarousel('destroy');
              $('.prdt_category').removeClass("owl-carousel");
              }
              }
              $(document).ready(function(e) {
              owlInitialize();
              });
              $(window).resize(function() {
              owlInitialize();
              });





              share|improve this answer






























                2














                You can Easily Destroy Owl Carousel On Desktop and Enable Owl Carousel under the screen size 1280 during the responsive checking with screen resolution.



                function owlInitialize() {
                if ($(window).width() < 1280) {
                $('.prdt_category').addClass("owl-carousel");
                $('.owl-carousel').owlCarousel({
                loop:false,
                margin: 5,
                nav: true,
                navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
                dots: false,
                responsive:{
                0:{
                items:3,
                },
                480:{
                items:4,
                },
                640:{
                items:5,
                },
                1000:{
                items:8,
                }
                }
                });
                }else{
                $('.owl-carousel').owlCarousel('destroy');
                $('.prdt_category').removeClass("owl-carousel");
                }
                }
                $(document).ready(function(e) {
                owlInitialize();
                });
                $(window).resize(function() {
                owlInitialize();
                });





                share|improve this answer




























                  2












                  2








                  2







                  You can Easily Destroy Owl Carousel On Desktop and Enable Owl Carousel under the screen size 1280 during the responsive checking with screen resolution.



                  function owlInitialize() {
                  if ($(window).width() < 1280) {
                  $('.prdt_category').addClass("owl-carousel");
                  $('.owl-carousel').owlCarousel({
                  loop:false,
                  margin: 5,
                  nav: true,
                  navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
                  dots: false,
                  responsive:{
                  0:{
                  items:3,
                  },
                  480:{
                  items:4,
                  },
                  640:{
                  items:5,
                  },
                  1000:{
                  items:8,
                  }
                  }
                  });
                  }else{
                  $('.owl-carousel').owlCarousel('destroy');
                  $('.prdt_category').removeClass("owl-carousel");
                  }
                  }
                  $(document).ready(function(e) {
                  owlInitialize();
                  });
                  $(window).resize(function() {
                  owlInitialize();
                  });





                  share|improve this answer















                  You can Easily Destroy Owl Carousel On Desktop and Enable Owl Carousel under the screen size 1280 during the responsive checking with screen resolution.



                  function owlInitialize() {
                  if ($(window).width() < 1280) {
                  $('.prdt_category').addClass("owl-carousel");
                  $('.owl-carousel').owlCarousel({
                  loop:false,
                  margin: 5,
                  nav: true,
                  navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
                  dots: false,
                  responsive:{
                  0:{
                  items:3,
                  },
                  480:{
                  items:4,
                  },
                  640:{
                  items:5,
                  },
                  1000:{
                  items:8,
                  }
                  }
                  });
                  }else{
                  $('.owl-carousel').owlCarousel('destroy');
                  $('.prdt_category').removeClass("owl-carousel");
                  }
                  }
                  $(document).ready(function(e) {
                  owlInitialize();
                  });
                  $(window).resize(function() {
                  owlInitialize();
                  });






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Nov 17 '18 at 11:23

























                  answered Nov 17 '18 at 6:55









                  Jomal JohnyJomal Johny

                  32028




                  32028























                      0














                      You can Easily Destroy Owl Carousel On Desktop/Responsive Devices Using this Code.



                      function postsCarousel() {
                      var checkWidth = $(window).width();
                      var owlPost = $("#latest-posts .posts-wrapper");
                      if (checkWidth > 767) {
                      if (typeof owlPost.data('owl.carousel') != 'undefined') {
                      owlPost.data('owl.carousel').destroy();
                      }
                      owlPost.removeClass('owl-carousel');
                      } else if (checkWidth < 768) {
                      owlPost.addClass('owl-carousel');
                      owlPost.owlCarousel({
                      items: 1,
                      slideSpeed: 500,
                      animateOut: 'fadeOut',
                      touchDrag: false,
                      mouseDrag: false,
                      autoplay: true,
                      autoplaySpeed: 8000,
                      autoplayTimeout: 8000,
                      dots: true,
                      loop: true
                      });
                      }
                      }

                      postsCarousel();
                      $(window).resize(postsCarousel);





                      share|improve this answer




























                        0














                        You can Easily Destroy Owl Carousel On Desktop/Responsive Devices Using this Code.



                        function postsCarousel() {
                        var checkWidth = $(window).width();
                        var owlPost = $("#latest-posts .posts-wrapper");
                        if (checkWidth > 767) {
                        if (typeof owlPost.data('owl.carousel') != 'undefined') {
                        owlPost.data('owl.carousel').destroy();
                        }
                        owlPost.removeClass('owl-carousel');
                        } else if (checkWidth < 768) {
                        owlPost.addClass('owl-carousel');
                        owlPost.owlCarousel({
                        items: 1,
                        slideSpeed: 500,
                        animateOut: 'fadeOut',
                        touchDrag: false,
                        mouseDrag: false,
                        autoplay: true,
                        autoplaySpeed: 8000,
                        autoplayTimeout: 8000,
                        dots: true,
                        loop: true
                        });
                        }
                        }

                        postsCarousel();
                        $(window).resize(postsCarousel);





                        share|improve this answer


























                          0












                          0








                          0







                          You can Easily Destroy Owl Carousel On Desktop/Responsive Devices Using this Code.



                          function postsCarousel() {
                          var checkWidth = $(window).width();
                          var owlPost = $("#latest-posts .posts-wrapper");
                          if (checkWidth > 767) {
                          if (typeof owlPost.data('owl.carousel') != 'undefined') {
                          owlPost.data('owl.carousel').destroy();
                          }
                          owlPost.removeClass('owl-carousel');
                          } else if (checkWidth < 768) {
                          owlPost.addClass('owl-carousel');
                          owlPost.owlCarousel({
                          items: 1,
                          slideSpeed: 500,
                          animateOut: 'fadeOut',
                          touchDrag: false,
                          mouseDrag: false,
                          autoplay: true,
                          autoplaySpeed: 8000,
                          autoplayTimeout: 8000,
                          dots: true,
                          loop: true
                          });
                          }
                          }

                          postsCarousel();
                          $(window).resize(postsCarousel);





                          share|improve this answer













                          You can Easily Destroy Owl Carousel On Desktop/Responsive Devices Using this Code.



                          function postsCarousel() {
                          var checkWidth = $(window).width();
                          var owlPost = $("#latest-posts .posts-wrapper");
                          if (checkWidth > 767) {
                          if (typeof owlPost.data('owl.carousel') != 'undefined') {
                          owlPost.data('owl.carousel').destroy();
                          }
                          owlPost.removeClass('owl-carousel');
                          } else if (checkWidth < 768) {
                          owlPost.addClass('owl-carousel');
                          owlPost.owlCarousel({
                          items: 1,
                          slideSpeed: 500,
                          animateOut: 'fadeOut',
                          touchDrag: false,
                          mouseDrag: false,
                          autoplay: true,
                          autoplaySpeed: 8000,
                          autoplayTimeout: 8000,
                          dots: true,
                          loop: true
                          });
                          }
                          }

                          postsCarousel();
                          $(window).resize(postsCarousel);






                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Feb 8 '18 at 14:26









                          RashedRashed

                          12




                          12






























                              draft saved

                              draft discarded




















































                              Thanks for contributing an answer to Stack Overflow!


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid



                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.


                              To learn more, see our tips on writing great answers.




                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function () {
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f47968333%2fhow-to-disable-owl-carousel-on-desktop-and-enable-on-mobile-device%23new-answer', 'question_page');
                              }
                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              Popular posts from this blog

                              Bressuire

                              Vorschmack

                              Quarantine