Flexslider幻灯片不会在Firefox和Chrome Canary上展示
此问题不会出现在任何其他浏览器中。我已经发布了相关的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> 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.$1);
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();
}
};
}();
3 个答案:
答案 0 :(得分：2)
在评论
后，我遇到了同样的问题//animation: "slide",
out，它有效！
HTH
答案 1 :(得分：1)
网站错过了正确的Javascript初始化，并添加以下内容解决了问题。
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
答案 2 :(得分：1)
确保使用以下功能正确初始化插件：
$('#myId').flexslider();
那就是说，我不确定为什么它在一个浏览器中工作而不在其他浏览器中工作。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？