Александр Казаков

Александр Казаков

Фрилансер, frontend, вёрстка

On Posted on by Александр Казаков to Веб-разработка

Royal Slider put arrows inside of an image

The example uses the version: Royal Slider v 9.5.9

Documentation

Difficulty

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

Introduction

So, Royal Slider is a good plug-in, but it does not have one important option for the gallery.

The author answers the question here:

Sorry, there is no such option. You’ll need to involve some JS to implement this feature, to detect position of image and re-align the arrows.

From that moment it seems nothing has changed. We will solve this problem.

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.

Tags

Рубрики

Свежие записи

Комментарии

Метки

amp amp-html css Facebook freelancing google-amp html Javascript lightbox php royalslider stackoverflow vk youtube Вконтакте Обзор О жизни Центрирование background-image Центрирование текста фриланс

Полезное