当您将鼠标悬停在图像上时,我已经能够使用 CSS 来确保 NEXT 和 PREV 链接处于正确的位置。但是,如果您浏览此页面上的图像,您会注意到它们无法与风景图片一起正确显示。
CSS或JS是否有另一种方法来创建这种效果并让它适用于任何宽度的图像? http://garrettlockhart.com/2days1night/
这是相关的CSS:
.image {
display:table;
padding:15px;
border: 6px solid black;
margin-top:100px;
}
.image img{
height:430px;
}
.photoswrap {
position:relative;
opacity:0;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}
.caroufredsel_wrapper {
}
.tools ul {
margin:auto;
display:table;
padding:0px;
opacity:0;
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;
}
.tools li {
float:left;
list-style:none;
}
.tools li .next {
margin-left: 128px;
}
.tools li .prev {
margin-right: 128px;
}
.tools li a{
font-family: 'Bold', 'BoldW';
float:left;
cursor:pointer;
letter-spacing:1px;
margin:auto;
border:5px solid black;
padding:5px;
background-color: #fff;
font-size:15px;
line-height:14px;
}
JavaScript:
$(".photos").carouFredSel({
width: "100%",
items: {
visible: 1,
width: "variable",
},
scroll: {
fx: "none",
duration: 1
},
auto: {
play: false,
},
prev: {
button: ".prev",
key: "left"
},
next: {
button: ".next",
key: "right"
},
pagination: {
container: ".pagination",
keys: true
},
swipe: true,
mousewheel: true
})