By Lee Sykes
June 2009
In this tutorial we demonstrate how to use the Markit Slideshow module. The Slideshow module is useful for displaying your featured articles and products as an image, text content or you can even display an existing module within a slideshow. This module displays content in a similar manner to the msn.com home page.
The Slideshow module uses Javascript and CSS to display the slideshow, so it is not reliant on Flash. The module combines text and images to create slides, as well as slide navigation. The slides can be rotated one after another and text can be displayed / integrated anywhere inside the slideshow. The slideshow's navigation features play/pause and previous/next buttons, as well as individual slide selection buttons for full control by the user/visitor of your site.
There are lots of configuration options available for this module, including the ability to use templates for the layout and styling of the slideshow. The module comes complete with 10 templates which should cover most of your needs.
The Slideshow module is available to purchase from
Markit Modules.
In this tutorial we walk you through installation, creating your own image, text and existing module slides as well as how to configure the display of the module and working with templates.
The videos contain:
Video 1 - Introduction, Installation, Adding Slides
- Introduction and examples
- How to install the module
- How to add the module to a page
- How to configure the module
- Manage Content
- Image Source
- How to create a slide and upload an image
- How to edit the content of a slide
- How to delete a slide and re-order slides
Time Length: 8min 43secs
Video 2 - How to Create a Slide and View a Slideshow
- How to edit the content of a slide
- Language and localization
- Slide mode
- Show Tooltip
- Start and End publishing date
- Title, sub title, content
- How to setup links for each slide
- How to change slide image
- Viewing the Slideshow module with the default configuration
Time Length: 6min 17secs
Video 3 - How to Create a Text / HTML slide and Existing Module Slide
- Manage Content
- How to create a blank slide with Text / HTML
- How to change the text color
- Stylesheet editor for portal.css
- How to create a Slideshow text CSS class
- How to add the class to the slide for white text
- How to add an existing module as a slide
Time Length: 7min 36secs
Video 4 - Slideshow Templates and Configuration Options
- Configuration Options
- Demonstration of the templates
- How to create a Slideshow template
- Slides switch
- Slide image quality
- Slide background color
- Slide width and height
- Slidebar width
- Border width
- Slide delay
- Transition delay
- Preloader delay
Time Length: 9min 05secs
Video 5 - Slideshow Configuration Options
- How to limit the number of slides and display them randomly
- Title, Content, Subtitle word limits
- AutoStart slides
- Show navigation bar
- Show Title, Content, Read More
- Text transition effect
- Loop once
- Round image corner
- MouseOver stop
- Random slides
- Disable all links
- Disable Slidebar scroll
Time Length: 6min 16secs
Total Time Length: 37min 57secs