Slider Extension for Carousel Effects in TYPO3

  • slider for images and videos
  • slider for content elements
  • slider for pages

Slider Extension with Multiple Uses

Various requests from different customers let the functionality of the TYPO3 extension we developed for a slider grow steadily. The "a7carousel" was developed, based on the TYPO3 extension slickcarousel, as an image gallery with carousel effect from TYPO3 7. Besides the presentation of images, it also offers a function to display whole content elements in the carousel.

The image slider uses the database table sys_file_references, thus a title and alt text as well as a caption can be specified per image and a link can be set. Furthermore, it offers the possibility to display images from a created file collection (sys_file_collection). Thanks to a wide range of options, many different display variants (also in combination) are possible, for example with navigation points, play/pause buttons, thumbnails or click-enlarge. In addition to the integration shown here in the example in the content area next to the text, the a7carousel is of course also suitable for the presentation of large-format images that take up the entire screen.

Probably the most typical use of the content element slider is the presentation of selected text-with-image content elements with a carousel effect, as our example also shows. In combination with the TYPO3 extension a7styles developed by a7digital and a few additional settings, it is also possible to display the texts entered in the Rich Text Editor, which can also contain links, on the (e.g. full-page) images and have several of them run through.

One advantage of the a7carousel is that editors can make all the settings of the sliders themselves, without having access to plugins. This is because the a7carousel sliders are not inserted via plugins, as is often the case for other extensions, but are available when selecting the content element types. Thus, no special editor rights need to be set up for this if all content element types are allowed by default in your installation (i.e. the mode "explicitADmode" is selected in the InstallTool).

use of the TYPO3 extension a7carousel for an image slider
use of the TYPO3 extension a7carousel for a content slider presenting text with image

Further Possible Applications

In combination with the already mentioned TYPO3 extension a7styles and a few additional settings, the image slider can also be used as a slider for videos. Thanks to a Javascript programming, the videos open in a lightbox in front of the darkened background of the website instead of on an external page.

In addition, the a7carousel also offers the content element type "page slider" presenting individually selectable pages by a suitable image with a carousel effect. This elegant presentation, created in the example shown here by the TYPO3 extension a7styles with displaying the page name on the image, can be used, for example, for the presentation of related topics or further pages.

The a7carousel sliders are of course all responsive and automatically adapt to different screen sizes. Due to the various and partly separate setting options for mobile devices, the number of images presented at once can also be individually adjusted in smaller views, e.g. three images next to each other in smaller screens, two images in tablets and one in smartphones.

use the image slider for videos that open in a popup
use of the a7carousel as a page slider to present further information on other pages

Options of a7carousel at a Glance

  • supplements the selection of content element types in TYPO3, so that editors do not need access rights for plugins
  • numerous settings to adjust the slider perfectly for the respective use, e.g.:
    • speed of the screen change
    • transition speed
    • display of navigation points
    • image order
    • behavior on hover and in mobile devices (e.g. enable swiping)
    • various effects
    • alignment
    • scrolling direction and much more
  • best suited for responsive designs with individual setting options for standard views (PC) and smaller screens like tablet or smartphone, for example:
    • number of slides to be shown / scrolled at the same time
    • grid mode
    • display of scroll navigation arrows per view

Use of the Extension

This extension developed by a7digital is not represented in the TYPO3 Extension Repository (TER) until further notice, because there is no manual for it and the extension has only been extensively tested in the context of certain TYPO3 installations. Nevertheless, we describe it here, because it is an illustrative example for individual programming.

Contact data Contact data
TYPO3 Web Sites is a services of a7digital.