Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

How to Display Text in Previous/Next Navigation Elements

For accessibility or design reasons, you may want to display text in the previous/next navigation elements of your slider instead of just arrow icons.

This can be done using a few lines of CSS, add the following to your active theme’s style.css file and edit as you require:

/* Reposition the default navigation arrow and right-align the Next navigation element */
.soliloquy-container .soliloquy-prev { 
  background-position: 10px center !important; 
}
.soliloquy-container .soliloquy-next { 
  background-position: calc(100% - 10px) center !important; 
  text-align: right; 
}

/* Set a new default width for the navigation elements */
.soliloquy-container .soliloquy-prev,
.soliloquy-container .soliloquy-next { 
  width: 168px !important; 
}

/* Remove the underline from the text we're inserting to on hover */
.soliloquy-container .soliloquy-prev:hover,
.soliloquy-container .soliloquy-next:hover { 
  text-decoration: none; 
}

/* Set a base style for the text we're inserting */
.soliloquy-container .soliloquy-prev::before,
.soliloquy-container .soliloquy-next::before { 
  line-height: 30px; 
  text-transform: uppercase; 
  color: #fff; 
  text-decoration: none; 
  border-bottom: none; 
}

/* Insert the 'Previous Slide' text and position it to account for the navigation arrow */
.soliloquy-container .soliloquy-prev::before { 
  content: 'Previous Slide'; 
  display: block; 
  margin-left: 30px; 
}

/* Insert the 'Next Slide' text and position it to account for the navigation arrow */
.soliloquy-container .soliloquy-next::before { 
  content: 'Next Slide'; 
  display: block; 
  margin-right: 30px; 
}
[i]
[i]