Welcome to the preview page of J1 Master Slider. This page shows some valuable features of how J1 Theme can manage your image-based content using the Master Slider (MS) module masterslider as slideshows. J1 Theme uses the free version of Master Slider (MS Lite). The lite version does not support all features. Not all MS Slider layouts and no overlays are supported by the lite version.
MS Sliders are based on so-called templates. A template defines the HTML portion, the base HTML structure of a MS Slider in a webpage. The J1 module masterslider is fully configurable. Based on the J1 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.
| The Master Slider (MS Lite and Pro) is a so-called jQuery Plugin. jQuery can simplify Javascript code a lot but will slow-down the runtime performance of the JS code. Expect for slower browsers and platforms, like mobiles or tablets, initializing an MS Slider will take a while to be finished. |
Placements of Sliders
To use (already configured) 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:: is recommended.
masterslider::<slider-id>[<additional css classes>]Alternatively for Asciidoc sources, a pass-through block for HTML code can be used like so:
++++
<div id="<slider-id>" class="master-slider-parent <additional css classes>"></div>
++++Mardown Markup
To use MS Sliders for content sources of type Markdown, simply write the MTML placeholder for a MS Slider like so:
<div id="<slider-id>" class="master-slider-parent <additional css classes>"></div>| Find examples for the placements of sliders for Asciidoc and Markdown in section Placement of the MS Slider. |
Common MS Sliders
MS Sliders are based on so-called templates. A template defines the HTML portion, the base HTML structure of a MS Slider in a webpage. The J1 module masterslider is fully configurable. Based on the J1 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 MS Sliders below.
MS Slider 1 — Lightbox + Controls + Filters
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 product version 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 base colored images. |
Slider 1 is using the following general settings:
| Setting | Value | Description |
|---|---|---|
skin |
| Skins control the design for the base UI elements |
layout |
| The MS Slider properties |
lightbox |
| Type of the lightbox |
controls |
| Default settings. The settngs are defined in |
controls |
| Default settings. The settngs are defined in |
filters |
| value: 0.5 |
filters |
| value: 0.5 |
MS Slider settings
For the standard version of MS Lite, no filters are supported. J1 Theme is using a extended version of MS Lite to support (CSS) filters for your silders.
| The property For default, filters are applied to all (background) images of a MS Slider except the active (visible/selected) slide. If |
Find the full MS Slider settings in the Master Slider configuration file ~/_data/masterslider.yml. |
# ------------------------------------------------------------------------------
# User settings
#
settings:
module_version: lite
# ----------------------------------------------------------------------------
# Sliders
# ----------------------------------------------------------------------------
#
sliders:
# --------------------------------------------------------------------------
# Slider 1, Simple Boxed
#
- slider:
enabled: true
id: ms_00001
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/images/modules/masterslider/slider_1/cat-1.jpg
background_image: /assets/themes/j1/modules/masterslider/css/blank.gif
thumb_image: false
slideinfo: false
...Placement of the MS Slider
Depending on the source you’re using for your content, the methods to place an MS Slider depends. Find examples for the content sources of type Asciidoc and Markdown below.
Asciidoc Markup
To place a MS Slider in your Asciidoc-based sources, the use of the Asciidoc extension masterslider:: is recommended.
masterslider::ms_00001[role="mt-4 mb-5"]Alternatively for Asciidoc sources, a pass-through block for HTML code can be used like so
++++
<div id="p_ms_00001" class="master-slider-parent mt-4 mb-5"></div>
++++Mardown Markup
To use a MS Slider for content sources of type Markdown, simply write the HTML placeholder for a MS Slider:
<div id="p_ms_00001" class="master-slider-parent mt-4 mb-5"></div>Rendered MS Slider
MS Slider 2 — FullWidth + Lightbox
For example, MS Sliders of type FullWidth can be used as delimiters in text-dominated pages. For all MS Sliders (except one of layout partialview) a lightbox (default: Lightbox V2) can be used to display all images of a MS Slider in a full-sized view.
For a more eye-minded presentation, the function autoplay of a slder can be enabled.
| Lightbox support is only available for J1 Theme. The product version 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 images full-size. |
Slider 2 is using the following general settings:
| Setting | Value | Description |
|---|---|---|
layout |
| The MS Slider spans the full width of the page. The MS Slider properties |
autoplay |
| Enables the autoplay of the slideshow. |
lightbox |
| Type of the lightbox |
MS Slider settings
Find the full MS Slider settings in the Master Slider configuration file ~/_data/masterslider.yml. |
# ------------------------------------------------------------------------------
# User settings
#
settings:
module_version: lite
# ----------------------------------------------------------------------------
# Sliders
# ----------------------------------------------------------------------------
#
sliders:
# --------------------------------------------------------------------------
# Slider 2 - FullWidth
#
- slider:
enabled: true
id: ms_00002
# ------------------------------------------------------------------------
# Slider controls
#
controls:
# NO controls used for this slider
# ------------------------------------------------------------------------
# Slider options
#
options:
height: 500
fillMode: fill
layersMode: center
layout: fullwidth
autoplay: true
loop: true
speed: 10
# ------------------------------------------------------------------------
# Slides
#
slides:
# slide 1
#
- slide:
alt: Cities 1
title: Cities 1
foreground_image: /assets/images/modules/masterslider/slider_2/andreas-brucker.jpg
background_image: /assets/themes/j1/modules/masterslider/css/blank.gif
thumb_image: false
slideinfo: false
...Asciidoc Markup
masterslider::ms_00002[role="mt-4 mb-5"]Rendered MS Slider
MS Slider 3 — SlideInfo|Boxed
One of the major features of sliders 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: the MSInfo element.
Slider 3 is using the following general settings:
| Setting | Value | Description | ||
|---|---|---|---|---|
layout |
| The MS Slider properties | ||
controls |
| Details for MSInfo are configured slide-wise under key | ||
slideinfo |
| Value: 300. For the MSInfo element
| ||
slideinfo |
| Value:
|
MS Slider settings
Find the full MS Slider settings in the Master Slider configuration file ~/_data/masterslider.yml. |
# ------------------------------------------------------------------------------
# User settings
#
settings:
module_version: lite
# ----------------------------------------------------------------------------
# Sliders
# ----------------------------------------------------------------------------
#
sliders:
# --------------------------------------------------------------------------
# Slider 3 - SlideInfo (Autoplay|Boxed|Animated)
#
- slider:
enabled: true
id: ms_00003
skin: default
# ------------------------------------------------------------------------
# Slider controls
#
controls:
slideinfo:
enabled: true
margin: -133
# ------------------------------------------------------------------------
# Slider options
#
options:
width: 1200
height: 600
# ------------------------------------------------------------------------
# Slides
#
slides:
# slide 1
#
- slide:
alt: MS free image: Food Restaurant
title: MS free image: Food Restaurant
foreground_image: /assets/images/modules/masterslider/slider_3/ms-free-food-restaurant.jpg
background_image: /assets/themes/j1/modules/masterslider/css/blank.gif
thumb_image: false
slideinfo:
rtext: 300
boxed: true
title: The Art of Life
title_color: '#BDBDBD'
title_animated: fadeInRight
title_upcase: false
tagline: places to enjoy
tagline_color: false
tagline_animated: fadeInLeft
tagline_upcase: false
description: >
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt.
description_color: '#9E9E9E'
description_animated: fadeInRight
...Asciidoc Markup
masterslider::ms_00003[role="mt-4 mb-5"]Rendered MS Slider
MS Slider 4 — ThumbImage (right|vertical)
To give the users better control over a slideshow, MS Sliders provide complex UI elements like thumbs placed side-by-side (left|right), at the top, or at the bottom of a slideshow.
For image related MS Sliders, UI elements of type image (thumbs) may a good choice. Slider 4 is using the following general settings:
| Setting | Value | Description |
|---|---|---|
layout |
| The MS Slider properties |
controls |
| Default settings. The settngs are defined in |
controls |
| Generates a list of thumb elements specified by |
type |
| If type |
dir |
| Specifies the direction of the control. If value |
align |
| Aligns the control to the right. |
MS Slider settings
Find the full MS Slider settings in the Master Slider configuration file ~/_data/masterslider.yml. |
# ------------------------------------------------------------------------------
# User settings
#
settings:
module_version: lite
# ----------------------------------------------------------------------------
# Sliders
# ----------------------------------------------------------------------------
#
sliders:
# --------------------------------------------------------------------------
# Slider 4 - ThumbImage (position right|vertical)
#
- slider:
enabled: true
id: ms_00004
skin: light-2
# ------------------------------------------------------------------------
# Slider controls
#
controls:
bullets:
enabled: true
thumblist:
enabled: true
width: 100
height: 80
type: thumbs
autohide: false
dir: v
align: right
scrollbar:
enabled: true
inset: true
align: top
color: '#404040'
# ------------------------------------------------------------------------
# Slider options
#
options:
width: 1200
height: 600
# ------------------------------------------------------------------------
# Slides
#
slides:
# slide 1
#
- slide:
alt: ms-free-animals-1
title: MS free animals 1
foreground_image: /assets/images/modules/masterslider/slider_4/ms-free-animals-1.jpg
background_image: /assets/themes/j1/modules/masterslider/css/blank.gif
thumb_image: /assets/images/modules/masterslider/slider_4/ms-free-animals-1-100x80.jpg
slideinfo: false
...Asciidoc Markup
masterslider::ms_00004[role="mt-4 mb-5"]Rendered MS Slider
MS Slider 5 — ThumbImage (bottom|horizontal)
To give the users better control over a slideshow, MS Sliders provide complex UI elements like thumbs placed side-by-side (left|right), at the top, or at the bottom of a slideshow.
For image related MS Sliders, UI elements of type image (thumbs) may a good choice. Slider 4 is using the following general settings:
| Setting | Value | Description |
|---|---|---|
layout |
| The MS Slider properties |
controls |
| Default settings. The settngs are defined in |
controls |
| Generates a list of thumb elements specified by |
type |
| If type |
dir |
| Specifies the direction of the control. If value |
align |
| Aligns the control at the bottom (below the slider). |
MS Slider settings
Find the full MS Slider settings in the Master Slider configuration file ~/_data/masterslider.yml. |
# ------------------------------------------------------------------------------
# User settings
#
settings:
module_version: lite
# ----------------------------------------------------------------------------
# Sliders
# ----------------------------------------------------------------------------
#
sliders:
# --------------------------------------------------------------------------
# Slider 5 - ThumbImage (position bottom|horizontal)
#
- slider:
enabled: true
id: ms_00005
skin: default
# ------------------------------------------------------------------------
# Slider controls
#
controls:
bullets:
enabled: true
thumblist:
enabled: true
width: 140
height: 80
type: thumbs
autohide: false
align: bottom
margin: 5
space: 5
# ------------------------------------------------------------------------
# Slider options
#
options:
width: 1200
height: 530
# ------------------------------------------------------------------------
# Slides
#
slides:
# slide 1
#
- slide:
alt: ms-free-food-restaurant
title: MS free food restaurant
foreground_image: /assets/images/modules/masterslider/slider_5/ms-free-food-restaurant.jpg
background_image: /assets/themes/j1/modules/masterslider/css/blank.gif
thumb_image: /assets/images/modules/masterslider/slider_5/ms-free-food-restaurant-140x80.jpg
slideinfo: false
...Asciidoc Markup
masterslider::ms_00005[role="mt-4 mb-5"]Rendered MS Slider
MS Slider 6 — ThumbInfo + FullWidth (bottom|horizontal)
To give the users better control over a slideshow, MS Sliders provide complex UI elements like thumbs placed side-by-side (left|right), at the top, or at the bottom of a slideshow.
For context related MS Sliders, UI elements of type text (tabs) may a good choice. Slider 6 is using the following general settings:
| Setting | Value | Description |
|---|---|---|
layout |
| The MS Slider spans the full width of the page. The MS Slider properties |
controls |
| Generates a list of thumb elements specified by |
type |
| If type |
dir |
| Specifies the direction of the control. If value |
align |
| Aligns the control at the bottom (below the slider). |
MS Slider settings
Find the full MS Slider settings in the Master Slider configuration file ~/_data/masterslider.yml. |
# ------------------------------------------------------------------------------
# User settings
#
settings:
module_version: lite
# ----------------------------------------------------------------------------
# Sliders
# ----------------------------------------------------------------------------
#
sliders:
# --------------------------------------------------------------------------
# Slider 6 - ThumbTabs (position bottom|horizontal)
#
- slider:
enabled: true
id: ms_00006
skin: light-3
# ------------------------------------------------------------------------
# Slider controls
#
controls:
thumblist:
enabled: true
width: 300
height: 160
autohide: false
dir: h
align: bottom
type: tabs
margin: -12
space: 0
hideUnder: 400
# ------------------------------------------------------------------------
# Slider options
#
options:
width: 1200
height: 530
layout: fullwidth
# ------------------------------------------------------------------------
# Slides
#
slides:
# slide 1
#
- slide:
alt: MS free - Kitchen Design Ideas
title: Kitchen Design Ideas
foreground_image: /assets/images/modules/masterslider/slider_6_7/6876385555_74a0d7d7ee_b.jpg
background_image: /assets/themes/j1/modules/masterslider/css/blank.gif
thumbinfo:
title: Kitchen Design Ideas
tagline: Slider with Horizontal Tabs
description: >
Lorem ipsum dolor sit amet, consectetuer elit
slideinfo: false
...Asciidoc Markup
masterslider::ms_00006[role="mt-4 mb-5"]Rendered MS Slider
MS Slider 7 — ThumbInfo + Lightbox (right|vertical)
To give the users better control over a slideshow, MS Sliders provide complex UI elements like thumbs placed side-by-side (left|right), at the top, or at the bottom of a slideshow.
| Lightbox support is only available for J1 Theme. The product version 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 images full-size. |
For context related MS Sliders, UI elements of type text (tabs) may a good choice. Slider 7 is using the following general settings:
| Setting | Value | Description |
|---|---|---|
layout |
| The MS Slider properties |
controls |
| Generates a list of thumb elements specified by |
type |
| If type |
dir |
| Specifies the direction of the control. If value |
align |
| Aligns the control to the right. |
MS Slider settings
Find the full MS Slider settings in the Master Slider configuration file ~/_data/masterslider.yml. |
# ------------------------------------------------------------------------------
# User settings
#
settings:
module_version: lite
# ----------------------------------------------------------------------------
# Sliders
# ----------------------------------------------------------------------------
#
sliders:
# --------------------------------------------------------------------------
# Slider 7 - ThumbTabs (position right|vertical)
#
- slider:
enabled: true
id: ms_00007
lightbox:
enabled: true
type: lb
# ------------------------------------------------------------------------
# Slider controls
#
controls:
thumblist:
enabled: true
width: 240
height: 160
autohide: false
dir: v
align: right
type: tabs
margin: -12
space: 0
hideUnder: 700
# ------------------------------------------------------------------------
# Slider options
#
options:
width: 1000
height: 500
instantStartLayers: true
loop: true
speed: 15
view: fadeBasic
# ------------------------------------------------------------------------
# Slides
#
slides:
# slide 1
#
- slide:
alt: MS free - Kitchen Design Ideas
title: Kitchen Design Ideas
foreground_image: /assets/images/modules/masterslider/slider_6_7/6876385555_74a0d7d7ee_b.jpg
background_image: /assets/themes/j1/modules/masterslider/css/blank.gif
thumbinfo:
title: Kitchen Design Ideas
tagline: Slider with Vertical Tabs
description: >
Lorem ipsum dolor sit amet, consectetuer elit
slideinfo: false
...Asciidoc Markup
masterslider::ms_00007[role="mt-4 mb-5"]Rendered MS Slider
MS Slider 8 — Blog Articles + PartialView
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. A 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.
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. A slideshow typically presents a larger number of slides, in this case, blog articles. The layout partialview accompanies the active slide by the images of their neighbors on the left and the right side. 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 8 is using the following general settings:
| Setting | Value | Description |
|---|---|---|
layout |
| The layout partialview accompanies the active slide by the images of their neighbors on the left and the right side. |
controls |
| Details for MSInfo are configured slide-wise under key |
| grayscale | Value: 0.5. The filter grayscale converts the input image to grayscale. The value of amount defines the proportion of the conversion. A value of 1 is converts the image completely to grayscale. |
| sepia | Value: 0.5. The filter sepia converts the input image to sepia. The value of amount defines the proportion of the conversion. A value of 1 is completely sepia. |
MS Slider settings
Find the full MS Slider settings in the Master Slider configuration file ~/_data/masterslider.yml. |
# ------------------------------------------------------------------------------
# User settings
#
settings:
module_version: lite
# ----------------------------------------------------------------------------
# Sliders
# ----------------------------------------------------------------------------
#
sliders:
# --------------------------------------------------------------------------
# Slider 8 - Blog articles (PartialView)
#
- slider:
enabled: true
id: ms_00008
skin: default
# ------------------------------------------------------------------------
# Slider controls
#
controls:
slideinfo:
enabled: true
margin: -120
# ------------------------------------------------------------------------
# Slider options
#
options:
width: 450
height: 220
layout: partialview
loop: true
# ------------------------------------------------------------------------
# Slides
#
slides:
# slide 1
#
- slide:
alt: MS free - Special slider for bloggers
title: Special slider for bloggers
foreground_image: /assets/images/modules/masterslider/slider_8/postslider6-bg-slide2-1024x622.jpg
background_image: /assets/themes/j1/modules/masterslider/css/blank.gif
thumb_image: false
slideinfo:
rtext: 300
boxed: false
title: Special slider for bloggers
title_color: '#F5F5F5'
title_animated: fadeInLeft
title_upcase: false
tagline: false
tagline_color: false
tagline_animated: false
tagline_upcase: false
description: false
description_animated: false
button:
enabled: true
align: center
margin: mt-4
animated: fadeInRight
class: btn btn-primary btn-sm
link: '#void'
text: Read More
...Asciidoc Markup
masterslider::ms_00008[role="mt-4 mb-5"]Rendered MS Slider
MS Slider 9 — SlideInfo|Below + PartialView
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 important statements to your visitors. A 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.
The layout partialview for MS Sliders can help a lot. The following slider presents a slideshow that combines an MSInfo element to present statements using the MS Layout partialview. A slideshow typically presents a larger number of slides. The layout partialview accompanies the active slide by the images of their neighbors on the left and the right side. 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 filters.
Slider 9 is using the following general settings:
| Setting | Value | Description |
|---|---|---|
layout |
| The layout partialview accompanies the active slide by the images of their neighbors on the left and the right side. |
controls |
| Details for MSInfo are configured slide-wise under key |
| grayscale | Value: 0.8. The filter grayscale converts the input image to grayscale. The value of amount defines the proportion of the conversion. A value of 1 is converts the image completely to grayscale. |
| opacity | Value: 0.4. The filter opacity applies transparency to the input image. The value of amount defines the proportion of the conversion. A value of 0 is completely transparent. |
MS Slider settings
Find the full MS Slider settings in the Master Slider configuration file ~/_data/masterslider.yml. |
# ------------------------------------------------------------------------------
# User settings
#
settings:
module_version: lite
# ----------------------------------------------------------------------------
# Sliders
# ----------------------------------------------------------------------------
#
sliders:
# --------------------------------------------------------------------------
# Slider 9 - PartialView/MS-Info (info position below)
#
- slider:
enabled: true
id: ms_00009
skin: default
# ------------------------------------------------------------------------
# Slider controls
#
controls:
arrows:
enabled: true
slideinfo:
enabled: true
# ------------------------------------------------------------------------
# Slider options
#
options:
width: 700
height: 350
layout: partialview
loop: true
filters:
grayscale: 0.8
opacity: 0.4
# ------------------------------------------------------------------------
# Slides
#
slides:
# slide 1
#
- slide:
alt: MS free - Childhood Memories
title: Childhood Memories
foreground_image: /assets/images/modules/masterslider/slider_9/6-2.jpg
background_image: /assets/themes/j1/modules/masterslider/css/blank.gif
thumb_image: false
slideinfo:
rtext: 300
boxed: false
title: Childhood Memories
title_color: '#222222'
title_animated: false
title_upcase: true
tagline: John Wiliam
tagline_color: '#7a7a7a'
tagline_animated: false
tagline_upcase: false
description: >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt.
description_color: '#9E9E9E'
description_animated: false
# slide 2
#
- slide:
alt: MS free - Consectetuer adipiscing elit
title: Consectetuer adipiscing elit
foreground_image: /assets/images/modules/masterslider/slider_9/5-2.jpg
background_image: /assets/themes/j1/modules/masterslider/css/blank.gif
thumb_image: false
slideinfo:
rtext: 300
boxed: false
title: Consectetuer adipiscing elit
title_color: '#222222'
title_animated: fadeInRight
title_upcase: true
tagline: John Wiliam
tagline_color: '#7a7a7a'
tagline_animated: false
tagline_upcase: true
description: >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt.
description_color: '#9E9E9E'
description_animated: false
...Asciidoc Markup
masterslider::ms_00009[role="mt-4 mb-5"]Rendered MS Slider
More about the Slider Module
If you’re interested to learn more about MS Sliders, go for the MS Slider module documentation to learn all options available for th J1 Module masterslider.
Have fun exploring the possibilies of MS Slider.