我想以轮播样式显示我的自定义插件的图像

Question

我制作了第一个自定义插件，该插件可通过简码显示图片库。当前图像是随机显示的。我想通过使用猫头鹰旋转木马以旋转木马的方式展示它们。

我已经尝试过在我的自定义插件文件夹中加入owl carousel的css和js文件。可能是我的脚本和样式没有被调用。我需要帮助如何在自定义代码中添加循环代码。请逐步指导我，因为我是自定义插件开发的初学者。

这是从中获取图库并包含脚本和样式的元，请查看其是否正确。

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 get image object using below code

    $images = get_post_meta($post->ID, 'vdw_gallery_id', true);
    foreach ($images as $image) {
        $image_obj = get_post($image);
        echo $image_obj->post_excerpt;
    }

Answer 2

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' );*/

并确保您能够在源代码（ctrl + u）中获得CSS和JS