Create and Use an Gallery Plugin in WP

main.js

var owlBannerCarousel = $('.carousel-brands').owlCarousel({
    scrollPerPage : true,
    navigation: true,
    dots : false,
    pagination: true,
    touchDrag: true,
    mouseDrag: true,
    margin: 0,
    loop: true,
    items: 1,
    responsive : {
        480 : { items : 4 }, // from zero to 480 screen width 4 items
        768 : { items : 6 }, // from 480 screen widthto 768 6 items
        1024 : { items : 8 },  // from 768 screen width to 1024 8 items
        1480 : { items : 8 }  // from 768 screen width to 1024 8 items
    },
    autoplay:false,
    autoplayTimeout:5000,
    autoplayHoverPause:false
});

setup.php

<?php
/** ADD TO assets FUNCTION */
function assets(){
    
    wp_enqueue_style('ngala/owl.carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css', false, null);
    wp_enqueue_script('ngala/owl.carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js', ['jquery'], null, true);

}

 /** APPEND TO END OF FILE */
function register_brand_post_type() {
  
  $labels = array(
      'name' => _x( 'Brands', 'proauto-brands' ),
      'singular_name' => _x( 'Brand', 'proauto-brands' ),
      'add_new' => _x( 'Add New', 'proauto-brands' ),
      'add_new_item' => _x( 'Add New Brand', 'proauto-brands' ),
      'edit_item' => _x( 'Edit Brand', 'proauto-brands' ),
      'new_item' => _x( 'New Brand', 'proauto-brands' ),
      'view_item' => _x( 'View Brand', 'proauto-brands' ),
      'search_items' => _x( 'Search Brands', 'proauto-brands' ),
      'not_found' => _x( 'No Brand found', 'proauto-brands' ),
      'not_found_in_trash' => _x( 'No Brand found in Trash', 'proauto-brands' ),
      'parent_item_colon' => _x( 'Parent Brand:', 'proauto-brands' ),
      'menu_name' => _x( 'Brands', 'proauto-brands' ),
  );

  $rewrite = array(
      'slug'                => 'brand',
      'with_front'          => true,
      'pages'               => true,
      'feeds'               => true,
  );

  $args = array(
      'label'               => __( 'Brands', 'proauto-brands' ),
      'description'         => __( 'Brands management', 'proauto-brands' ),
      'labels'              => $labels,
      'supports'            => array( 'title', 'thumbnail' ), //CHECK: https://codex.wordpress.org/Function_Reference/post_type_supports
      'hierarchical'        => true,
      'public'              => true,
      'show_ui'             => true,
      'show_in_menu'        => true,
      'menu_position'       => 5,
      'menu_icon'           => 'dashicons-format-gallery',
      'show_in_admin_bar'   => true,
      'show_in_nav_menus'   => true,
      'can_export'          => true,
      'has_archive'         => true,
      'exclude_from_search' => false,
      'publicly_queryable'  => true,
      'rewrite'             => $rewrite,
      'capability_type'     => 'post',
  );

  register_post_type( 'brand', $args );

}

add_filter('init', __NAMESPACE__ . '\\register_brand_post_type');

template.php

<div class="owl-carousel owl-theme carousel-brands">
    <?php 
    $arrBrands = get_posts([
        'post_type' => 'brand'
    ]);
    for( $i = 0; $i < count($arrBrands); $i++){
        ?>      
        <div class="brand-item">
            <div class="brand-box"><img src="<?php echo get_the_post_thumbnail_url($arrBrands[$i]->ID, 'full'); ?>"></div>
            <?php
            $i++; 
            if( empty( $arrBrands[$i] ) ) break; //FALLBACK TO AVOID UNDEFINED INDEX IN ARRAY
            ?>
            <div class="brand-box"><img src="<?php echo get_the_post_thumbnail_url($arrBrands[$i]->ID, 'full'); ?>"></div>
        </div>
        <?php
    }
    ?>
</div>