Welcome to the preview page of J1 Master Slider. This page shows some valuable features of how J1 Template can manage your image-based content using the J1 Module masterslider.
J1 Template uses the lite version of Master Slider. The free of charge version does not support all features. Not all layouts and no overlays are supported.
15-30 Minutes to read
Placements of Sliders
To use MS Sliders in your content sources, a placeholder is required for the MS Slider template code. The code of a MS Slider is automatically generated by the J1 Module masterslider and gets added to the placeholder a page is being loaded.
Asciidoc Markup
To place a MS Slider in your Asciidoc-based sources, the use of the Asciidoc extension masterslider masterslider:: is recommended.
masterslider::<slider-id>[]HTML Markup
Alternatively for Asciidoc sources, a pass-through block for HTML code can be used like so:
++++
<div id="<slider-id>" class="master-slider-parent"></div>
++++Markdown Markup
To use MS Sliders for content sources of type Markdown, simply write the HTML placeholder for a MS Slider like so:
<div id="<slider-id>" class="master-slider-parent"></div>Configuration Settings
For Jekyll One, no programming skills are needed for Master Slider. Slideshows are defined based on simple configurations.
| Find the full MS Slider settings in the Master Slider configuration file |
# ------------------------------------------------------------------------------
# User settings
#
settings:
module_version: lite
# ----------------------------------------------------------------------------
# Sliders
# ----------------------------------------------------------------------------
#
sliders:
# --------------------------------------------------------------------------
# Slider 1, Simple Boxed
#
- slider:
enabled: true
id: ms_00002
skin: light-3
lightbox:
enabled: true
type: lb
# ------------------------------------------------------------------------
# Slider controls
#
controls:
arrows:
enabled: true
bullets:
enabled: true
# ------------------------------------------------------------------------
# Slider options
#
options:
width: 1200
height: 600
applyFiltersAllSlides: true
filters:
grayscale: 0.5
sepia: 0.5
# ------------------------------------------------------------------------
# Slides
#
slides:
# slide 1
#
- slide:
alt: Cat 1
title: Cat 1
foreground_image: /assets/image/modules/masterslider/slider_1/cat-1.jpg
background_image: /assets/theme/j1/modules/masterslider/css/blank.gif
thumb_image: false
slideinfo: false
...Common Slide Shows
MS Sliders are based on so-called templates. A template defines the HTML portion, the base HTML structure of a MS Slider placed in a webpage. The J1 module masterslider is fully configurable. Based on the configuration of an MS Slider, the template is automatically generated and loaded as required. No need for any programming or writing HTML code for your MS Sliders.
| Some of the examples are taken from the product pages of Master Slider at Ready to use sample sliders. |
Find a selection of common, auto-generated slide shows below.
MS Slide Show 1
MS Sliders of the layout type FullWidth can be used as delimiters in text-dominated pages. For a more eye-minded presentation, the function autoplay of a slider can be enabled.
MS Slide Show 2
This MS Slider is using a quite simple configuration. This config is a good base to try out other configuration features provided by MS Lite. Additionally, this MS Slider is using the CSS filter feature of Master Slider.
Filters can be used for example to transform the style of the images provided by a MS Slider. In this example, the MS Slider images are transformed from style color to sepia.
| Lightbox support is only available for J1 Theme. The versions MS Lite and MS Pro does not support lightboxes on sliders out-of-the-box. |
Click on the Lightbox symbol in the slides to see the colored images.
MS Slide Show 3
One of the major features of slide shows is to present additional animated elements, like text data, connected to the images presented by a MS Slider: the slideshow. MS Sliders provide functions to combine images and text elements by so-called MSInfo elements.
MS Slide Show 4
To give the users better control over a slideshow, MS Sliders provide complex UI elements like thumbs placed side-by-side left or on the right, at the top, or at the bottom of a slideshow.
For image related MS Sliders, UI elements of type thumb image thumbs may a good choice.
MS Slide Show 5
For context related MS Sliders, UI elements of type tab text elements tabs may a good choice. Tab text elements can be placed side-by-side on the right, or at the bottom of a slideshow.
A bit more space saving layout is achieveable by placing the text tabs side-by-side on the right, for example.
MS Slide Show 6
A slideshow is an excellent instrument to present information with minimal effort and space required on a webpage. For example, well-designed sliders can be useful for presenting featured blog articles to your visitors.
The layout partialview for MS Sliders can help a lot. The following slider presents a slideshow that combines an MSInfo element to access blog articles and the MS Layout partialview.
Focussing your readers on the active slide, you should take the neighbors a bit out of sight. Bringing images in a background position is easy to do by using CSS filters.
# ----------------------------------------------------------------------------
# Slider options
#
options:
width: 600
height: 300
layout: partialview
loop: true
filters:
brightness: 0.8
grayscale: 0.5
opacity: 0.6A good design of your slideshows is important to get the attention of your readers and, in the very end, to generate clicks to your content pages.
More about MS Slider
If you’re interested to learn more about MS Sliders, go for the MS Slider module documentation to learn all options available for the J1 Module masterslider.
Have fun exploring the possibilies of MS Sliders.