Unter dem Punkt "Slider Stil", im Tabulator "News Slider", stehen einige fertige Varianten zur Auswahl.
Für die wichtigsten Einstellungen, stehen Optionen in der Flexform bereit (s. Screenshots).
Unter "CSS-File" kann ein eigener Style-Sheet für den Slider eingebunden werden.
Flex Slider Setup:
plugin.tx_newsslider {
settings {
flexslider {
// all missing options can be set by flexform
# The slide that the slider should start on. Array notation (0 = first slide)
startAt = 0
# Set the speed of the slideshow cycling, in milliseconds
slideshowSpeed = 7000
# Set the speed of animations, in milliseconds
animationSpeed = 600
# Pause the slideshow when interacting with control elements, highly recommended.
pauseOnAction = true
# Pause the slideshow when hovering over slider, then resume when no longer hovering
pauseOnHover = false
# Slider will use CSS3 transitions if available
useCSS = true
# Allow touch swipe navigation of the slider on touch-enabled devices
touch = true
# String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
easing = swing
# String: Select the sliding direction, "horizontal" or "vertical"
direction = horizontal
# Boolean: Reverse the animation direction
reverse = false
# Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
animationLoop = true
# Boolean: Allow height of the slider to animate smoothly in horizontal mode
smoothHeight = false
# Integer: Set an initialization delay, in milliseconds
initDelay = 0
# Boolean: Randomize slide order
randomize = false
# Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
video = false
# String: Set the text for the "previous" directionNav item
prevText = Previous
# String: Set the text for the "next" directionNav item
nextText = Next
# Boolean: Allow slider navigating via keyboard left/right keys
keyboard = true
# Boolean: Allow keyboard navigation to affect multiple sliders. Default behavior cuts out keyboard navigation with more than one slider present.
multipleKeyboard = false
# Boolean: Requires jquery.mousewheel.js (https://github.com/brandonaaron/jquery-mousewheel) - Allows slider navigating via mousewheel
mousewheel = false
# Boolean: Create pause/play dynamic element
pausePlay = false
# String: Set the text for the "pause" pausePlay item
pauseText = Pause
# String: Set the text for the "play" pausePlay item
playText = Play
// Carousel Options
# Integer: Carousel Options -> Margin between carousel items. If you change this, you have to edit the css-file (.carousel li {margin-right: 5px;})
itemMargin = 5
# Integer: Carousel Options -> Number of carousel items that should move on animation. If 0, slider will move all visible items.
move = 0
// Custom Options
# Boolean: Show caption in the slider
caption = 1
# 16by9 or 4by3 for style 1 (Basic Slider) only - slidersize should also have that relation!
videoSize = 16by9
}
}
}
Weitere Infos: