如何获得下一个/上一个链接以停留在CarouFredSel幻灯片的两侧

How to get Next/Prev links to stay at sides of CarouFredSel slide

本文关键字：幻灯片 CarouFredSel 停留在 下一个 何获得 上一个 链接      更新时间：2023-09-26

当您将鼠标悬停在图像上时，我已经能够使用CSS来确保NEXT和PREV链接处于正确的位置。但是，如果你浏览这个页面上的图像，你会注意到它们与横向图片显示不正确。

CSS或JS是否有其他方法可以创建这种效果，并使其适用于任何宽度的图像？

以下是相关的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
})

您遇到的问题是容器photowrap应该是一个wrap，但它在页面上是一个大容器。删除所有为photowrap中包含的元素添加宽度、高度、填充或边距的CSS，但图像除外（以及绝对/相对元素的左、右、上、下）。

以下内容：-使ul的宽度为100%，-确保photowrap是相对的。

最后你想要：

.tools li .next {
    position: absolute;
    right: 20px;
    bottom: 20px;
}
.tools li .prev {
    position: absolute;
    right: 20px;
    bottom: 20px;
}

这将是一个更清洁的解决方案。

相关文章：