Pretty slick, and it looks better in a jumbotron, but I don’t have it all figured out yet. I did mine like this:
[jumbotron background=”#ffd2e8″ color=”#ffd2e8″][flexslider group=”Home Page Slider” animation=”slide” position=”left” width=”600″ height=”200″][/jumbotron]
Test slider: Title is just a title; it doesn’t show up anywhere.
Slide Heading: shown at the top of the slide.
Slide Link: What’s this for? See below.
Slide Content: If I put a picture into the body of the slider, it shows up on the slide. If I don’t, then it doesn’t, even if I put the link to the image into the Slide Link field.
If I set the picture in the slide content to align left or right, it makes no difference. The pictures show up at the top.
In FireFox, the slides seem to take up the entire width of the content area. I turned the sidebar off and reloaded the page, and it took up the entire container width.are 748px high and 540px wide, even though the flexslider is sized at 600×200. Of course in MSIE8, theresponsive design built into the theme just doesn’t work.
The images are not clickable, when the flexslider is in a jumbotron. Remove the jumbotron, and they are, but they’re not in a lightbox, they open in “_self” (the same window).
About the clickable images
When you put a picture into a post in WordPress, you can tell it what size to show it in the post; thumbnail, medium large, or full size. I put all of the pictures in at medium size, so WordPress makes a smaller image link like this:
This is the image that gets shown in the slider. When you click on the image to “see it full size”, it uses the link that you selected when you inserted the image: Link To Custom URL, Media File, Attachment Page, None. That’s a good thing, however…since the thing takes up the entire container width, the images get pixelated. Trying to avoid that, I used this image link instead:
This was a mistake. The server sent the huge original size image, which took a few seconds to load. Eh…go back to the smaller image.
In FireFox, the navigation arrows only show up when you move your mouse over the slide container when you’re NOT using a jumbotron. The circles are the color of the page background, only a bit darker, and the arrows are the same color as the page background. I have a dark background, and they barely show up. Inside a jumbotron, they only show up when you mouse over the actual arrows, but they look better. The circles are the color of the page background, only a bit lighter. The arrows themselves are colored the same as the background color of the jumbotron. With or without a jumbotron, in MSIE8 they’re always visible, and they are colored the same as in FireFox. FireFox: smooth sliding. MSIE8: jerky sliding.
Skematik Flex Slider – Not what I expected.