<div class="catcarusel">
  <div id="carousel" class="owl-carousel" style="position: absolute;">
  <?php foreach ($categories as $category) { ?>
   <div class="item text-center" id="path=<?php echo $category['category_id']; ?>" data-hash="path=<?php echo $category['category_id']; ?>">
  <a href="<?php echo $category['href']; ?>" class="list-group-item active"><img src="<?php echo $category['img']; ?>"><div class="catrod"><?php echo $category['name']; ?></div></a>
   <div class="block">
   <div class="hide">
  <svg width="10" height="4" viewBox="0 0 10 4" fill="none">
<path d="M0 0H10L5 4L0 0Z" fill="#370A04"/>
</svg>
   </div>
      <div  class="extremum-slide">
  <?php if ($category['children']) { ?>
  <?php foreach ($category['children'] as $child) { ?>
  <?php if ($child['category_id'] == $child_id) { ?>
  <a href="<?php echo $child['href']; ?>" class="list-group-item active"><?php echo $child['name']; ?></a>
  <?php } else { ?>
  <a href="<?php echo $child['href']; ?>" class="list-group-item"><?php echo $child['name']; ?></a>
  <?php } ?>
  <?php } ?>
  <?php } ?>
      </div>
     </div>
     </div>
  <?php } ?>
  <div class="item text-center"><a href="https://product.yesdostavka.ru/" class="list-group-item"><svg width="75" height="75" viewBox="0 0 75 75" fill="none">
<rect width="75" height="75" rx="50" fill="#4AC82B"/>
</svg><div class="catrod">Магазин продуктов</div></a></div>
</div>
</div>


<script type="text/javascript"><!--
$(function() {
  var owl = $(".owl-carousel");
  owl.owlCarousel({
    items: 9,
    nav: true,
    navText: ['<svg width="31" height="64" viewBox="0 0 31 64" fill="none"><path d="M29.9468 55.9303C31.6421 58.11 31.2494 61.2514 29.0697 62.9468C26.89 64.6421 23.7486 64.2494 22.0532 62.0697L29.9468 55.9303ZM5 32L1.05324 35.0697C-0.35108 33.2642 -0.35108 30.7358 1.05324 28.9303L5 32ZM22.0532 1.93029C23.7486 -0.249439 26.89 -0.642113 29.0697 1.05324C31.2494 2.74859 31.6421 5.88996 29.9468 8.0697L22.0532 1.93029ZM22.0532 62.0697L1.05324 35.0697L8.94676 28.9303L29.9468 55.9303L22.0532 62.0697ZM1.05324 28.9303L22.0532 1.93029L29.9468 8.0697L8.94676 35.0697L1.05324 28.9303Z" fill="#FAF5F0"/></svg>', '<svg width="31" height="64" viewBox="0 0 31 64" fill="none"><path d="M1.05324 55.9303C-0.642111 58.11 -0.249439 61.2514 1.9303 62.9468C4.11003 64.6421 7.25141 64.2494 8.94676 62.0697L1.05324 55.9303ZM26 32L29.9468 35.0697C31.3511 33.2642 31.3511 30.7358 29.9468 28.9303L26 32ZM8.94676 1.93029C7.25141 -0.249439 4.11003 -0.642113 1.9303 1.05324C-0.249438 2.74859 -0.642111 5.88996 1.05324 8.0697L8.94676 1.93029ZM8.94676 62.0697L29.9468 35.0697L22.0532 28.9303L1.05324 55.9303L8.94676 62.0697ZM29.9468 28.9303L8.94676 1.93029L1.05324 8.0697L22.0532 35.0697L29.9468 28.9303Z" fill="#FAF5F0"/></svg>'],
    pagination: false,
    loop: true,
    center: true,
    scrollPerPage: true,
    callbacks: true,
    margin: 10,
    startPosition: 'path=<?php echo $category['category_id']; ?>',
    slideBy: 1,
    autoplayHoverPause: true,
  })}).on('click', '.owl-item', function(e) {
  const carousel = $('.owl-carousel').data('owl.carousel');
  carousel.to(carousel.relative($(this).index()), false, true);
      owl.trigger("to.owl.carousel", i);
});

--></script>

<script>
$(document).click( function(event){
    if( $(event.target).closest(".extremum-slide"))
    return;
    $(".extremum-slide").slideUp("slow");
    event.stopPropagation();
});
$('.hide').click( function() {
        $(this).siblings(".extremum-slide").slideToggle("slow");
        return false;
    });
</script>