jQuery owlCarousel插件不适用于Shortcode

时间:2018-12-09 17:35:27

标签: php jquery shortcode owl-carousel wordpress-shortcode

我正在将OwlCarousel用作ShortCode。在Shortcode中,我将Owlcarousel激活到(welcome_slides)类中。 轮播工作完美。但我想停止自动播放和圆点。 因此我将值更改为False。但是“自动播放和圆点”仍然有效。

为什么脚本不起作用?

<?php

function bizzon_slide_shortcode($atts){
extract( shortcode_atts( array(
    'count' => '',
), $atts) );

$q = new WP_Query(
    array('posts_per_page' => -1, 'post_type' => 'slide')
    );      

$list = '
      <script>
       jQuery(document).ready(function($){
         $(".welcome_slides").owlCarousel({
        items: 1,
        loop: true,
        autoplay: false,
        smartSpeed: 800,
        nav: true,
        navText: ["<i class=\'pe-7s-angle-left\'</i>", "<i class=\'pe-7s-angle-right\'</i>"],
        dots: false
    });  

       });
    </script>

<section class="wellcome_area clearfix" id="home"> <div class="welcome_slides owl-carousel">';
while($q->have_posts()) : $q->the_post();
    $idd = get_the_ID();
    $custom_field = get_post_meta($idd, 'custom_field', true);
    $post_content = get_the_content();
    $list .= '
     <div class="single_slide text-center jarallax" style="background-image:url(<?php echo get_template_directory_uri(); ?>/img/bg-img/slide-5.jpg);">
        <div class="slide_overlay" style="background:red; opacity:.5;"></div>
            <div class="table">
                <div class="table_cell">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <!-- Wellcome Heading Text -->
                                <div class="wellcome_heading_text">
                                    <h2>Your Development <span>Our Satisfactory</span></h2>
                                    <p>'.$post_content.'</p>
                                </div>
                                <!-- Learn More Button-->
                                <div class="learn_more mt-30">
                                    <a href="#">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    ';        
endwhile;
$list.= '</div></section>';
wp_reset_query();
return $list;
}
add_shortcode('bizzon_slide', 'bizzon_slide_shortcode');  

0 个答案:

没有答案