当您将鼠标悬停在图片上时,我已经能够使用 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
})
最佳答案
您遇到的问题是容器 photoswrap 应该是一个包装,但它是页面上的一个大容器。删除所有为 photoswrap 中包含的元素添加宽度、高度、填充或边距的 CSS,图像除外(以及绝对/相对元素的左、右、上、下)。
接着是: - 使 ul 100% 宽度, - 确保 photowrap 是相对的。
最后你想要:
.tools li .next {
position: absolute;
right: 20px;
bottom: 20px;
}
.tools li .prev {
position: absolute;
right: 20px;
bottom: 20px;
}
这将是一个更简洁的解决方案。
关于javascript - 如何让 Next/Prev 链接留在 CarouFredSel 幻灯片的两侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18344560/