Flexslider 幻灯片不会在 Firefox 和 Chrome Canary 上显示

Question

此问题不会出现在任何其他浏览器中。我已经发布了相关的 HTML 和 CSS 代码。这里的代码有什么明显的问题吗？

Firefox 中的 Flexslider

IE 中的 Flexslider

这是代码的 HTML 幻灯片部分的相关部分：

    <section class="wrapper padding50">
        <div class="container">
            <div class="row">
                <div class="col-md-4">


                <h2>Latest Blog Posts</h2>
                <div class="row recent-posts">
                    <div class="flexslider" data-plugin-options='{"directionNav":false, "controlNav":false, "animation":"fade", "animationLoop":true, "slideshow": true}'>
                        <ul class="slides">

    <li>
        <div class="col-md-12">
            <article>

                <h4>
                    <a href="blog_Article.asp?the-internet-of-things-and-edi" onClick="ga('send', 'event', 'Blog', 'Clicked', 4);">Random Stuff</a>
                </h4>
                <span><i class="fa fa-calendar"></i>&nbsp;December 10, 2014</span>
                <p>Text</p>
                <!--<div class="post-meta">
                    <span><i class="fa fa-user"></i> By
                        <a href="blog.asp?author=2">
                            Author
                        </a> </span>
                    <span><i class="fa fa-tag"></i>

    <a href="blog.asp?kw=44">Text, </a>
    <a href="blog.asp?kw=51">Text, </a>
    <a href="blog.asp?kw=1">More Text</a>
                                        </div>-->
<a href="blog_Article.asp?stuff" class="btn btn-xs btn-main-color" onClick="ga('send', 'event', 'Blog', 'Clicked', 4);">

                                        </a>
                                    </article>
                                </div>
                            </li>

                            </ul>
    </div>
</div>
                </div>
            </div>
        </div>
    </section>

这里是 CSS 代码：

/* ---------------------------------------------------------------------- */
/*  Flexslider Elements
/* ---------------------------------------------------------------------- */
.slides li {
    position: relative;
}
#carousel li {
    margin-right: 5px;
}
#carousel li img {
    padding: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: #D0D0D0;
    cursor: pointer;
}

.flex-direction-nav a:before {
    font-size: 20px !important;
}
.flex-control-paging li a.flex-active {
    background: rgba(0, 0, 0, 0.4) !important;
}
.flex-control-paging li a {
    background: rgba(0, 0, 0, 0.2) !important;
}
.flex-control-nav {
    bottom: auto !important;
    margin-top: 10px !important;
    position: relative !important;
}

.flexslider {
    background: url("assets/") no-repeat scroll center center #FFFFFF;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    position: relative;
}
#carousel {
    margin-top: 5px;
}
div.flexslider {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}
.flex-direction-nav a {
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -o-transition: color 0 ease-in !important;
    transition: none !important;
    background: #222222;
    border: none;
    font-weight: normal;
    margin: 0;
    opacity: 0.5;
    width: 26px !important;
    height: 26px !important;
    line-height: 26px;
    color: #FFFFFF !important;
    text-align: center !important;
    text-shadow: none !important;
}
.flex-direction-nav a.flex-next {
    right: 10px !important;
    font-size: 9px;
}
.flex-direction-nav a.flex-next:before {
    font-family: "fontawesome" !important;
    content: "\f105" !important;
}
.flex-direction-nav a.flex-prev {
    left: 10px !important;
    font-size: 9px;
}
.flex-direction-nav a.flex-prev:before {
    font-family: "fontawesome" !important;
    content: "\f104" !important;
}

这里是 Javascript:

var win = $(window), body = $('body'), scroll_top = win.scrollTop(), screen_height = win.height(), screen_width = win.width(), navbar_height = $('.navbar').outerHeight(), logo_font_size = Math.ceil(parseInt($('.navbar-brand').css('font-size'))), min_height = 40, size = [], navigation_position_top = $('.navbar').position().top, navbar = $('.navbar'), navbar_brand = $('.navbar-brand'), isMobile = false;
// Debounce Function
(function($, sr) {
    // debouncing function from John Hann
    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
    var debounce = function(func, threshold, execAsap) {
        var timeout;
        return function debounced() {
            var obj = this, args = arguments;

            function delayed() {
                if(!execAsap)
                    func.apply(obj, args);
                timeout = null;
            };
            if(timeout)
                clearTimeout(timeout);
            else if(execAsap)
                func.apply(obj, args);
            timeout = setTimeout(delayed, threshold || 100);
        };
    };
    // smartresize
    jQuery.fn[sr] = function(fn) {
        return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr);
    };
})(jQuery, 'clipresize');
//Main Function
var Main = function() {
    //function to detect mobile or explorer browser and its version
    var runInit = function() {
        if(/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
            var ieversion = new Number(RegExp.);
            if(ieversion == 8) {
                isIE8 = true;
            } else if(ieversion == 9) {
                isIE9 = true;
            }
        };
        if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            isMobile = true;
            body.addClass('isMobile');
        };
        navbar_brand.contents().filter(function() {
            return this.nodeType !== 3;
        }).each(function(i) {
            if($(this).is('img')) {
                size[i] = Math.ceil(parseInt($(this).height()));
            } else if($(this).css('font-size')) {
                size[i] = Math.ceil(parseInt($(this).css('font-size')));
            }
        });
    };
    var runDropdownToggle = function(func, threshold, execAsap) {
        if(isMobile == false) {
            $('.dropdown-toggle').dropdownHover({
                delay: 0
            });
        }
    };
    //Window Resize Function
    var runWindowResize = function(func, threshold, execAsap) {
        //wait until the user is done resizing the window, then execute
        $(window).clipresize(function() {
            screen_height = win.height();
            screen_width = win.width();
            if(screen_width < 979) {
                $('.navbar-default').removeAttr('style');
                navbar_brand.removeAttr('style');
                navbar_brand.contents().filter(function() {
                    return this.nodeType !== 3;
                }).each(function(i) {
                    $(this).removeAttr('style');
                });
            } else {
                navigation_position_top = $('#topbar').outerHeight();

            }
            runElementsPosition();

            animateElements();
        });
    };
    //Set all Animated Elements
    var setAnimations = function() {
        $('.animate-group').each(function() {
            $(this).find('.animate').each(function() {
                runElementsAnimation($(this));
            });
        });
        $('.animate-if-visible').each(function() {
            runElementsAnimation($(this));
        });
    };
    //Search Box Function
    var setSearchMenu = function() {
        $('.menu-search > a').bind('click', function(e) {
            if($('.search-box').is(":hidden")) {
                $('.search-box').css({
                    scale: 0.8,
                    opacity: 0,
                    display: 'block'
                }).transition({
                    scale: 1,
                    opacity: 1
                }, 200, 'easeOutBack');
            } else {
                $('.search-box').transition({
                    scale: 0.9,
                    opacity: 0
                }, 200, 'easeInBack', function() {
                    $(this).hide();
                });
            }
            return false;
            e.stopPropagation();
        });
        $('.menu-search').bind('click', function(e) {
            e.stopPropagation();
        });
        $('html').click(function() {
            if($('.search-box').is(":visible")) {
                $('.search-box').transition({
                    scale: 0.9,
                    opacity: 0
                }, 200, 'easeInBack', function() {
                    $(this).hide();
                });
            }
        });
    };
    //Function to shrink navigation menu when scrolling down
    var runElementsPosition = function() {
        scroll_top = win.scrollTop();
        screen_height = win.height();
        new_navbar_height = navbar_height - scroll_top;
        if(isMobile == false && screen_width > 979) {
            new_logo_font_size = logo_font_size * navbar.outerHeight() / navbar_height;
            if(navigation_position_top > 0) {
                sticky_navigation();
            }
            if(scroll_top == 0) {
                navbar.css({
                    'height': navbar_height,
                    'line-height': (navbar_height - 2) + 'px'
                });
                navbar.find('.navbar-nav').children('li').children('a').css({
                    'height': navbar_height,
                    'line-height': (navbar_height - 2) + 'px'
                });
                body.css({
                    'padding-top': navbar_height + $('#topbar').outerHeight()
                });
                navbar_brand.css('font-size', logo_font_size + 'px');
                navbar_brand.contents().filter(function() {
                    return this.nodeType !== 3;
                }).each(function(i) {
                    if($(this).is('img')) {
                        $(this).css({
                            'height': size[i] + 'px',
                            'width': 'auto'
                        });
                    } else if($(this).css('font-size')) {
                        $(this).css('font-size', size[i] + 'px');
                    }
                });
            } else if(scroll_top < navbar_height && new_navbar_height >= min_height) {
                navbar_brand.css('font-size', new_logo_font_size + 'px');
                navbar_brand.contents().filter(function() {
                    return this.nodeType !== 3;
                }).each(function(i) {
                    if($(this).is('img')) {
                        $(this).css({
                            'height': Math.ceil(size[i] * navbar.outerHeight() / navbar_height) + 'px',
                            'width': 'auto'
                        });
                    } else if($(this).css('font-size')) {
                        $(this).css('font-size', Math.ceil(size[i] * navbar.outerHeight() / navbar_height) + 'px');
                    }
                });
                navbar.css({
                    'height': new_navbar_height,
                    'line-height': (new_navbar_height - 2) + 'px'
                });
                navbar.find('.navbar-nav').children('li').children('a').css({
                    'height': new_navbar_height,
                    'line-height': (new_navbar_height - 2) + 'px'
                });
                body.css({
                    'padding-top': new_navbar_height + $('#topbar').outerHeight()
                });
            } else {
                navbar.css({
                    'height': min_height,
                    'line-height': (min_height - 2) + 'px'
                });
                navbar.find('.navbar-nav').children('li').children('a').css({
                    'height': min_height,
                    'line-height': (min_height - 2) + 'px'
                });
                body.css({
                    'padding-top': min_height + $('#topbar').outerHeight()
                });
                new_logo_font_size = logo_font_size * navbar.outerHeight() / navbar_height;
                navbar_brand.css('font-size', Math.ceil(new_logo_font_size) + 'px');
                navbar_brand.contents().filter(function() {
                    return this.nodeType !== 3;
                }).each(function(i) {
                    if($(this).is('img')) {
                        $(this).css({
                            'height': Math.ceil(size[i] * navbar.outerHeight() / navbar_height) + 'px',
                            'width': 'auto'
                        });
                    } else if($(this).css('font-size')) {
                        $(this).css('font-size', Math.ceil(size[i] * navbar.outerHeight() / navbar_height) + 'px');
                    }
                });
            }
        }
    };
    //Set of functions to manage the animations of the elements
    var animateElements = function() {
        if($('.animate-if-visible').length) {
            $('.animate-if-visible').appear();
            $(document.body).on('appear', '.animate-if-visible', function(e, $affected) {
                // this code is executed for each appeared element
                var element = $(this);
                var animationOptions = element.data('animation-options');
                runAnimationTransition(element, animationOptions);
            });
        }
        if($('.animate-group').length) {
            $('.animate-group').appear();
            $(document.body).on('appear', '.animate-group', function(e, $affected) {
                var element = $(this);
                var animationInterval = 200;
                if( typeof $(this).data('animation-interval') !== 'undefined') {
                    animationInterval = parseInt($(this).data('animation-interval'));
                }
                var totalAnimations = 0;
                var elements = [];

                element.find('.animate').each(function(n) {
                    elements[n] = $(this);
                    totalAnimations++;
                });
                runAnimationGroup(elements, totalAnimations, 0, animationInterval);

            });
        }
        // Force appear. This is suitable in cases when page is in initial state (not scrolled and not resized)
        $.force_appear();
    };
    var sticky_navigation = function() {
        if(scroll_top == 0) {
            navbar.css({

                'top': navigation_position_top + 'px'
            });
        } else if(scroll_top > navigation_position_top) {
            navbar.css({
                'top': 0
            });
        } else if(scroll_top < navigation_position_top && scroll_top > 0) {
            navbar.css({
                'top': navigation_position_top - scroll_top + 'px'
            });
        }
    };
    var runAnimationGroup = function(element, totalAnimations, actual, animationInterval) {
        if(actual < totalAnimations) {
            var animationOptions = element[actual].data('animation-options');
            setTimeout(function() {
                runAnimationTransition(element[actual], animationOptions);
                actual++;
                runAnimationGroup(element, totalAnimations, actual, animationInterval);
            }, animationInterval);
        }
    };
    var runElementsAnimation = function(element) {
        var animationOptions = element.data('animation-options');
        if( typeof animationOptions == 'undefined') {
            animationOptions = new Object;
            animationOptions.animation = "Fade";
        }
        switch (animationOptions.animation) {
            case 'scaleIn':
                element.css({
                    opacity: 0,
                    scale: 0.6
                });
                break;
            case 'scaleToBottom':

                original_height = element.height();

                element.data('original-height', original_height).data('original-width', element.width()).css({
                    opacity: 0,
                    transform: 'translateY(-' + original_height / 2 + 'px); scaleY(0.001)'
                });
                break;
            case 'scaleToRight':

                original_width = element.width();

                element.data('original-height', element.height()).data('original-width', original_width).css({
                    opacity: 0,
                    transform: 'translateX(-' + original_width / 2 + 'px); scaleX(0.001)'
                });
                break;
            case 'scaleToTop':

                original_height = element.height();

                element.data('original-height', original_height).data('original-width', element.width()).css({
                    opacity: 0,
                    transform: 'translateY(' + original_height / 2 + 'px); scaleY(0.001)'
                });
                break;
            case 'scaleToLeft':

                original_width = element.width();

                element.data('original-height', element.height()).data('original-width', original_width).css({
                    opacity: 0,
                    transform: 'translateX(' + original_width / 2 + 'px); scaleX(0.001)'
                });
                break;
            default :
                element.css({
                    opacity: 0
                });
                break;
        }
    };
    var runAnimateProgressBar = function() {
        if($('.animate-bar').length) {
            $('.animate-bar').appear();
            $(document.body).on('appear', '.animate-bar', function(e, $affected) {
                $(this).progressbar({
                    display_text: 'center',
                    use_percentage: true
                });
            });
        }
    };
    var runAnimationTransition = function(element, animationOptions) {
        if( typeof animationOptions == 'undefined') {
            animationOptions = new Object;
            animationOptions.animation = "fadeIn";
        }
        var animationType = animationOptions.animation;
        var animationDelay = animationOptions.delay;
        var animationDuration = animationOptions.duration;
        var animationEasing = animationOptions.easing;
        if( typeof animationType === 'undefined') {
            animationType = "fadeIn";
        }
        if( typeof animationDelay === 'undefined') {
            animationDelay = 0;
        }
        if( typeof animationDuration === 'undefined') {
            animationDuration = 300;
        }
        if( typeof animationEasing === 'undefined') {
            animationEasing = 'linear';
        }
        switch (animationType) {
            case 'scaleIn':
                element.transition({
                    opacity: 1,
                    scale: 1,
                    duration: animationDuration,
                    delay: animationDelay,
                    easing: animationEasing
                });
                break;
            case 'scaleToRight':
            case 'scaleToLeft':
                element.transition({
                    opacity: 1,
                    transform: 'scaleX(1)',
                    duration: animationDuration,
                    delay: animationDelay,
                    easing: animationEasing
                });
                break;
            case 'scaleToBottom':
            case 'scaleToTop':
                element.transition({
                    opacity: 1,
                    transform: 'scaleY(1)',
                    duration: animationDuration,
                    delay: animationDelay,
                    easing: animationEasing
                });
                break;
            default:

                animationDuration = animationDuration / 1000 * 2 + 's';
                animationDelay = animationDelay / 1000 * 2 + 's';
                element.css({
                    opacity: 1,
                    'animation-fill-mode': 'both',
                    'animation-duration': animationDuration,
                    'animation-delay': animationDelay,
                    'animation-name': animationType
                });
                break;
        }
    };
    // Function to display an icon on the images on hover
    var runImageOverlay = function() {
        if($('.image-overlay').length && !$('body').hasClass('isMobile')) {
            $('.image-overlay').hover(function() {
                $(this).transition({
                    opacity: 0.7
                }).find('.circle-icon').css({
                    rotate: '-90deg'
                }).transition({
                    rotate: '0deg',
                    easing: 'easeOutBack'
                }, 400);
                ;
            }, function() {
                $(this).transition({
                    opacity: 0
                });
            });
        }
    };
    // function to initiate FlexSlider
    var runFlexSlider = function(options) {
        $(".flexslider").each(function() {
            var slider = $(this);
            var defaults = {
                animation: "slide",
                animationLoop: false,
                controlNav: true,
                directionNav: false,
                slideshow: false,
                prevText: "",
                nextText: ""
            };
            var config = $.extend({}, defaults, options, slider.data("plugin-options"));
            if( typeof config.sync !== 'undefined') {
                var carousel = {
                    animation: "slide",
                    controlNav: false,
                    animationLoop: false,
                    slideshow: false,
                    prevText: "",
                    nextText: "",
                    asNavFor: slider
                };
                var configCarousel = $.extend({}, carousel, $(config.sync).data("plugin-options"));
                $(config.sync).flexslider(configCarousel);
            }
            // Initialize Slider
            slider.flexslider(config);
        });
    };
    // function to handle SlideBar Toggle
    var runSideBarToggle = function() {
        $(".sb_toggle").click(function() {
            sb_toggle = $(this);
            $("#slidingbar").slideToggle("fast", function() {
                if(sb_toggle.hasClass('open')) {
                    sb_toggle.removeClass('open');
                } else {
                    sb_toggle.addClass('open');
                }
            });
        });
    };
    // function to handle Scroll Top button
    var runScrollTop = function() {
        scroll_top = win.scrollTop();
        scroll_top_button = $('#scroll-top');
        if(scroll_top > 300) {
            scroll_top_button.fadeIn();
        } else {
            scroll_top_button.fadeOut();
        };
        scroll_top_button.off("click").on("click", function(e) {
            $("html, body").animate({
                scrollTop: 0
            }, "slow");
            e.preventDefault();
        });
    };
    // function to be activated when you scroll the page
    var runWindowScroll = function() {
        $(window).scroll(function(e) {
            runScrollTop();
            runElementsPosition();

        });
    };
    //Set of functions for Style Selector
    var runStyleSelector = function() {
        $('.style-toggle').bind('click', function() {
            if($(this).hasClass('open')) {
                $(this).removeClass('open').addClass('close');
                $('#style_selector_container').hide();
            } else {
                $(this).removeClass('close').addClass('open');
                $('#style_selector_container').show();
            }
        });
        setColorScheme();
    };
    var setColorScheme = function() {
        $('.icons-color a').bind('click', function() {
            $('.icons-color img').each(function() {
                $(this).removeClass('active');
            });
            $(this).find('img').addClass('active');
            $('#skin_color').attr("href", "assets/css/theme_" + $(this).attr('id') + ".css");

        });
    };
    //function to save user settings
    var runSaveSetting = function() {
        $('.save_style').bind('click', function() {
            var clipSetting = new Object;

            clipSetting.skinClass = $('#skin_color').attr('href');
            $.cookie("clip-front-setting", JSON.stringify(clipSetting));
            var el = $('#style_selector_container');
            el.block({
                overlayCSS: {
                    backgroundColor: '#fff'
                },
                message: '<img src="assets/images/loading.gif" />',
                css: {
                    border: 'none',
                    color: '#333',
                    background: 'none'
                }
            });
            window.setTimeout(function() {
                el.unblock();
            }, 1000);
        });
    };
    //function to load user settings
    var runCustomSetting = function() {
        if($.cookie("clip-front-setting")) {
            var loadSetting = jQuery.parseJSON($.cookie("clip-front-setting"));

            if($('#style_selector').length) {
                $('#skin_color').attr('href', loadSetting.skinClass);
            };
        };
    };
    //function to clear user settings
    var runClearSetting = function() {
        $('.clear_style').bind('click', function() {
            $.removeCookie("clip-front-setting");
            $('.icons-color img').first().trigger('click');

        });
    };

    //function to activate the Tooltips, if present
    var runTooltips = function() {
        if($(".tooltips").length) {
            $('.tooltips').tooltip();
        }
    };
    //function to activate the Popovers, if present
    var runPopovers = function() {
        if($(".popovers").length) {
            $('.popovers').popover();
        }
    };
    return {
        //main function to initiate template pages
        init: function() {
            runInit();
            animateElements();
            setSearchMenu();
            runDropdownToggle();
            runFlexSlider();
            sticky_navigation();
            setAnimations();
            runImageOverlay();
            runAnimateProgressBar();
            runWindowScroll();
            runWindowResize();
            runTooltips();
            runPopovers();
            runStyleSelector();
            runElementsPosition();
            animateElements();
            runSideBarToggle();
            runScrollTop();
            runSaveSetting();
            runCustomSetting();
            runClearSetting();
        }
    };
}();

Answer 1

该站点只是缺少正确的 Javascript 初始化，添加以下内容解决了该问题。

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>

Answer 2

确保您使用如下函数正确初始化插件：

$('#myId').flexslider();

就是说，我不确定为什么它在一种浏览器中有效，而在其他浏览器中无效。

Answer 3

我在评论

后遇到了与chrome相同的问题

//animation: "slide",

出来了，成功了！

HTH

Flexslider 幻灯片不会在 Firefox 和 Chrome Canary 上显示

Flexslider slides won't show on Firefox and Chrome Canary

html

css

jquery

flexslider