MovingBox has so many different navigation options. As you do in the demos on the homepage, you can place the arrows and dots in all possible locations around the slider, inside and outside. MovingBox uses Font Awesome icons for both the dots and arrows. Below are simple legends to see all of the available icons supported.

Arrows


Dots


External Linking

How External Linking Works

MovingBox allows you to link to any slide within it from a link or from an external URL. Most sliders allow you to link to a slide via its slide number (#1, #2, etc). However, giving someone a URL to a slide that has a slide number in it, is somewhat useless. How is the person supposed to know what that URL is taking them to? We decided to make MovingBox do it better!

MovingBox searches for any headers (h1-h6) contained within a slide and uses that as the text for the link tag. If no headers are found, MovingBox will then search for images with alt tags set. It will use the alt tag text and the tag link if its found. Finally as a last resort, MovingBox will set the tag link for a slide to the slide number. In order for MovingBox to build the tag link, it will take the text that its found (either from headers or alt tag) and make it all lowercase. It will then replace all spaces with dashes.

If we look at the example above, the header in the first slide is First Slide, this means that the tag link is #first-slide. The second slide contains an image with an alt tag of Image Slide 1. This makes the tag link for that slide #image-slide-1. If you place these tags at the end of the page url, the slide will load on page load. If you want to create a link to this tag, you will also need to add the class of mb-slide to the link in order for it to work.

Note: If you have autoplay enabled for a slide, it will be turned off once you link to a slide either via a link/button or on page load.

Addons Used to Build This Page


The following addons were used to build this page….