Help with a jQuery Carousel

时间:2017-01-22 作者:Joe Fedorowicz

我遇到了一个问题,jQuery调用没有命中生成的div集(来自Eventbrite API调用)。见所附代码:

//* Add widget support for homepage. If no widgets active, display the default loop.
add_action( \'genesis_meta\', \'elegance_home_genesis_meta\' );
function elegance_home_genesis_meta() {


        // Force content-sidebar layout setting
        add_filter( \'genesis_pre_get_option_site_layout\', \'__genesis_return_full_width_content\' );

        // Add elegance-home body class
        add_filter( \'body_class\', \'elegance_body_class\' );
        function elegance_body_class( $classes ) {

            $classes[] = \'elegance-home\';
            return $classes;

        }

        // Remove the default Genesis loop
        remove_action( \'genesis_loop\', \'genesis_do_loop\' );

        // Add homepage widgets
        add_action( \'genesis_loop\', \'elegance_homepage_top_widgets\' );
        add_action( \'genesis_loop\', \'elegance_homepage_bottom_widgets\' );


}

function elegance_homepage_top_widgets() {

?>

<script>
  var settings = {
    "async": true,
    "crossDomain": true,
    "url": "https://www.eventbriteapi.com/v3/organizers/12073337884/events/?token=ZMDFKJWCHAMX5WFVPBAJ",
    "method": "GET",
    "headers": {}
  }

  jQuery.ajax(settings).done(function (data) {
    console.log(data);

for ( i = 0; i <= data.pagination.object_count; i++) { 

    var content = \'<div class="event \' + data.events[i].id + \'"><h3>\' + data.events[i].name.text + \'</h3><br /><a target="_blank" class="button" href="\' + data.events[i].url + \'">Sign Up Here</a></div>\';
   jQuery("#eventbrite-events").append(content);
}

  });
</script>
<div class="home-top widget-area"><div class="wrap">
<div id="eventbrite-events"></div>
</div></div> 

<?php

}

function elegance_homepage_bottom_widgets() {

    genesis_widget_area( \'home-middle\', array(
        \'before\' => \'<div class="home-middle widget-area">\',
        \'after\'  => \'</div>\',
    ) );


    if ( is_active_sidebar( \'cta-widget\' ) ) {

        echo \'<div class="cta-widget">\';

        genesis_widget_area( \'cta-widget\', array(
            \'before\' => \'<div class="cta widget-area">\',
            \'after\'  => \'</div>\',
        ) );

        echo \'</div>\';

    }

    if ( is_active_sidebar( \'home-bottom\' ) ) {

        echo \'<div class="home-bottom-full">\';

        genesis_widget_area( \'home-bottom\', array(
            \'before\' => \'<div class="home-bottom widget-area">\',
            \'after\'  => \'</div>\',
        ) );

        echo \'</div>\';

    }

}

add_action( \'wp_enqueue_scripts\', \'hp_elegance_enqueue_scripts_styles\' );
function hp_elegance_enqueue_scripts_styles() {

    wp_enqueue_style( \'stylecss\', get_stylesheet_directory_uri() . \'/css/slick.css\' );
    wp_enqueue_style( \'stylethemecss\', get_stylesheet_directory_uri() . \'/css/slick-theme.css\' );
    wp_enqueue_script( \'slick\', get_stylesheet_directory_uri() . \'/js/slick.min.js\', array( \'jquery\' ), \'1.0.0\' );
    wp_enqueue_script( \'initslick\', get_stylesheet_directory_uri() . \'/js/init-slick.js\', array( \'jquery\' ), \'1.0.0\' );

}

genesis();
我需要生成的div(有七个)是那些被光滑的旋转木马捕获的div。如果我手动操作,它会工作,但我认为操作顺序是错误的。我需要在生成div之后运行Carousel脚本。

1 个回复
SO网友:Johansson

要启动slick carousel,您需要在主题的页脚或页眉(或页面加载的任何其他地方)中添加以下脚本:

<script defer type="text/javascript">
        $(document).ready(function(){$(\'.myDIV\').slick({autoplay:true});});
</script>
记住变化myDIV 包含Subdivisions(包含幻灯片的父DIV)的分区的类名。