FlexSlider : get the caption vertically on right side

问题

I'm using the cool Felxslider to display a slideshow on a sharepoint installation. it works quite well, but i still have two questions :

1- How to display the caption (you know, the little transparent background with title/description of the picture) not on the bottom of the image, but on the right side?

And not hover the picture, if possible.

2- I have N images to whos, but the slider always shows N+N images, the first extra ones are clones of the images, but the last is always just blank. For example, i have 3 pictures to show, but the slider generates 6 slides : Number 4 and number 5 are clones of number 1 and number2, and number 6 is totally blank. It displays such extra pictures no matter how many pictures I have (if i have 2 pictures to display, it will display 4).

Do you have any idea on how to get rid off all these clones?

Thanks a lot to answer, and have a nice day!

回答1:

in order to have the caption appear on the right side I added some css rules and a specific HTML caption format.

Here's a jfiddle of the right caption display: http://jsfiddle.net/tyuth1sr/23/

Use the following css on your website's custom stylesheet, then use the HTML format for the captions:

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;
}

And format your flexslider captions like so: 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>

Please note that you can make the caption appear on over any side of the flexslider slide by removing the .right css position specification of "right: 0px" and adding "left: 0px", "top: 0px;" or "bottom: 0px;" depending on where you want it to appear. You would also have to tweak the text formatting/background padding CSS to make it appear properly in one of those other positions.

来源：https://stackoverflow.com/questions/28405890/flexslider-get-the-caption-vertically-on-right-side

标签

javascript

css

sharepoint-2013

flexslider