# ------------------------------------------------------------------------------
# ~/_data/apps/carousel.yml
# Default configuration for J1 Carousel (based on Owl Carousel V1)
#
# Product/Info:
# https://jekyll.one
#
# Copyright (C) 2019 Juergen Adams
#
# J1 Template is licensed under the MIT License.
# See: https://github.com/jekyll-one-org/j1_template/blob/master/LICENSE
# ------------------------------------------------------------------------------
# ------------------------------------------------------------------------------
# About this configuration (used for J1 CC only)
#
about_config:
title: Carousel
scope: User settings
location: _data/apps/carousel.yml
# ------------------------------------------------------------------------------
# User configuration settings
#
settings:
# ----------------------------------------------------------------------------
# GENERAL Carousel settings
#
# enabled
# ----------------------------------------------------------------------------
# Enables|Disables the use of a carousel|slider
#
# xhr_data_path
# ----------------------------------------------------------------------------
# All data items displayed by a slider are being read from a
# JSON file automatically generated from that configuration.
# AJAX get method is used to supply the slider with respective
# the HTML code at the time the slider is initialized (by the
# J1 Adapter for J1 Owl Sliders).
#
# values: string
# default: /assets/data/carousel.json
#
# ----------------------------------------------------------------------------
enabled: true
# ----------------------------------------------------------------------------
# DEFAULT options
#
# items
# ----------------------------------------------------------------------------
# This variable allows to set the maximum amount of items displayed
# at a time with the widest browser width.
#
# values: integer
# default: 5
#
# itemsDesktop
# ----------------------------------------------------------------------------
# Preset the number of slides visible with a particular browser
# width. The format is [x,y] whereby x means the browser width
# and y the number of slides displayed. For example [1199,4] means
# that if the window size is lower or equal 1199, show 4 slides
# per page.
#
# values: array (of resolution|item pairs)
# default: [1199,4]
# Other (named) presets: see items|itemsDesktop
#
# values: array (resolution|item pairs)
# defaults:
# itemsDesktop: [1199,4]
# itemsDesktopSmall: [980,3]
# itemsTablet: [768,2]
# itemsTabletSmall: false
# itemsMobile: [479,1]
#
# singleItem:
# ----------------------------------------------------------------------------
# Display only one item independent from screen size.
#
# values: boolean (true|false)
# default: false
#
# itemsScaleUp
# ----------------------------------------------------------------------------
# Don't stretch items when it is less than the supplied items.
#
# values: boolean (true|false)
# default: false
#
# itemsCustom
# ----------------------------------------------------------------------------
# Specifies how many items|slides are shown depending on the
# screen width. If this option is set, the options itemsDeskop,
# itemsDesktopSmall, itemsTablet, itemsMobile are DISABLED
# automatically.
#
# NOTE: For better preview results, order the arrays by screen size.
# This is RECOMMENDED but not mandatory.
#
# NOTE: Don’t forget to include the lowest available screen size, otherwise
# the carousel takes as default value for a screen the next lower screen
# size available (from what you configured).
#
# Example: [ [0, 2], [400, 4], [700, 6], [1000, 8], [1200, 10], [1600, 16] ]
#
# values: array (of screen|item pairs)
# default: false (no defaults)
#
# ----------------------------------------------------------------------------
# ----------------------------------------------------------------------------
# View port sizes
#
items: 5
itemsCustom: false
itemsDesktop: [1199,4]
itemsDesktopSmall: [980,3]
itemsTablet: [768,2]
itemsTabletSmall: false
itemsMobile: [479,1]
singleItem: false
itemsScaleUp: false
# ----------------------------------------------------------------------------
# Basic Speeds
#
slideSpeed: 200
paginationSpeed: 800
rewindSpeed: 1000
# ----------------------------------------------------------------------------
# Autoplay
#
autoPlay: false
stopOnHover: false
# ----------------------------------------------------------------------------
# Navigation
#
navigation: false
navigationText: ["prev","next"]
rewindNav: true
scrollPerPage: false
# ----------------------------------------------------------------------------
# Pagination
#
pagination: true
paginationNumbers: false
# ----------------------------------------------------------------------------
# Responsive
#
responsive: true
responsiveRefreshRate: 200
responsiveBaseWidth: window
# ----------------------------------------------------------------------------
# CSS Styles
#
baseClass: owl-carousel
theme: owl-theme
# ----------------------------------------------------------------------------
# Lazy load
#
lazyLoad: false
lazyFollow: true
lazyEffect: fade
# ----------------------------------------------------------------------------
# Auto height
#
autoHeight: false
# ----------------------------------------------------------------------------
# AJAX (JSON)
#
# All data items displayed by a carousel are being read from a JSON
# file (default: /assets/data/carousel.json) automatically generated.
# AJAX methods are used to supply the needed HTML code at
# the time the carousel is initialized.
#
xhr_data_path: /assets/data/carousel.json
jsonSuccess: false
# ----------------------------------------------------------------------------
# Mouse Events
#
dragBeforeAnimFinish: true
mouseDrag: true
touchDrag: true
# ----------------------------------------------------------------------------
# Transitions
#
transitionStyle: false
# ----------------------------------------------------------------------------
# Callbacks
#
beforeUpdate: false
afterUpdate: false
beforeInit: false
afterInit: false
beforeMove: false
afterMove: false
afterAction: false
startDragging: false
afterLazyLoad: false
# ----------------------------------------------------------------------------
# Other
#
addClassActive: false
# ----------------------------------------------------------------------------
# SHOW options
# ----------------------------------------------------------------------------
#
# enabled
# ----------------------------------------------------------------------------
# Enables|Disables the use of the OwlCarousel
#
# values: boolean (true|false)
# default: false
#
# carousel
# ----------------------------------------------------------------------------
# All shows are configured as elements of the carousel
# array
#
# enabled:
# ----------------------------------------------------------------------------
# If enabled, show data (JSON) is generated
#
# values: boolean (false|true)
# default: no default
#
# lightbox:
# ---------------------------------------------------
# If set to true, J1 Lightbox is enabled for all images
# of that carousel|show
#
# NOTE:
# To use Lightbox with Owl Carousel, lazyLoad needs to
# be enabled for the show to delay the load of images.
# If lightbox is detected as ENABLED, lazyLoad is
# automatically ENABLED as well.
#
# values: boolean (false|true)
# default: false
#
# id
# --------------------------------------------------------------------------
# A unique id used to create and initialize a
# (specific) carousel|show.
#
# values: string
# default: no defaults
#
#
# item_type
# --------------------------------------------------------------------------
# For a slide show, images or text (HTML code) can be
# used as items.
#
# values: image|text
# default: image
#
# css_classes
# --------------------------------------------------------------------------
# For slide show items (image or text), a list of CSS
# class names can be configured as a string of classes
# separated by spaces. The class names are passed to all
# items specified (like class="{css_classes}")
#
# values: string
# default: no defaults
#
# images
# --------------------------------------------------------------------------
# The images array specifies all images used by a
# carousel as items. All images are to be configured
# as a comma separated list (of image names with NO path).
#
# NOTE:
# Because NO individual path for images can be configured,
# all image files are to be located in the SAME directory.
#
# values: array|string (image names)
# default: no defaults
#
# slide_height
# --------------------------------------------------------------------------
# The images are scaled to 100 percent of height per
# default. To reduce the height of the images of a
# show, slide_height reduce the (viewport) height of
# a show down to 10vh (vh, view height).
#
# IMPORTANT:
# This option can be used ONLY for SINGLE image shows
# with option "singleItem" set to "true".
#
# NOTE:
# The view port units VH and VW are supported for
# browsers supporting CSS3, only. The view port units
# scale the view port of an HTML element (e.g DIV)
# in relation to the current (window) size of the
# browser.
#
# values: integer [10 .. 100] (vh)
# default: 100
#
# lb_caption
# --------------------------------------------------------------------------
# The lb_caption array specifies all CAPTION TEXT
# used by the LIGHTBOX configured (if a lightbox is
# enabled).
#
# Caption text elements are to be configured as a
# comma separated list of the SAME number as IMAGES
# configured for a show.
#
# values: array|string (caption text)
# default: no defaults
#
# images_path
# --------------------------------------------------------------------------
# Path to the IMAGES configured with the 'images'
# sequence (array ).
#
# values: string (path)
# default: no defaults
#
# text
# --------------------------------------------------------------------------
# If the slide show items are of type TEXT (item_type),
# the text array specifies all text blocks (plain text
# of HTML code) used by a carousel as show items. Text
# items are configured as a comma separated list of
# strings.
#
# values: array|string (plain text OR HTML code)
# default: no defaults
#
# links
# --------------------------------------------------------------------------
# On all carousel items, links (URLs) can be specified.
#
# NOTE:
# The number of elements of the 'links' array has to be
# the same as the images or text array. The links are
# bound to the items the same order. The first link is
# bound to the first image|text block, the second link
# to the second image|text etc.
#
# values: array|string (url)
# default: no defaults
#
#
# ----------------------------------------------------------------------------
# ----------------------------------------------------------------------------
# CAROUSEL configurations
# ----------------------------------------------------------------------------
carousel:
# --------------------------------------------------------------------------
# owl_demo_text_carousel
#
- show:
enabled: true
id: owl_demo_text_carousel
lightbox: false
type: text
css_classes: img-fluid
text: [
"Jekyll One Template Clean, responsive and fully featured Template made for Jekyll",
"Jekyll meets Bootstrap Best of open source and commercial software for the Web",
"J1 is Open Source No pain for private or professional use",
"Explore this site Learn what's possible if you go the Jekyll Way",
"Create modern static sites Secure, powerful and fast"
]
options:
autoPlay: 5000
singleItem: true
pagination: false
# --------------------------------------------------------------------------
# owl_demo_text_carousel_parallax
#
- show:
enabled: true
id: owl_demo_text_carousel_parallax
lightbox: false
type: text
parallax: true
parallax_id: owl_text_carousel_parallax
css_classes: img-fluid
text: [
"Jekyll One Template Clean, responsive and fully featured Template made for Jekyll",
"Jekyll meets Bootstrap Best of open source and commercial software for the Web",
"J1 is Open Source No pain for private or professional use",
"Explore this site Learn what's possible if you go the Jekyll Way",
"Create modern static sites Secure, powerful and fast"
]
options:
autoPlay: 5000
singleItem: true
pagination: false
# --------------------------------------------------------------------------
# owl_demo_cats
#
- show:
enabled: true
id: owl_demo_cats
# title: Nice cats
slide_space_between: 3
slide_border: true
lightbox: true
type: image
css_classes: img-fluid
images_path: /assets/images/carousel/cats
images: [
cat-1.jpg, cat-2.jpg,
cat-3.jpg, cat-4.jpg
]
links: [
"#", "#",
"#", "#"
]
lb_caption: [
You see cat no 1,
You see cat no 2,
You see cat np 3,
You see cat no 4
]
options:
navigation: false
itemsCustom: [
[0, 1], [400, 1], [700, 2],
[1000, 2], [1200, 2], [1600, 2]
]
slideSpeed: 300
paginationSpeed: 400
items: 2
# --------------------------------------------------------------------------
# owl_demo_simple
#
- show:
enabled: true
provider: j1
id: owl_demo_simple
type: image
css_classes: img-fluid
images_path: /assets/images/gallery/justified_gallery
images: [
000_6791628438_affaa19e10_b.jpg, 000_6798453217_72dea2d06e_b.jpg,
000_6806687375_07d2b7a1f9_b.jpg, 000_6840627709_92ed52fb41_b.jpg,
000_6876412479_6268c6e2aa_b.jpg, 000_6880502467_d4b3c4b2a8_b.jpg
]
links: [
"#", "#", "#", "#",
"#", "#", "#", "#"
]
options:
autoPlay: 3000
items: 3
autoHeight : true
pagination: false
paginationNumbers: false
itemsDesktop: "[1199,3]"
itemsDesktopSmall: "[979,3]"
# --------------------------------------------------------------------------
# owl_demo_oneslide
#
- show:
enabled: true
provider: j1
id: owl_demo_oneslide
type: image
lightbox: true
css_classes: img-fluid
images_path: /assets/images/gallery/justified_gallery
images: [
000_6791628438_affaa19e10_b.jpg, 000_6798453217_72dea2d06e_b.jpg,
000_6806687375_07d2b7a1f9_b.jpg, 000_6840627709_92ed52fb41_b.jpg,
000_6876412479_6268c6e2aa_b.jpg, 000_6880502467_d4b3c4b2a8_b.jpg
]
options:
navigation: true
slideSpeed: 300
paginationSpeed: 400
singleItem: true
transitionStyle: goDown
# END config
# ------------------------------------------------------------------------------