Flexslider更改代码

时间:2017-02-20 15:32:10

标签: javascript jquery wordpress

我使用WordPress。主题名称Wp-tuts。我的网站:http://www.memuralimi.com

我使用滑块; Flexslider。当我用鼠标点击时,图像正在改变。

我希望当鼠标滑过缩略图时,图像会发生变化。

flexslider-home.js

jQuery(function($){
    $(window).load(function() {
        $('.featured-slider-preloader').hide();
        $('#featured-slider').flexslider({
            slideshow : true,
            controlsContainer: "#featured-slider-wrap",
            animation : 'fade',
            pauseOnHover: true,
            animationSpeed : 400,
            smoothHeight : true,
            directionNav: false,
            prevText : '<span class="fa fa-angle-left"></span>',
            nextText : '<span class="fa fa-angle-right"></span>',
            controlNav : "thumbnails"
        });
    });
});

内容功能-slider.php

<?php
$wpex_featured_cat = get_theme_mod( 'wpex_homepage_slider_cat' );
// Show homepage featured slider if theme panel category isn't blank
if( $wpex_featured_cat !== '' && $wpex_featured_cat !== '-1' ) {

    // Get posts based on featured category
    $wpex_query = new WP_Query( array(
        'post_type'         =>'post',
        'posts_per_page'    => get_theme_mod( 'wpex_homepage_slider_count', '6' ),
        'no_found_rows'     => true,
        'tax_query'         => array(
            'relation'      => 'AND',
            array(
                'taxonomy'  => 'category',
                'field'     => 'ID',
                'terms'     => $wpex_featured_cat
                )
            ),
        'meta_query'    => array(
            array(
                'key'   => '_thumbnail_id',
            )
        )
    ) );

    if( $wpex_query->have_posts() ) {

        // Get Scripts
        wp_enqueue_script( 'flexslider', WPEX_JS_DIR_URI .'/flexslider.js', array( 'jquery' ), '', true );
        wp_enqueue_script( 'wpex-flexslider-home', WPEX_JS_DIR_URI .'/flexslider-home.js', array( 'flexslider' ), '', true); ?>
        <div id="featured-slider-wrap" class="boxed clr">


            <div id="featured-slider" class="flexslider-container">
                <div class="flexslider">
                    <ul class="slides">
                        <?php
                        // Loop through each post
                        while( $wpex_query->have_posts() ) : $wpex_query->the_post(); ?> 
                            <li class="featured-slider-slide" data-thumb="<?php echo aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ), 490, 340, true ); ?>">
                                <div class="featured-slider-img">
                                    <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>">
                                        <img src="<?php echo aq_resize( wp_get_attachment_url( get_post_thumbnail_id() ), '400', '225', true ); ?>" alt="<?php echo the_title(); ?>" />
                                    </a>
                                </div><!-- .featured-slider-img -->
                                    <div class="featured-slider-caption-excerpt clr">
                                    </div><!-- .featured-slider-caption-excerpt -->
                                </article><!--.featured-slider-caption -->
                            </li><!-- .featured-slider-->
                        <?php endwhile; ?>
                    </ul><!--.slides -->
                </div><!-- .flexslider -->
                <span class="featured-slider-preloader"><i class="fa fa-spinner fa-spin"></i></span>
            </div><!-- #featured-flexslider -->
        </div><!-- #featured-slider-wrap -->
    <?php } ?>
    <?php wp_reset_postdata(); ?>
<?php } ?>

0 个答案:

没有答案