我正在尝试使用本教程(http://coolcarousels.frebsite.nl/c/23/)用我公司的产品创建轮播。但是,每个产品都有一个我要引导的网站。
当我在代码的任何部分中添加标签时,在只有少数几个链接之前,它可以正常工作。但是,所有这些都会损坏,有时几分钟不会加载,有时甚至根本无法加载。有时需要刷新才能使用户看到它。
<div>
<a href="http://minhasbrewery.com/lazymutt">
<img src="images/lazymutt/lazymutt_albertawheatale_02.png" alt="Lazy Mutt Alberta Wheat Ale" />
<span>Lazy Mutt Alberta Wheat Ale</span>
</a>
</div>
这就是我要更改的一切,它似乎使插件变慢了。
/*=========================
CAROUSEL
==========================*/
.ourproducts{width:100%;
margin:0 auto;
overflow:hidden;
position:relative;
background:url(../images/pattern_bg.jpg);
}
#wrapper {
border-top: 1px solid #ccc;
width: 100% !important;
height: 50%;
margin-top: -1px;
position: static;
left: 0;
top: 50%;
}
.caroufredsel_wrapper{position:relative; z-index:400 !important; width:100% !important;}
#carousel {
margin-top: -100px;
background:inherit;
}
#carousel div {
text-align: center;
width: 2%;
max-width:200px;
height:auto;
float: left;
position: relative;
margin:0 0.5%;
margin-top:5%;
}
#carousel div img {
border: none;
width:100%;
display:block;
margin:0 auto;
margin-bottom:0;
}
#carousel div span {
display: none;
}
#carousel div:hover span {
background-color: #333;
color: #fff;
font-family:'hattori_hanzolight', sans-serif;
letter-spacing:1px;
font-size: 90%;
line-height: 110%;
display: inline-block;
width:auto;
min-width:200px;
padding: 5%;
margin: 0 0 0 -50px;
position: absolute;
top: -30px;
left: 50%;
border-radius: 2px;
}
Js是
<script src="js/jquery.carouFredSel-6.2.1.js"></script>
<script>
$(function() {
var $c = $('#carousel'),
$w = $(window);
$c.carouFredSel({
align: false,
items: 21,
scroll: {
items: 1,
duration: 2000,
timeoutDuration: 0,
easing: 'linear',
pauseOnHover: 'immediate'
}
});
$w.bind('resize.example', function() {
var nw = $w.width();
if (nw < 990) {
nw = 990;
}
$c.width(nw * 3);
$c.parent().width(nw);
}).trigger('resize.example');
});
</script>
我不明白为什么这会破坏或破坏插件,它只是一个链接,因此加载该插件后如何处理以及如何解决?
因此,我使用percent(%)来使每个项目的宽度随着窗口大小调整大小,而这又打破了它。当我将其更改为确切的像素数量时,它可以正常工作。
#carousel div {width:17px;}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句