Flex Slider

newsslider ns-1

An awesome, fully responsive jQuery slider.

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:

https://github.com/woocommerce/FlexSlider

  • Slick Slider

    Responsive, Einstellungen pro Breakpoint, CSS3, Swipes, Indikatoren, Pfeilen, Mouse-Dragging, Autoplay, Lazy-Loading, Fading, Infinite-Looping, einer…

  • Nivo Slider

    The Nivo Slider is world renowned as the most beautiful and easy to use image slider on the market.

  • Camera Slideshow

    Camera is a responsive beautiful open source slideshow project.

  • Flex Slider

    An awesome, fully responsive jQuery slider.

  • Installation & Konfiguration

    Bevor die EXT:newsslider installiert werden kann, muss die EXT:news (aus dem TER) installiert werden.