0

我正在尝试在 wordpress 中的 Wootheme 的 Flexslider 中使用两个选择器,因为我需要为不同页面上的幻灯片使用不同的样式。

当我将此行添加到滑块的代码中时,

选择器:“.slides > li, .my_slides > li”

.sldes > li, - 工作正常,但 .my_slides - 不工作。

这是滑块代码的链接: https ://github.com/woothemes/FlexSlider/blob/master/jquery.flexslider.js

这是我使用 .slides 和 .my_slides 的代码:

/* *********** (12) Display Post Format ******** */

    function swm_display_post_format() {

        $format = get_post_format();

        if(empty($format)) {
            $format = 'standard';
        }
        if( $format == 'standard' || $format == 'gallery' || $format == 'image' || $format == 'video' ) {

            get_template_part( 'includes/' . $format );
        }
    }



    /* ************* (13) Blog Gallery Slider ************* */

    if ( !function_exists( 'swm_blog_gallery' ) ) {
        function swm_blog_gallery($postid, $image_size) { ?>
            <script type="text/javascript">
                jQuery(document).ready(function($){

                    if ( $.browser.msie ){
                        if($.browser.version == '8.0') {
                             $("#flex-<?php echo $postid; ?>").flexslider({
                                slideshow: false,
                                controlNav: true,
                                smoothHeight: true,
                                start: function(slider) {
                                    slider.container.click(function(event) {
                                        if( !slider.animating ) slider.flexAnimate( slider.getTarget('next') );
                                    });
                                }
                            });
                        }
                    }


                   $("#flex-<?php echo $postid; ?>").imagesLoaded( function() {
                    $("#flex-<?php echo $postid; ?>").flexslider({
                        slideshow: false,
                        controlNav: true,
                        smoothHeight: true,
                        start: function(slider) {
                            slider.container.click(function(event) {
                                if( !slider.animating ) slider.flexAnimate( slider.getTarget('next') );
                            });
                        }
                    });
                   });
                });
            </script>
            <?php

            $gal_images = rwmb_meta( 'swm_pf_gallery_photos', 'type=thickbox_image' );
            $meta_gallery_img_height = rwmb_meta( 'swm_meta_gallery_img_height');

            echo "<div class='pf_featured_img pf_l_img'><div class='swm_slider_box'><div id='flex-$postid' class='flexslider pfi_gallery'>";


            if ( $gal_images ) {
                echo "<ul class='slides'>";

                foreach ( $gal_images as $gal_image ) {
                   //   $swm_gal_image = "{$gal_image['url']}";
                    $swm_gal_image = swm_resize($gal_image['url'], 635, 425,  $meta_gallery_img_height, true,'c',true);
                        echo "<li><img src='$swm_gal_image' alt='' /></li>";
                }
                echo '</ul>';
            }
            echo "</div></div></div>";
        }
    }





    /* **************** (12) Display MY Post Format **************************** */

    function swm_display_my_post_format() {

        $format = 'gallery1';

        get_template_part( 'includes/' . $format );
    }



    /* ***********************(13) Blog MY Gallery Slider *********************** */

    if ( !function_exists( 'swm_my_blog_gallery' ) ) {
        function swm_my_blog_gallery($postid, $image_size) { ?>
            <script type="text/javascript">
                jQuery(document).ready(function($){

                    if ( $.browser.msie ){
                        if($.browser.version == '8.0') {
                            $("#flex-<?php echo $postid; ?>").flexslider({
                                slideshow: true,
                                controlNav: true,
                                smoothHeight: true,
                                start: function(slider) {
                                    slider.container.click(function(event) {
                                        if( !slider.animating ) slider.flexAnimate( slider.getTarget('next') );
                                    });
                                }
                            });
                        }
                    }


                    $("#flex-<?php echo $postid; ?>").imagesLoaded( function() {
                        $("#flex-<?php echo $postid; ?>").flexslider({
                            slideshow: true,
                            controlNav: true,
                            smoothHeight: true,
                            start: function(slider) {
                                slider.container.click(function(event) {
                                    if( !slider.animating ) slider.flexAnimate( slider.getTarget('next') );
                                });
                            }
                        });
                    });
                });
            </script>
            <?php

            $gal_images = rwmb_meta( 'swm_pf_gallery_photos', 'type=thickbox_image' );
            $meta_gallery_img_height = rwmb_meta( 'swm_meta_gallery_img_height');

            echo "<div class='pf_featured_img pf_l_img'><div class='my_swm_slider_box'><div id='flex-$postid' class='flexslider pfi_gallery'>";

            if ( $gal_images ) {
                echo "<ul class='my_slides'>";

                foreach ( $gal_images as $gal_image ) {
                    //  $swm_gal_image = "{$gal_image['url']}";
                    $swm_gal_image = swm_resize($gal_image['url'], 510, 410,  $meta_gallery_img_height, true,'c',true);
                    echo "<li><img src='$swm_gal_image' alt='' /></li>";
                }
                echo '</ul>';
            }
            echo "</div></div></div>";
        }
    }

这是在它工作的地方生成的 HTML:

     <div class="best_img_wrap">
            <div class="best_img">
                <script type="text/javascript">
                    jQuery(document).ready(function ($) {

                        if ($.browser.msie) {
                            if ($.browser.version == '8.0') {
                                $("#flex-42").flexslider({
                                    slideshow: false,
                                    controlNav: true,
                                    smoothHeight: true,
                                    start: function (slider) {
                                        slider.container.click(function (event) {
                                            if (!slider.animating) slider.flexAnimate(slider.getTarget('next'));
                                        });
                                    }
                                });
                            }
                        }


                        $("#flex-42").imagesLoaded(function () {
                            $("#flex-42").flexslider({
                                slideshow: false,
                                controlNav: true,
                                smoothHeight: true,
                                start: function (slider) {
                                    slider.container.click(function (event) {
                                        if (!slider.animating) slider.flexAnimate(slider.getTarget('next'));
                                    });
                                }
                            });
                        });
                    });
            </script>
                <div class="pf_featured_img pf_l_img">
                    <div class="swm_slider_box">
                        <div class="flexslider pfi_gallery" id="flex-42" style="height: 425px;">
                            <ul class="slides">
                                <li style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1;
                                    display: block; z-index: 2;" class="flex-active-slide">
                                    <img alt="" src="http://localhost/inst_new/wp-content/uploads/2013/08/Untitled-5-0x0_1.jpg"
                                        draggable="false"></li><li style="width: 100%; float: left; margin-right: -100%;
                                            position: relative; opacity: 0; display: block; z-index: 1;">
                                            <img alt="" src="http://localhost/inst_new/wp-content/uploads/2013/08/rp_11-0x0_1.jpg"
                                                draggable="false"></li><li style="width: 100%; float: left; margin-right: -100%;
                                                    position: relative; opacity: 0; display: block; z-index: 1;">
                                                    <img alt="" src="http://localhost/inst_new/wp-content/uploads/2013/08/violin-0x0_1.jpg"
                                                        draggable="false"></li></ul>
                            <ol class="flex-control-nav flex-control-paging">
                                <li><a class="flex-active">1</a></li><li><a>2</a></li><li><a>3</a></li></ol>
                            <ul class="flex-direction-nav">
                                <li><a href="#" class="flex-prev">Previous</a></li><li><a href="#" class="flex-next">
                                    Next</a></li></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

这是生成的 HTML 不起作用:

<div class="my_post_wrapper">
        <p>
        </p>
        <div class="caty_name">
            <a rel="category" title="View all posts in Crack Repairs" href="http://localhost/inst_new/?cat=8">
                Crack Repairs</a></div>
        <p>
        </p>
        <div class="my_post_title">
            <h3>
                <a title="Permanent Link to Recent Post 3 + Crack Repair" href="http://localhost/inst_new/?p=64"
                    class="service_single_title"></a>
                <div class="caty_title">
                    <a title="Permanent Link to Recent Post 3 + Crack Repair" href="http://localhost/inst_new/?p=64"
                        class="service_single_title">Recent Post 3 + Crack Repair</a></div>
            </h3>
        </div>
        <!-- .post title -->
        <div class="my_post_content featured_post">
            <script type="text/javascript">
                jQuery(document).ready(function ($) {

                    if ($.browser.msie) {
                        if ($.browser.version == '8.0') {
                            $("#flex-64").flexslider({
                                slideshow: true,
                                controlNav: true,
                                smoothHeight: true,
                                start: function (slider) {
                                    slider.container.click(function (event) {
                                        if (!slider.animating) slider.flexAnimate(slider.getTarget('next'));
                                    });
                                }
                            });
                        }
                    }


                    $("#flex-64").imagesLoaded(function () {
                        $("#flex-64").flexslider({
                            slideshow: true,
                            controlNav: true,
                            smoothHeight: true,
                            start: function (slider) {
                                slider.container.click(function (event) {
                                    if (!slider.animating) slider.flexAnimate(slider.getTarget('next'));
                                });
                            }
                        });
                    });
                });
        </script>
            <div class="pf_featured_img pf_l_img">
                <div class="my_swm_slider_box">
                    <div class="flexslider pfi_gallery" id="flex-64">
                        <ul class="my_slides">
                            <li>
                                <img alt="" src="http://localhost/inst_new/wp-content/uploads/2013/08/Untitled-1-0x0_1.jpg"></li><li>
                                    <img alt="" src="http://localhost/inst_new/wp-content/uploads/2013/08/Untitled-71-0x0_1.jpg"></li></ul>
                    </div>
                </div>
            </div>
            <p>
                <a class="white_button" href="http://localhost/inst_new/?p=64">Read more &gt;&gt;</a></p>
        </div>
    </div>
4

1 回答 1

2

默认情况下,Flexslider 在 UL 上查找类“幻灯片”。这是您的第一个示例的情况,第二个示例是“my_slides”。

你可以改变第二个滑块UL上的类,也可以在初始化flexslider时指定选择器,像这样:

                $("#flex-64").imagesLoaded(function () {
                    $("#flex-64").flexslider({
                        slideshow: true,
                        controlNav: true,
                        smoothHeight: true,
                        selector: '.my_slides > li',
                        start: function (slider) {
                            slider.container.click(function (event) {
                                if (!slider.animating) slider.flexAnimate(slider.getTarget('next'));
                            });
                        }
                    });
                });

编辑:我想我错过了你的一个问题。如果我理解正确,您是在尝试为 Flexslider 提供两个不同的选择器以使其可能起作用?这应该可以,但它没有在您的代码中表示。我错过了什么吗?

于 2013-08-27T20:56:03.093 回答