Question

我正在使用酷炫的Felxslider在sharepoint安装上显示幻灯片。它运作得很好，但我还有两个问题：

1 - 如何显示标题（你知道，图片标题/描述的小透明背景）不在图像的底部，但在右侧？

如果可能的话，不要将图片悬停。

2 - 我有N个图像，但是滑块总是显示N + N个图像，第一个额外的图像是图像的克隆，但是最后一个只是空白。例如，我有3张图片要显示，但是滑块生成6张幻灯片：4号和5号是1号和2号克隆，6号是完全空白。无论我有多少张照片，它都会显示这些额外的照片（如果我要显示2张照片，它将显示4张。）

您对如何摆脱所有这些克隆有任何想法吗？

非常感谢您的回答，祝您度过愉快的一天！

Answer 1

为了让标题显示在右侧，我添加了一些css规则和特定的HTML标题格式。

这是右侧标题显示的一个方面：http://jsfiddle.net/tyuth1sr/23/

在您网站的自定义样式表上使用以下css，然后使用HTML格式标题：

CSS

/*
 * flexslider slide styling 
 */

.slides {
    overflow: hidden !important;
}

.slides div .flex-caption {
    overflow: scroll !important;
}


/*
 * flexslider caption styling 
 */

.flex-caption {
    position: absolute;
    text-align: left;
    font-size: 11px;
    background:rgba(255, 255, 255, 0.7);
    z-index: 100;
    padding: 20px 10px 35px 30px;
    width: 287px;
    padding-top: 100%;
    bottom: 0px;
    color: #000;
}

.right {
    right: 0;
    margin-bottom: 0px;
}

.show-caption {
    position: absolute;
    top: 48%;
    right: 240px;
    z-index: 99;
    opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
    pointer-events: none;
}

并像这样格式化您的flexslider标题： HTML

                <ul class="slides" id="slideshow" ondragstart="return false;">
                    <li>
                    <img src="https://iluvmafuckinglife.files.wordpress.com/2012/04/256989-a-sphere-sculpture-made-from-easter-eggs-is-on-display-on-the-day-of-i.jpg" />
                    <div class="flex-caption right">
                        <div class="caption-content">
                            <p><span class="hcaption">Caption 1</span></p>
                            <br /><br />
                            <p class="hcap">Caption 1 text goes here.</p>
                        </div>
                    </div>
                    </li>
                    <li>
                    <img src="http://s3-ec.buzzfed.com/static/enhanced/web05/2012/2/8/11/enhanced-buzz-wide-29760-1328717305-32.jpg" />
                    <div class="flex-caption right">
                        <div class="caption-content">
                            <p><span class="hcaption">Caption 2</span></p>
                            <br /><br />
                            <p class="hcap">Caption 2 text goes here.</p>
                        </div>
                    </div>
                    </li>

请注意，您可以通过删除“right：0px”的.right css位置规范并添加“left：0px”，“top：0px;”来使标题显示在flexslider幻灯片的任何一侧。或“底部：0px;”取决于您希望它出现的位置。您还需要调整文本格式/背景填充CSS，使其在其他位置正确显示。

FlexSlider：在右侧垂直获取标题

1 个答案: