jQuery(document).ready(function ($) {
  var breadcrumbContainer = $(".ml-breadcrumbs-container");
  var breadcrumbUL = breadcrumbContainer.find("ul.ml-breadcrumbs");
  var breadcrumbLIs = breadcrumbUL.find("li");
  var nextButton = breadcrumbContainer.find(".ml-br-next");
  var prevButton = breadcrumbContainer.find(".ml-br-prev");

  var currentPostBreadcrumb = breadcrumbUL.find(".current-post");

  if (breadcrumbUL.width() < breadcrumbContainer.width()) {
    showButtons();
  }

  nextButton.on("click", function () {
    var next = currentPostBreadcrumb.next("li");
    console.log(next);
    if (next.length > 0) {
      currentPostBreadcrumb = next;
      scrollToBreadcrumb(breadcrumbUL, currentPostBreadcrumb);
    }
  });
  prevButton.on("click", function () {
    var prev = currentPostBreadcrumb.prev("li");
    if (prev.length > 0) {
      currentPostBreadcrumb = prev;
      scrollToBreadcrumb(breadcrumbUL, currentPostBreadcrumb);
    }
  });

  scrollToBreadcrumb(breadcrumbUL, currentPostBreadcrumb);
  breadcrumbUL.scroll(function () {
    console.log($(this).scrollLeft());
  });

  function showButtons() {
    nextButton.show();
    prevButton.show();
  }
});
function scrollToBreadcrumb(ul, li) {
  console.log(ul.scrollLeft(), li[0].clientWidth, ul[0].clientWidth);
  if (ul.scrollLeft() + li[0].clientWidth < ul[0].clientWidth)
    ul.scrollLeft(li[0].offsetLeft);
}