Royal Slider put arrows inside of an image

The example uses the version: Royal Slider v 9.5.9

Difficulty

Royal Slider 70%
HTML 50%
CSS 70%
JavaScript 80%

Introduction

Solution

  1. In HTML, we add new buttons to the slider wrapper.
  2. Stylize the new buttons using CSS.
  3. Add event handlers for the new buttons.
  4. In full screen mode, hide the standard buttons.
  5. In full screen mode, we position new buttons relative to the picture, with each slide change.

In the example, I also change the value of the imageScaleMode option. In full screen mode: ‘fit-if-smaller‘, normally: ‘fill‘. This is an optional change.

A live example can be found here.