i want to display images of my custom plugin in carousel style

Question

i have made my first custom plugin which displays image gallery through shortcode. currently images are displayed randomely. i want to display them in carousel style by the use of owl carousel.

i have tried by including css and js files of owl carousel in my custom plugin folder. may be my scripts and styles are not getting called.i need help how to add loop code in my custom code. please guide me step by step as i am beginers in custom plugin development.

this is meta from where gallery is getting fetched and scripts and styles are included, please have a look if its proper.

function gallery_metabox_enqueue($hook) {
    if ( 'post.php' == $hook || 'post-new.php' == $hook ) {
      wp_enqueue_script('gallery-metabox', plugin_dir_url( __FILE__ ) . '/js/gallery-metabox.js', array('jquery', 'jquery-ui-sortable'));

     wp_enqueue_script('gallery-metabox', plugin_dir_url( __FILE__ ) . '/js/owl.carousel.min.js', array('jquery', 'jquery-ui-sortable'));
     wp_enqueue_script('gallery-metabox', plugin_dir_url( __FILE__ ) .'/css/owl.css', array(), null, 'all' );
     /*wp_enqueue_style( 'owl-carousel' );*/
     wp_enqueue_style( 'owl.css', get_stylesheet_uri() );

    }
  }

  add_action('admin_enqueue_scripts', 'gallery_metabox_enqueue');

-----------------------------------------------------------------------------
this is shortcode from where gallery will be displayed in page where shortcode is pasted.

add_shortcode( 'banners', 'display_banners' ); 
function display_banners($atts){
$meta = get_post_meta($atts['id'],'vdw_gallery_id', true);
?>
<div id="owl-demo" class="owl-carousels">
<?php
foreach ($meta as $key => $value) {
$attpost= get_post($value); // declare post variable 
echo '<img class="items" src="'.$attpost->guid.'" />'; 
}
?>
</div>
<?php
   extract(shortcode_atts(array('key' => 'vdw_gallery_id'), $atts));

    if($key && array_key_exists($key, $meta)) {

        return $meta[$key][0];
   }
    exit;
 }
 ?>

Answer 1

You can replace with

from : wp_enqueue_script('gallery-metabox', plugin_dir_url( __FILE__ ) .'/css/owl.css', array(), null, 'all' );
     /*wp_enqueue_style( 'owl-carousel' );*/

To : wp_enqueue_style('gallery-metabox', plugin_dir_url( __FILE__ ) .'/css/owl.css', array(), null, 'all' );
     /*wp_enqueue_style( 'owl-carousel' );*/

And make sure that you are able to get css and js in source code (ctrl+u)