Clever Geek Handbook

Restart Owl Carousel 2 when opening or closing side navigation

I am working on a website and it is built with a theme. The body of the site has a structured panel with a left pane that contains a navigation bar and a pane with a right pane that contains the content of the body.

When the left pane is opened from collapsed view (showing only icons) to full view (showing text navigation), the carousel owl, since it loads on page load, does not adjust the width.

I've tried several ways to try and reload the carousel by following their API , but with no success. The body has no width set, like inline styles, but the class is instead set left-menu-open

when the left menu is open.

I also looked at several other cases where people tried to do the same, but none of their code examples work.

Below is my code. I am running this in a .php file so I can load multiple sliders into the body content, without rotating them in relation. The carousel is loading and functioning fine, it just clamps if the page is loaded with the open nav and closes the nav, or the third slide shows if the page is loaded with the nav closed and opens.

One of the methods that I have tried is

if ( $( 'body' ).resize() { }

if ( $( 'body' ).hasClass( 'left-nav-open' ) { } else if ( !$( 'body ').resize() { } 

(function($) {
  $(function() {
    var $owl = $('.owl-<?php echo $owl_widget_title; ?>');

    $owl.owlCarousel({
      // your initial option here, again.
      loop:true,
      nav:true,
      navText: ["<i class=\"fa fa-chevron-left\"></i>","<i class=\"fa fa-chevron-right\"></i>"],
      dots: false,
      lazyLoad: true,
      lazyContent: true,
      autoplaySpeed: 1000,
      autoplayTimeout: 7000,
      autoplayHoverPause: true,
      responsive : {
        0 : {
          items: 1,
          slideBy: 1,
          autoHeight:true,
        },
        992 : {
          items: <?php echo $num_of_items; ?>,
          slideBy: <?php echo $num_of_items; ?>,
        }
      }
    });

  });

})(jQuery)

I tried destroy.owl.carousel

then initialize.owl.carousel

, but none of them works or starts at all.

Any help is appreciated! Thanks you

+3


source to share


4 answers


To update the owl after resizing the container, call the .onResize()

_handler on data

. The function updateOwl()

should look like this:

updateOwl = function(){
  $(".owl-carousel").each(function() {
    $(this).data('owl.carousel').onResize();
  });
};

The only thing to pay attention to is when exactly to call this function. I am assuming the sidebar does not jump into position, but rather animates smoothly. The call .onResize()

must be delayed for the duration of the animation, so the size of the carousel is calculated based on the final size of the content. End the execution updateOwl()

by wrapping it in setTimeout()

(equal to or slightly longer than the sidebar animation duration):

$(document).on('click', '.sidebarToggle', function(){
  setTimeout(function(){
    updateOwl();        
  },   321)
});

... where .sidebarToggle

would be your sidebar opener.

Working example:



(function($) {
  var $owl = $('.owl-carousel'),
      updateOwl = function(){
        $owl.each(function() {
          $(this).data('owl.carousel').onResize();
        });
      };
  
  $owl.owlCarousel({
    loop: true,
    nav: true,
    navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
    dots: false,
    lazyLoad: true,
    autoplaySpeed: 1000,
    autoplayTimeout: 7000,
    autoplayHoverPause: true,
    responsive: {
      0: {
        items: 1,
        slideBy: 1,
        autoHeight: true,
      },
      992: {
        items: 3,
        slideBy: 3,
      }
    }
  });
  
  $(document).on('click', '.sidebarToggle', function(){
    $('body').toggleClass('sidebarOpen'); 
    setTimeout(function(){
      updateOwl();        
    }, 321)
  });

  $(window).on('resize', updateOwl); 
  
})(jQuery)
      

        
        
        
      

    
body {
  margin: 0;
  transition: padding-left .3s cubic-bezier(.4,0,.2,1);
  }
.sidebar {
  height: 100vh;
  position: absolute;
  width: 200px;
  background-color: #888;
  left: -200px;
  top:0;
  transition: left .3s cubic-bezier(.4,0,.2,1);
  box-sizing: border-box;
}
.sidebarOpen .sidebar {
  left: 0;
}

body.sidebarOpen {
  padding-left: 200px;
}
.owl-carousel .owl-item {
  padding: 0 45px;
  box-sizing: border-box;
}
.owl-carousel .owl-item > div{
  min-height: 135px;
  width: 100%;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: Gainsboro;
  border-radius: 3px;
}
button {
  margin: 15px;
}
.owl-carousel {
  position: relative;
  margin: 15px 0 0;
}
.owl-nav >div {
  position: absolute;
  top: 50%;
  width: 20px;
  transform: translate(-50%, -50%);
  text-align: center;
}
.owl-prev {left: 20px}
.owl-next {left: calc(100% - 20px);}
      

        
        
        
      

    
<link href="https://maxcdn.bootstrapcdn.com/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.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>


<div class="sidebar"></div>

<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>
<button class="sidebarToggle">SidebarToggle</button>
Run code


If the above doesn't work for you, then I need to take a look at your implementation to be able to debug it.

Side note: lazyContent

Not available at this time. According to the plugin author:

... lazyContent

was introduced during the beta tests, but I removed it from the final version due to poor implementation. These are good options, so I'll be working on it in the next function.

+2


source


I am using destroy.owl.carousel

to destroy the carousel. Reinitializing carousel when clicking left navigation menu



var $owl = $('.owl-carousel');
/*inital on load */
$owl.owlCarousel({
  items: 6,
  lazyLoad: true,
  loop: true,
  margin: 10,
});
/*on click of navigation menu */
function resizeCarosel(obj) {
  if (obj.classList.contains('is-open')) {
    $owl.trigger('destroy.owl.carousel'); /*destroy Carousel*/
    $owl.owlCarousel({ /*reinitialize Carousel*/
      items: 6,
      lazyLoad: true,
      loop: true,
      margin: 10,
    });
  }
  if (obj.classList.contains('is-closed')) {
    $owl.trigger('destroy.owl.carousel'); /*destroy Carousel*/
    $owl.owlCarousel({ /*reinitialize Carousel*/
      items: 2,
      lazyLoad: true,
      loop: true,
      margin: 10,
      /*for responsive 
        items: 4,
        responsiveClass: true,
        responsive: {
          0: {
            items: 1,
            nav: true
          },
          600: {
            items: 3,
            nav: false
          },
          1000: {
            items: 5,
            nav: true,
            loop: false
          }
        }
      */
    });
  }

}
      

        
        
        
      

    
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/FragCoder/bootstrap-left-slide-menu/master/bootstrap-left-slide-menu.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/FragCoder/bootstrap-left-slide-menu/master/bootstrap-left-slide-menu.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css">
<script type="text/javascript" src="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script>

<div id="wrapper" class="">
  <div class="overlay" style="display: none;"></div>
  <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
    <ul class="nav sidebar-nav">
      <li class="sidebar-brand">
        <a href="#"> BLESM </a>
      </li>
      <li>
        <a href="#"><i class="glyphicon glyphicon-camera"></i> Photo</a>
      </li>
      <li>
        <a href="#"><i class="glyphicon glyphicon-facetime-video"></i> Video</a>
      </li>
      <li>
        <a href="#"><i class="glyphicon glyphicon-headphones"></i> Music</a>
      </li>
      <li>
        <a href="#"><i class="glyphicon glyphicon-cloud"></i> Cloud</a>
      </li>
      <li>
        <a href="#"><i class="glyphicon glyphicon-th"></i> Apps</a>
      </li>
      <li>
        <a href="#"><i class="glyphicon glyphicon-cog"></i> Settings</a>
      </li>
    </ul>
  </nav>
  <div id="page-content-wrapper">
    <button type="button" class="hamburger animated fadeInLeft is-closed" data-toggle="offcanvas" onclick="resizeCarosel(this)">
      <span class="hamb-top"></span>
      <span class="hamb-middle"></span>
      <span class="hamb-bottom"></span>
    </button>
    <div class="container">
      <div class="owl-carousel owl-theme">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=9" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=10" alt="">
        <img class="owl-lazy" data-src="https://placehold.it/350x250&text=11" alt="">
      </div>

    </div>
  </div>
</div>
Run code


+1


source


You should accomplish the task by simply removing the element from the DOM (jquery has a .remove () function) and then re-creating exactly the same as with the first. Note that you will have to store the variables that come from the server to the client.

0


source


Please check the result. Is this what you want to achieve?

https://codepen.io/glebkema/pen/zwozRx

var $owl = $('#myCarousel');
var owl = $owl.owlCarousel({
  autoplay: true,
  autoplayHoverPause: true,
  dots: false,
  loop: true,
  nav: true,
  navText: [ "<i class=\"fa fa-chevron-left\"></i>",
             "<i class=\"fa fa-chevron-right\"></i>" ],
  responsiveBaseElement: '.main',
  responsive : {
    0 : {
      items: 1,
      slideBy: 1,
    },
    400 : {
      items: 2,
      slideBy: 1,
    },
    768 : {
      items: 3,
      slideBy: 2,
    },
    992 : {
      items: 4,
      slideBy: 2,
    },
    1200 : {
      items: 5,
      slideBy: 2,
    },
  },
});

$('.sidebar-switcher').click(function(){
  $('body').toggleClass( 'body-open' );
  $('.main').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(event) {
    owl.trigger('refresh.owl.carousel');
  });
});
      

        
        
        
      

    
* { box-sizing: border-box; }
body {
  margin: 0;
}

/** sidebar closed **/
.main,
.sidebar {
  -webkit-transition: margin .4s ease-out;
     -moz-transition: margin .4s ease-out;
      -ms-transition: margin .4s ease-out;
       -o-transition: margin .4s ease-out;
          transition: margin .4s ease-out;
}
.main {
  padding: 0 36px;
  margin-left: 70px;
}
.sidebar {
  background: #ccc;
  float: left;
  height: 100vh;
  margin-left: -230px;
  position: relative;
  width: 300px;
}
.sidebar-switcher {
  position: absolute; top: 12px; right: 12px;
}
.sidebar-switcher:before {
  content: '\f0c9';
  cursor: pointer;
  font-family: 'FontAwesome';
  font-size: 30px;
  line-height: 1;
  position: absolute; top: 12px; right: 12px;
}

/** sidebar opened **/
.body-open .main {
  margin-left: 300px;
}
.body-open .sidebar {
  margin-left: 0;
}
.body-open .sidebar-switcher:before {
  content: '\f00d';
}

/** owl carousel **/
.owl-item > div {
  margin: 12px;
}
.owl-next,
.owl-prev {
  position: absolute;
  top: 0;
  width: 36px;
  bottom: 0; 
}
.owl-next {
  left: 100%;
  margin-left: -12px;
}
.owl-prev {
  right: 100%;
  margin-right: -12px;
}
.owl-next i,
.owl-prev i {
  font-size: 30px;
  line-height: 24px;
  margin-top: -12px;
  position: absolute;
  top: 50%;
}
.owl-next i {
  left: 12px;
}
.owl-prev i {
  right: 12px;
}
.owl-next:hover i,
.owl-prev:hover i {
  color: red;
}
      

        
        
        
      

    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="sidebar">
  <div class="sidebar-switcher"></div>
</div>
<div class="main">
  <div class="owl-carousel" id="myCarousel">
    <div><img src="//placehold.it/400x200/fc3/fff/?text=1" alt=""></div>
    <div><img src="//placehold.it/400x200/693/fff/?text=2" alt=""></div>
    <div><img src="//placehold.it/400x200/369/fff/?text=3" alt=""></div>
    <div><img src="//placehold.it/400x200/f63/fff/?text=4" alt=""></div>
    <div><img src="//placehold.it/400x200/936/fff/?text=5" alt=""></div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
Run code


-1


source






More articles:


All Articles