Slider template – photo with large, offset caption


This slider was originally created for the Saratoga website, and was meant to fill in an area about 2/3 width of the page in desktop view.

  • It is set up to have captions and links entered manually but could also be easily converted to a post slider.
  • The arrows are added custom within a slide layer.
  • CSS is needed to add focus styles for the arrows.
  • Because the images are brought in as image objects (as opposed to the background of the slide), there’s also some additional CSS added to force the image to crop to the desired aspect ratio (3:2).
  • To apply the CSS, add a custom style to the group or column block that holds the slider. In this example, the class is wrap-slider-b. A CSS file has been saved along with the exported template files.
Slide 1 Example
size images to 1650x1100 px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis vestibulum sollicitudin.
Unique, descriptive link text.
Slide 2 example
Sharp graphite pencils on grey background, closeup
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Another descriptive link here.
Slide 3 example
Group of students running to get on the school bus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum commodo elit, ut lobortis orci fringilla ut.
Unique link text describing the post.