WordPress图片库的自定义HTML，只输出一半的功能

我从一个例子中获取了以下代码并对其进行了调整，以便wordpress中的标准图库将输出为Flexslider和Carousel。 我可以很好地输出其中一个，但是我也为轮播添加了额外的*输出，现在只有轮播打印出来。 任何关于我如何输出整个东西的帮助将不胜感激

add_filter('post_gallery', 'my_post_gallery', 10, 2);
function my_post_gallery($output, $attr) {
global $post;
if (isset($attr['orderby'])) {
    $attr['orderby'] = sanitize_sql_orderby($attr['orderby']);
    if (!$attr['orderby'])
        unset($attr['orderby']);
}
extract(shortcode_atts(array(
    'order' => 'ASC',
    'orderby' => 'menu_order ID',
    'id' => $post->ID,
    'itemtag' => 'dl',
    'icontag' => 'dt',
    'captiontag' => 'dd',
    'columns' => 3,
    'size' => 'thumbnail',
    'include' => '',
    'exclude' => ''
), $attr));
$id = intval($id);
if ('RAND' == $order) $orderby = 'none';
if (!empty($include)) {
    $include = preg_replace('/[^0-9,]+/', '', $include);
    $_attachments = get_posts(array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby));
    $attachments = array();
    foreach ($_attachments as $key => $val) {
        $attachments[$val->ID] = $_attachments[$key];
    }
}
if (empty($attachments)) return '';
// Here's your actual output, you may customize it to your need
$output = "<div class='"wordpress-gallery'">'n";
$output = "<div id='"sliding'" class='"flexslider flexslider--post-content'">'n";
//$output .= "<div class='"preloader'"></div>'n";
$output .= "<ul class='"slides flexslider__slides'">'n";
// Now you loop through each attachment
foreach ($attachments as $id => $attachment) {
    // Fetch the thumbnail (or full image, it's up to you)
//      $img = wp_get_attachment_image_src($id, 'medium');
//        $imgThumbnail = wp_get_attachment_image_src($id, 'thumbnail');
        $img = wp_get_attachment_image_src($id, 'full');
    $output .= "<li class='"slide flexslider__slide cover'">'n";
    $output .= "<img src='"{$img[0]}'" width='"{$img[1]}'" height='"{$img[2]}'" alt='"'" />'n";
    $output .= "</li>'n";
}
$output .= "</ul>'n";
$output .= "</div>'n";
$output = "<div id='"carousel'" class='"flexslider flexslider--post-content-carousel'">'n";
$output .= "<ul class='"slides flexslider__slides'">'n";
foreach ($attachments as $id => $attachment) {
    $imgThumbnail = wp_get_attachment_image_src($id, 'thumbnail');
    $output .= "<li >'n";
    $output .= "<img src='"{$imgThumbnail[0]}'" alt='"'" />'n";
    $output .= "</li>'n";
}
$output .= "</ul>'n";
$output .= "</div>'n";
$output .= "</div>'n";

return $output;

}

到目前为止输出的 HTML（它不输出 #slidingdiv，只输出 #carousel）：

<div id="carousel" class="flexslider flexslider--post-content-carousel">
    <div class="flex-viewport" style="overflow: hidden; position: relative;">
        <ul class="slides flexslider__slides" style="width: 1400%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
            <li class="flex-active-slide" style="width: 210px; float: left; display: block;">
                <img src="//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-300x300.jpg" alt="" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-1-300x300.jpg" alt="" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-2-300x300.jpg" alt="" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-3-300x300.jpg" alt="" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-4-300x300.jpg" alt="" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-5-300x300.jpg" alt="" draggable="false">
            </li>
            <li style="width: 210px; float: left; display: block;">
                <img src="//localhost:3002/test-site/wp-content/uploads/2016/01/test-image-6-300x300.jpg" alt="" draggable="false">
            </li>
        </ul>
    </div>
    <ul class="flex-direction-nav">
        <li class="flex-nav-prev"><a class="flex-prev flex-disabled" href="#" tabindex="-1">Previous</a></li>
        <li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li>
    </ul>
</div>