Dottoro Theme Documentation

Tutorial to get your theme to work

PrologueFirst StepsFront PageCreating a custom front pageBlog, News and Portfolio post typesPost Type specific settingsGeneral settingsSingle post settingsCategory / Tag / Date archive page settingsPermalink settingsOptions on single post pagesGeneral page optionsImage optionsGallery settingsPage Templates and PagesPage SettingsPage TemplatesPages created from page templatesGeneral page settingsGallery settingsBlog page settingsNews page settingsPortfolio and Imagefolio page settingsContact page settingsArchives page settingsAuthors page settingsBoomarks page settingsSitemap page settingsSpecial pagesCategory and tag page settingsArchive and date page settingsSearch page settingsAuthor page settings404 page settingsHeader and MenuSubheadersSubheader specific shortcodesPredefined SubheadersCreating SubheadersAssigning subheaders to pagesFooterWidgets in the FooterCopyright and other notices in the FooterSidebarWidgets on the SidebarWidth and alignment of the sidebarWidget AreasWidgetsBreadcrumbShortcodesShortcodes In Alphabetical OrderShortcodes By CategoriesNested ShortcodesPost TemplatesOverlaysMedia and External MediaOverview of galleries, gallery listings and slideshowsGalleries and Gallery ListingsAbout Galleries In GeneralCreating And Managing Galleries[gallery_list] shortcodeSlideshows and Popup SlideshowsSlideshowsPopup SlideshowsSlideshow SettingsMost Often Used Slideshow OptionsAll Slideshow OptionsSlideshow Templates - Slideshow Specific ShortcodesStyling Guide For SlideshowsStyling Of Slideshow and Post TemplatesSlidesPopupsSelectorsWeb FontsGeneral Theme SettingsUser RolesExport / Import SettingsCreating theme designsLocalizationHeadingsChild ThemesCSS ClassesResponsive DesignCSS Extension JavaScript ToolkitJavaScript LibraryAction HooksFilter HooksCompatibility Issues
<

18. Slideshows and Popup Slideshows

If you have not already done so, please read Overview of galleries, gallery listings and slideshows first.

Dottoro Theme provides a totally unique and extremely flexible way for creating slideshows. You can choose from two basic slider types: single and scroller (carousel), and with the help of the Dottoro template system you can specify what and where you want to display. You can place the navigation buttons below, next to, or above the slides, the play/pause button over the slides, etc. The template system gives you full control not just over the main components of a slider, but also over the look and feel of the slides. Images, videos, pages and posts and any custom HTML content can be displayed in slideshows and with the help of post templates you can specify what data and where you want to display. Image titles and descriptions, post thumbnails, titles, excerpts, categories and tags, authors, custom fields can all be displayed.

Table of contents

18.1 Slideshows

As a first step, create a slideshow. Go to Slideshows » Slideshows, click on "Add New" at the top of the page, give your slideshow a name, then click on "Create Slideshow". Then choose one from the premade slider configurations (profiles). There are profiles for both single and scroller type sliders. Just select one that best suits your need then click save.

Tip: Check out these demo pages: Single Sliders Demo, Carousel Sliders Demo They demonstrate the predefined slider configurations you can choose from.
As you can see, there are several options you can set to change the way a slideshow works. You probably won't need to change most of the settings, but you should check the Slide Width/Height and Media Width/Height options in the Slide Settings section. These options must be set correctly otherwise the slideshow will not look and work as expected. The other options are not so important, you can always change them later.

Now you have a slideshow. The next step is to decide what you want to display in the slideshow. A slideshow can display a gallery or a list of galleries and it is also possible to query for posts and display them in a slideshow.

Examples:

Example 1 - How to add an image slideshow to my homepage?

First you need to create a gallery that contains the images you want to display in the slideshow. Go to the edit screen of your homepage and click on the "Edit Galleries" button in the "Dottoro Galleries" metabox. Create a new gallery in the opening gallery editor, add your images to it then save it. Finally, add a [slideshow] shortcode to the content of your homepage:

[slideshow name="id_of_slideshow" galleries="name_of_gallery" /]
For ease of use, if you want to display the default gallery of a page/post, the gallery doesn't need to be specified:
[slideshow name="id_of_slideshow" /]

Example 2 - I have 3 blog posts that I want to display in a slideshow on my homepage. How do I do this?

Similar as in the previous example, create a new gallery for your homepage and add the 3 blog posts to it. Then add a [slideshow] shortcode to the content of your homepage:

[slideshow name="id_of_slideshow" galleries="name_of_gallery" /]

Example 3 - How to add a slideshow to my homepage that displays the 5 latest blog posts?

Add a [slideshow] shortcode to the content of your homepage by specifying the name of the slideshow you want to display and put a [query] shortcode into it:

[slideshow name="id_of_slideshow"]
	[query post_type="post" posts_per_page="5" /]
[/slideshow]

Example 4 - How to add a slideshow to my homepage that displays the 5 latest blog posts from a the "tech" category?

Add a [slideshow] shortcode to the content of your homepage by specifying the name of the slideshow you want to display and put a [query] shortcode into it:

[slideshow name="id_of_slideshow"]
	[query post_type="post" posts_per_page="5" categories="tech" /]
[/slideshow]

Example 5 - I want to display the same slideshow in the content of every post on my site. How do I do this?

The easiest way to do this is to add a [slideshow] shortcode to the post template used for the posts (more on Post Templates). Then create a global gallery ("Galleries" menu on the admin screen) and specify it for the slideshow shortcode:

[slideshow name="id_of_slideshow" galleries="0:name_of_gallery" /]

Example 6 - I want to add a slideshow to every post on my site and I want the slideshow to display the default gallery of the post. How do I do this?

Add a [slideshow] shortcode to the post template used for the posts (more on Post Templates). Since you want to display the default gallery of the posts, only the name of the slideshow needs to be specified:

[slideshow name="id_of_slideshow" /]

Example 7 - I want to add a slideshow to every post on my site and I want the slideshow to display the "my-gallery" gallery of the post. How do I do this?

The answer is the same as in the previous example, but the gallery must be specified for the slideshow shortcode:

[slideshow name="id_of_slideshow" galleries="my-gallery" /]

Example 8 - How to display the same slideshow in the header/subheader of every post and page on my site?

Create a global gallery ("Galleries" menu on the admin screen) and add the following [slideshow] shortcode to the content of the header/subheader:

[slideshow name="id_of_slideshow" galleries="0:name_of_gallery" /]

If you want to add the slideshow to a subheader, you can also use a gallery of the subheader instead of a global gallery. Add a new gallery to the subheader with the "Edit Galleries" button in the "Dottoro Galleries" metabox and add the following [slideshow] shortcode to the content of the subheader:
[slideshow name="id_of_slideshow" galleries="id_of_subheader:name_of_gallery" /]
The "id_of_subheader" must be replaced with the post id of the subheader.

Example 9 - How to add a slideshow to the header/subheader of every post on my site that displays the default gallery of the post?

Add a [slideshow] shortcode to the to the content of the header/subheader:

[slideshow name="id_of_slideshow" /]

Example 10 - How to add a slideshow to the header/subheader of every post on my site that displays the "my-gallery" gallery of the post?

Add a [slideshow] shortcode to the to the content of the header/subheader:

[slideshow name="id_of_slideshow" galleries="my-gallery" /]

Example 11 - How to add the same slideshow to the sidebar/footer of every post and page on my site?

Create a global gallery ("Galleries" menu on the admin screen) and put a Slideshow Widget into a widget area that is displayed in the sidebar/footer of every page and post (more on Widget Areas). Finally, select the global gallery for the "Gallery" option of the Slideshow Widget.

Example 12 - How to add a slideshow to the sidebar/footer of every post that displays the default gallery of the post?

Put a Slideshow Widget into a widget area that is displayed in the sidebar/footer of every post (more on Widget Areas) and select "Default Post Gallery" for the "Gallery" option of the slideshow widget.

Example 13 - How to add a slideshow to the sidebar/footer of every post that displays the "my-gallery" gallery of the post?

Put a Slideshow Widget into a widget area that is displayed in the sidebar/footer of every post (more on Widget Areas), select "Custom" for the "Gallery" option of the slideshow widget and write "my-gallery" into the input next to it.

Example 14 - How to add a slideshow to the sidebar/footer of every post that displays the 5 latest blog posts?

Put a Slideshow Widget into a widget area that is displayed in the sidebar/footer of every post (more on Widget Areas), and add a [query] shortcode to the "Extra Settings" field:

[query post_type="post" posts_per_page="5" /]

Example 15 - I have slideshow on my homepage displaying images. I want to add the same slideshow to the content of another page. How do I do this?

If the images are in a global gallery, just add the same slideshow shortcode to the content of the page:

[slideshow name="id_of_slideshow" galleries="0:name_of_gallery" /]
If the images are in a gallery of your home page, then you need to refer to the post id of your home page (23 in the example):
[slideshow name="id_of_slideshow" galleries="23:name_of_gallery" /]

Example 16 - I have slideshow on my homepage displaying images. I want to add the same slideshow to the content of another page, but I want the images to be smaller. How do I do this?

You should do the same as in the previous example, but put an [item_settings] shortcode into the slideshow shortcode to modify the size of the images.
Something like this:

[slideshow name="id_of_slideshow" galleries="name_of_gallery"]
	[item_settings media_width="200" media_height="100" /]
[/slideshow]

Popup Slideshows can be managed under Popups » Gallery Popups. Since popup slideshows are needed on almost every website, the theme comes with a couple of predefined popup slideshows that are designed to meet the most common needs. They are fully responsive meaning they auto-adjust depending on the screen size of the device in both directions, horizontally and vertically. Builtin popup slideshows are readonly, but with the help of premade slider configurations (profiles) you can easily create custom ones.
In the following section, you will find examples for popup slideshows. For a description of popup slideshow options, please read the Slideshow Settings section.

Example 1 - How to add an image to the content of a page/post that opens a popup slideshow when the user click on it?

First, create a gallery for the page/post by clicking on the "Edit Galleries" button in the "Dottoro Galleries" metabox on the edit post screen. Give your gallery a name and add the images or any other media, posts or pages to the gallery that you want to display in the popup slideshow.
You will find a Gallery Popup option at the top of the gallery. It allows you to select a popup slideshow for the gallery. For ease of use, you don't need to select a popup slideshow for every single gallery. You can select a default popup slideshow for the whole site, for pages, for posts by post types and for every single post and page (more on the Gallery Popup option).
Save your gallery and close the gallery wizard window. Now click on the "Add Media" button above the WordPress content editor to insert an image to the content of your page/post. When you have selected the image in the media dialog, you will find an Overlay option on the right hand side of the dialog. Select an overlay for your image that contains a [gallery_button]. For instance, the "Gallery" overlay (more on Overlays). Finally, click on the "Insert Into Post" button.
You are done. When the mouse hovers over the image an overlay will be shown and clicking on the gallery button opens a popup slideshow displaying the gallery of the post. If you want to add another image to your page that opens the same popup slideshow, you don't need to do anything else but select the same overlay (or another one that contains a [gallery_button]) on the media dialog.

Example 2 - How to add two images to the content of a page/post that open the same popup slideshow but displaying different galleries?

Create two galleries for the page/post that you want to display in the popup slideshows. Then similar as in the previous example, select an overlay for your images on the media dialog. You will find a Popup Galleries option below the Overlay option on the media dialog. Here you can specify the name of the gallery you want to display in the popup slideshow.

Example 3 - How to add a link, button or any HTML content to a page/post that opens a popup slideshow when the user click on it?

Put the link, button or HTML content into a [popup_opener] shortcode.

For instance:
[popup_opener]<a href="#">Open Gallery</a>[/popup_opener]
Example 4 - I have a post listing page displaying portfolio posts. I want to open a popup slideshow when clicking on the post thumbnails in the list. How do I do this?

First, you should select an overlay for the post thumbnails that opens a popup slideshow (Thumbnail Overlay option in the "Post Thumbnail & Overlay" section).
Then enable popup slideshows with the Enable Popup Galleries option in the "Popup Gallery" section.
Additionally, the Popup Galleries option below it allows you to specify the name of the galleries you want to display in the popup slideshow. You can display any gallery of the posts in the popup slideshow and it is also possible to display the posts themself.
The next option, the Separate Popup Galleries, allows you to select whether you want the popup slideshow to display the given gallery of only the corresponding post or all posts.
Finally, with the help of the Gallery Popup option you can select a popup slideshow for the list.

Example 5 - I have a post_list shortcode displaying posts thumbnails in a 2-column layout. I want to open a popup slideshow when clicking on the post thumbnails. How do I do this?

You should put an [item_settings] shortcode into the post_list shortcode and use the media_overlay attribute of the item_settings shortcode to select an overlay for post thumbnails that opens a popup slideshow. Then, put a [popup_gallery_settings] shortcode into the post list shortcode to specify the properties of the popup slideshow. For details, please see the [popup_gallery_settings] shortcode.

Example 6 - I have a gallery containing posts and a [gallery_list] shortcode that displays the post thumbnails of the gallery in a 3-column layout. I want to open a popup slideshow when clicking on the post thumbnails. How do I do this?

The answer is the same as in Example 5.

Example 7 - I have a [gallery_list] shortcode that displays the 5 latest blog posts. I want to open a popup slideshow when clicking on the post thumbnails. How do I do this?

The answer is the same as in Example 5.

Example 8 - I have a slideshow displaying images. I want to open a popup slideshow when clicking on the images. How do I do this?

First, you should select an overlay for the images that opens a popup slideshow (Media Overlay option in the Slide Settings section).
Then enable popup slideshows with the Enable Popup Galleries option in the Popup Gallery section. If you want to display the same images in the popup slideshow as in your "normal" slideshow, set the Popup Galleries option to "_same". If your slideshow displays post thumbnails, then it is also possible to display the galleries of the posts in the popup slideshow. Just specify the name of the gallery for the Popup Galleries option or set it to "_default" to display the default gallery of the posts.

Example 9 - When I click on the post thumbnail on single post pages a popup slideshow opens. How can I change this popup slideshow?

You will find a Gallery Popup option on the Edit Post screen. It allows you to select a gallery popup for the page.
If you want to change the gallery popup for every post on your site, use the Gallery Popup option under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings.
Finally, to change the default gallery popup for the whole site, use the Gallery Popup option under Theme Options » General.

18.3 Slideshow Settings

Slideshows can be created and managed under Slideshows » Slideshows, popup slideshows under Popups » Gallery Popups. Since normal and popup slideshows work the same way, the same options are available for them. But since gallery popups determine the look of the popup window not just its content, popup related options are also available for them. In the following sections, the slideshow options will be described. For a description of popup related options, please read the Popup Settings section.

Regardless of whether you create a normal or popup slideshow, you will find a profile selection at the top of the page. Each profile is a predefined slideshow configuration. There are profiles for both single and scroller type sliders.

Demo site: Single Sliders Demo, Carousel Sliders Demo
Just select one that best suits your need.
Please note that although you can always select a different profile later, but changing the profile overwrites all slideshow settings. If you need to change the profile of a published slideshow, we recommend to create a new one. So you can preview the changes without affecting the live site (just change the id of the slideshow in the [slideshow] shortcode that displays the published slideshow and click on the WordPress "Preview Changes" button).

18.3.1 Most Often Used Slideshow Options

Most Often Used Slideshow Options
Slide Width and Height, Media Width and Height You will find these options in the Slide Settings section and they allow you to set the size of the slides and media displayed in them.
If post thumbnails or other images are displayed in the slideshow and the Media Width and Height options are not specified, the full size images will be loaded. It does not mean that the images will be displayed in full size, they will be resized/scaled down if there is no enough space for them. For instance, if you want a single image slider to display 500 pixels wide images, it is advisable to set this option to 500 and not the width of the slideshow/slides to 500, otherwise the images will be downloaded in their original size that can result in slower page loading and more server traffic.
It is not always necessary to set the Slide Width and Height options. But for instance if a slide contains only layers (slide posts - Slideshows » Slides - usually contains only layers), the Slide Width and Height must be specified, otherwise the slides will have zero size (layers are absolutely positioned).
Tip: You can use selectors for these settings. For instance, you can specify different thumbnail width for posts from different categories.

For further details, please see: Slide Width, Slide Height, Media Width, Media Height

Navigation Settings You will find these options in the "Navigation Buttons - Nested Navigation Sliders" section.
You can choose from a couple of simple navigation types (disc, rect, numbered, thumbnail) and you can also use custom navigation buttons.
It is also possible to put the navigation buttons into a nested slider. This is extremely useful for a mobile-friendly design and when there are a lot of navigation buttons.

For further details, please see the Navigation Buttons - Nested Navigation Sliders section.

Autoplay Settings In the "Autoplay" section, you can enable or disable automatic playing, set the skin and shape of the autoplay button and the timeline and more. Additionally, on the Autoplay tab in the Transitions section, you can totally customize the properties of the autoplay transition (delay, duration, end action, etc.).
For details, please see the Autoplay and Transitions section.
Circular The Circular option in the General section allows you to select whether the slider should be circular, or not.
Range Navigation In the Range Navigation section (only available for carousel sliders and not for single sliders), you can select whether you want to show a range navigation for the slider or not and you can also set some of its properties.
Slideshow and Post Templates Slideshow and post templates give you total creative freedom.

A slideshow template specifies what slideshow components and how you want to display. With the help of slideshow templates you can place the navigation buttons below, next to, or above the slides, the play/pause button over the slides, etc.

A post template determines how to create slide from a post or media. Post thumbnails and any media, titles and descriptions, categories and tags and more can be displayed in slides. Additionally, you can use selectors for post templates that allow you to target posts, pages and media according to their attributes, such as CSS class, post type, post format, categories and tags.

For details, please see the Slideshow Template and Post Template options.

18.3.2 All Slideshow Options

All Slideshow Options
General
Slideshow Template Here you can select a custom slideshow template instead of the default one.

Each slideshow profile comes with a predefined slideshow template (Default template). The slideshow template specifies what slideshow components and how you want to display. You can place the navigation buttons below, next to, or above the slides, the play/pause button over the slides, etc.

If you want to change the main layout of a slideshow, you should create a custom slideshow template. But since there are a couple of slideshow settings that highly depend on the layout of the slideshow, it is advisable to always find the slideshow profile that is closest to your needs and use its default slideshow template as a basis to create your own one.

For further details, please see Slideshow Templates.
Tip: If you want to change the look and feel of slides, you should change the post template not the slideshow template. See Post Template option in the Slide Settings section.
CSS Class Space separated list of CSS classes to add to the container element of the slideshow. You can use this option to apply individual styles to the slideshow.
Active Slide Index Specifies the zero-based index of the slide that should be initially active.
Hide Slides From Search Engines Select the slides you want to hide from search engines. Hidden slides will be placed in comments so search engines will ignore them. Since the contents of popup windows are hidden from search engines, this setting is relevant only if the slideshow is displayed in the content not in a popup window.
Orientation Select whether the slider should be horizontal or vertical. RTL mode is also supported. Sliders automatically detect the text direction (direction CSS property) and if it is right-to-left, horizontal sliders will run in RTL mode.
Please note that the Inner View Height option must be specified for vertical carousels.
Slide Align - Demo Site Here you can set the default alignment of slides in the direction corresponding to the orientation of the slider. In other words, it specifies the horizontal alignment of slides in a horizontal and the vertical alignment of slides in a vertical slider. The value "left / top" means that the alignment is left in a horizontal and top in a vertical slider. Similarly, the value "right / bottom" means the alignment is right in a horizontal and bottom in a vertical slider. If this option is set to "direction", then the alignment is based on the placement of slides. If the first slide is leftward/topward (horizontal/vertical slider) from the last slide, the alignment will be "left / top", otherwise the alignment will be "right / bottom". This actually means that the alignment will be top in a vertical slider, and it will be right in a horizontal slider if the text direction is right-to-left, otherwise it will be left.
Please note that the slide alignment specified here can be overridden by any slide transition (Slide Align option for transitions).
Slide Align - Opposite Direction Here you can set the alignment of slides in the direction opposite to the orientation of the slider. In other words, it specifies the vertical alignment of slides in a horizontal and the horizontal alignment of slides in a vertical slider. The value "left / top" means that the alignment is left in a vertical and top in a horizontal slider. Similarly, the value "right / bottom" means that the alignment is right in a vertical and bottom in a horizontal slider.
Horizontal Slide Alignment Select the horizonal alignment of slides. If the Context Dependent Slide Width option (Dimensions section) is disabled, this option only takes effect during transitions between different size slides.
Vertical Slide Alignment Select the vertical alignment of slides. It only takes effect during transitions between different size slides.
Overscroll - Demo Site Here you can set the amount of space before the first and after the last slide. It limits the scrolling area of the slides in a non-circular slider (see Circular option). In circular sliders, this setting does not have any effect.
Possible values:
  • none: no space before and after the slides
  • min: the minimum amount of space that is required for the alignment of slides (see the "Slide Align" option above) to be met. If "Slide Align" is left/top, then no space before the leftmost/topmost slide and as much space after the rightmost/bottommost slide as needed for the slides to be left/top aligned. The right/bottom case is analogous to the left/top case. Finally, if "Slide Align" is center, then as much space before and after the slides that is needed for the slides to be centered.
  • max: as much space as needed for the first and last slides to be positioned as the "Slide Align" option specifies. If "Slide Align" is left/top, then no space before the leftmost/topmost slide and as much space after the rightmost/bottommost slide as needed for the last slide to be positioned to the left/top. The right/bottom case is analogous to the left/top case. Finally, if "Slide Align" is center, then as much space before and after the slides that is needed for the first and last slides to be centered.
Circular - Demo Site Select whether the slider should be circular, or not.
Slides Per Page Specifies the number of slides in a page. This setting is relevant only if a page-based navigation is used for the slider (Navigation Unit option in the "Navigation Buttons" section). The value of 0 means that the slider will automatically determine the number of slides based on the view size.
Pause Autoplay On Over Select whether slide transitions should be paused when the mouse is over the slideshow, the slides or no need to pause transitions.
Pause Type Set the type of pause. Hard pause means that the current slide transition should be stopped immediately while soft pause allows the current slide transition to be finished but new transitions (autoplay) cannot start. This setting has no effect on infinite slide transitions, they stop immediately.
Slide Activation Select whether clicking on a slide activates it or not. If this option is enabled, clicking on a slide triggers an absolute transition. For the settings of absolute transitions, please see the Transitions section below.
Auto Slide Align Select whether the slides should be aligned automatically at the end of dragging and at the end of scrolling with the range control.
Slide Settings
Selectors are supported for the next options
Slide Width Set the width of the slides, in pixels.
This option works differently based on the setting of the Context Dependent Slide Width option (Dimensions section).
If Context Dependent Slide Width is:
  • enabled, then you can also use percentage values for the Slide Width. This is mostly useful for full browser width sliders when you want the slides to have the same width as the screen of the user. In this cases, just set the Slide Width to "100%".
  • disabled, then you cannot use percentage values for the Slide Width. Leave Slide Width blank if you want the size of slides to be determined by their content, for instance, when you want variable width slides. Or specify the width of the slides, in pixels (no need to write "px" at the end).
Please note that since slide posts (Slideshows » Slides) usually contains only layers and layers are absolutely positioned, if a slideshow displays slide posts and the Context Dependent Slide Width option is disabled, then the Slide Width must be specified, otherwise the slides will have zero-width.
Slide Height Set the height of the slides, in pixels. Leave this field blank if you want the size of slides to be determined by their content, for instance, when you want variable height slides.
Please note that since slide posts (Slideshows » Slides) usually contains only layers and layers are absolutely positioned, if a slideshow displays slide posts, the Slide Height must be specified, otherwise the slides will have zero-height.
Media Width Set the width of media, in pixels. For external media, it specifies the max-width. Also see the "Media Sizing Method" below.
For images, if the width and height are not specified, the full size images will be loaded. It does not mean that the images will be displayed in full size, they will be resized/scaled down if there is no enough space for them. But for instance, if you want a single image slider to display 500 pixels wide images, it is advisable to set this option to 500 and not the width of the slideshow/slides to 500, otherwise the images will be downloaded in their original size that can result in slower page loading and more server traffic.
Media Height Set the height of media, in pixels. For external media, it specifies the max-height. Also see the "Media Sizing Method" below.
For images, if the width and height are not specified, the full size images will be loaded.
Media Sizing Method Select a sizing method for media.
  • Exact: the media should be displayed in the size as specified by the Media Width and Height options.
  • Max Cut: if the media is wider and higher than the area specified by the Media Width and Height options, then works the same as "Exact", otherwise if needed, the media will be cut down to fit the area, but will never be enlarged.
  • Max No Cut: if the media is larger than the area specified by the Media Width and Height options, the media will be scaled down to fit the area while keeping the aspect ratio. In other words, it keep the aspect ratio and works the same as the CSS max-width and max-height properties.
Please note that the sizing method is always "Max No Cut" for external media.
Examples: If the size of the media is 400 x 200:
Media Width/Height options Exact Max Cut Max No Cut
100 x 100
100 x 100
scaled down to 200 x 100 and 50 pixels are cut from both the left and right sides
100 x 100
scaled down to 200 x 100 and 50 pixels are cut from both the left and right sides
100 x 50
scaled down to 100 x 50
800 x 100
800 x 100
scaled up to 800 x 400 and 150 pixels are cut from both the top and bottom sides
400 x 100
50 pixels are cut from both the top and bottom sides
200 x 100
scaled down to 200 x 100
200 x 400
200 x 400
scaled up to 800 x 400 and 300 pixels are cut from both the left and right sides
200 x 200
100 pixels are cut from both the top and bottom sides
200 x 100
scaled down to 200 x 100
800 x 400
800 x 400
scaled up to 800 x 400
400 x 200
400 x 200
Post Template Select a post template for the slides. A post template determines how to create slide from a post or media. Post thumbnails and any media, titles and descriptions, categories and tags and more can be displayed in slides (more on Post Templates).
Please note that no post templates used for slide posts (Slideshows » Slides) in main sliders. Their contents are displayed as they are. But this is not true for navigation sliders. In navigation sliders, the post template setting applies to slide posts as well.
Tip: If you want to change the main layout of the slideshow, you should change the slideshow template not the post template. See Slideshow Template option in the General section.
Post Content Preview Select whether the whole content, the teaser or the excerpt of posts should be shown in slides or you want none of them to show. This option only has an effect on posts and not media and relevant only if the post template contains a [post_content] shortcode.
Excerpt Length Set the length of excerpts in characters. Works for both media descriptions and excerpts of posts.
This option is relevant only if the post template contains a [post_content] shortcode, and for posts if it displays an excerpt (see Post Content Preview option above).
Heading Tag Specify the HTML heading tag of post titles.
This option is relevant only if the post template contains a [post_title] shortcode.
Show Title as Link Select whether to show the title as a link or not.
This option is relevant only if the post template contains a [post_title] shortcode.
Show Media as Link Select whether to show post media as a link or not. This settings has an effect only on thumbnails ([post_thumbnail] shortcode) and on image attachments (self hosted images).
This option is relevant only if the post template contains a [post_title] shortcode.
Show Media Frame Select whether to show a frame around media or not.
This option is relevant only if the post template contains a [post_media] or [post_thumbnail] shortcode.
Media Overlay Select an overlay to appear over media. It has an effect on both self hosted an external media and on thumbnails as well.
This option is relevant only if the post template contains a [post_media] or [post_thumbnail] shortcode.
If you want to open a popup window from the overlay, the Enable Popup Galleries option must be set to true.
More on Overlays
Dimensions
Slideshow Width Set the width of slideshow, in pixels. In most cases, it is enough to set the width of the slides/media (Slide Settings section) and not necessary to set this option.
Slideshow Height Set the height of the slideshow, in pixels. This option is rarely needed. In most cases the height of the slideshow should be determined by its content. The only case when the height should be set is when the orientation of a carousel slideshow is vertical. But in this case, it is better to set the height of the visible area of slides (Inner View Height option) not the slideshow.
Flexible Height Select whether the height of the slideshow should be reduced when there is not enough vertical space for the slideshow. This option should be selected if the height of the slideshow is set (Slideshow Height option above or with CSS) and the vertical space available for the slideshow can be less than the height of the slideshow. For instance, when the slideshow is displayed in a popup window.
For performance reasons, if the height of the slideshow is not set, this option should not be selected.
Technically, this option adds a js-flex-height class to the slideshow wrapper element which is one of the features of the Dottoro CSS Extension JavaScript Toolkit.
Inner View Width There are two wrapper elements around the slides, the outer wrapper - outer view and the inner wrapper - inner view. The outer wrapper determines the viewport - the visible area of slides while the inner wrapper is intended to provide a reference system that gives you more options for aligning the slides and when you want to put the previous and next buttons or any other content over the slides. With the "Inner View Width" option you can specify the width of the inner view.

For further details, please see outer and inner views.

Inner View Height This option is mostly useful for vertical carousels (Orientation option in the General section) and specifies the height of the inner view. Also see the Inner View Width option above and the Inner View Flexible Height option below.

For further details, please see outer and inner views.

Inner View Flexible Height Select whether the height of the inner view should be reduced when there is not enough vertical space for it. This option should be enabled if the height of the inner view is set (Inner View Height option above) and the vertical space available for the viewport can be less than the height of the visible area. For instance, when the slideshow is displayed in a popup window. For performance reasons, if the height of the inner view is not set, this option should not be selected.

Technically, this option adds a js-flex-height class to the slideshow\'s inner view which is one of the features of the CSS Extension JavaScript Toolkit.

For further details, please see outer and inner views.

Context Dependent Slide Width Select whether the slide width should depend on the context or the content of the slide. This option affects the way the Slide Width option works (Slide Settings section). If you select this option, you can use percentage values for the Slide Width option (such as 100%). This is helpful for full browser width slideshows when the width of the slideshow depends on the screen size of the user.
Scale Slides Select whether the slides should be scaled down when they are wider/higher then the visible area. This feature is mostly useful if the slides contain some text (not just images).
  • Single sliders: The active slide will be scaled down if it is wider or higher than the visible area.
  • Horizontal carousel (scroller): The slides will be scaled down if the highest slide is higher than the visible area. Please note that if the Inner View Flexible Height option is enabled, the slides will not be higher than the visible area only if their CSS min-height is specified.
  • Vertical carousel (scroller): The slides will be scaled down if the widest slide is wider than the visible area. Note that CSS "max-width: 100%" is set for slides, by default. If you want the scale feature to work for vertical carousels, you need to set a min-width for slides (or remove the max-width).
Scale Highlighting With the help of these options you can highlight some slides by displaying them in a larger size than the others. The measure of scale is based on the align of slides (see Slide Align in the General section) and position of the slide. For instance, if the slides are centered, slides closer to the center will be the larger.
  • Number of slides to highlight: The maximum number of slides that should be highlighted. The value 0 means the scale highlighting feature is disabled, no need to highlight at all. There is a special value, the -1 that means highlight the visible slides.
  • Minimum scale: The scale amount of non-highlighted slides.
  • Overlap: The measure of overlap of slides. The value 0 means no overlap.
Limitations:

If the scale highlighting feature is on:

  • The Overscroll option in the General section will be ignored, "max" will be used.
  • The Navigation Unit option in the Navigation Buttons section must be set to "slide".
  • The Unit option on the Relative tab in the Transitions section (and in the Autoplay tab if specified) must be set to "slide", "%" or "px". The "page", "view" and "view - slide boundary" values cannot be used.

Transitions
There are basically two types of slide transitions: relative and absolute. The result of a relative transition depends on while the result of an absolute transition is independent of the current state of the slider. The previous and next buttons, the left and right arrow keys on the keyboard and the autoplay trigger relative slide transitions. The navigation buttons (thumbnail navigation, disc navigation, etc.), range navigation and clicking on a slide (see Slide Activation option) trigger absolute transitions.
  • Settings under 'Default Transition' affect both absolute and relative transitions.
  • In the "Absolute" tab, you can override these settings for absolute transitions.
  • In the "Relative" tab, you can override these settings for relative transitions and you can also set some relative transition specific properties.
  • Options in the "Autoplay" tab allow you to specify the autoplay transition settings. Since autoplay triggers a relative transition, you only need to set those settings that are different from the relative transition settings.
Default Transition
Autoplay After Transition Set the state of autoplay after the transition. The "do not change" means that the autoplay state will be the same after the transiton as it was before the transition.
Slide Align - Demo Site Set the alignment of slides at the end of the transition. This option specifies the alignment in the direction corresponding to the orientation of the slider. In other words, it specifies the horizontal alignment of slides in a horizontal and the vertical alignment of slides in a vertical slider.
Possible values:
  • auto: the alignment is determined by the Slide Align option in the General section.
  • scrolling direction: the slides will be aligned to the top/left/bottom/right if scrolling to the top/left/bottom/right. If you choose this option, it is advisable to set the Overscroll option to "none" or enable the Circular option (General section).
Change Active Slide - Demo Site Select whether the transition should change the active slide or not. For instance, if clicking on the previous and next buttons does not change the active slide, the slides will be scrolled but the transition will not change which slide is active.

Some notes:

  • Usually, this option must be set to "change" in main sliders and to "do not change" in navigation sliders.
  • If the navigation unit is slide for an absolute transition, the transition always changes the active slide. In other words, if the Navigation Unit option in the "Navigation Buttons" section is set to slide, clicking on the navigation buttons will change the active slide. Additionally, if the Slide Activation option is enabled (General section), clicking on a slide will make it active.

Active Slide Position - Demo Site Set the zero-based position of the active slide relative to the align of slides (see Slide Align). For instance, if the position is 1 and the slides are left aligned, the active slide will be the second one from the left at the end of the transition. This setting has effect only if the slides are not centered and the transition changes the active slide (see the Change Active Slide option and its description for details).
Move Slides - Demo Site Select which cases the slides should be scrolled. This setting is relevant only if the transition changes the active slide (Change Active Slide option).
Possible values:
  • always: always move the active slide to the position specified by the Slide Align and Active Slide Position options.
  • visible: scroll the slides only if the active slide is not visible.
  • inward: scroll the slides only if the active slide is not visible or on the edge of the view. The active slide is on the edge of the view if it is further away from the center as the Active Slide Position option specifies. For instance, if Active Slide Position is set to 1 and Slide Align is left, then if the active slide is the first visible slide from the left, or it is the second one but the first one is not entirely visible, the active slide is on the edge of the view and will be scrolled to the second position from the left.
Animation Duration The duration of the transition animation, in milliseconds.
Please note that the transition may take shorter time depending on the value of the Minimum Scrolling Speed option.
In scroller type sliders (carousels), you can also use negative durations for autoplay transitions (Autoplay tabs). Negative duration means infinite scrolling. In these cases, the Delay option is ignored.

For instance,

  • If the duration is set to -1000 on the Autoplay tab, the Unit is "slide" and the Value is 1, then the automatic playing will scroll the slides infinitely, one slide per second.
  • If the duration is 1000 and the Delay is 2000, then the automatic playing will scroll one slide per second but wait 2 seconds before every transition.
  • If the duration is 1000 and the Delay is 0, then you will get a similar effect as when the duration is -1000, but
    • the Animation Easing option has an effect on the transition
    • although, you can set the Animation Easing to linear to get the same effect as when the duration is -1000, but the animation will not as smooth as for negative durations.

In summary, if you want a smooth, continuously scrolling autoplay animation for a carousel, set the duration to a negative number. In other cases, set the duration to a positive number and use the Delay option to specify the delay between transitions.

Minimum Scrolling Speed Specifies the minimum number of pixels the slides should be scrolled by during the transition animation per second.
Animation Type The type of the transition animation.
Animation Easing The easing of the transition animation.
Type-specific Transition Options
Relative Transitions
Unit Specifies the unit of navigation.
  • For the page unit, you can use the Slides Per Page option (General section) to specify the number of slides in a page. The value of 0 means that the slider will automatically determine the number of slides based on the view size. This is helpful for a responsive design when the view size, thereby the number of visible slides can change.
  • The "view" and "view - slide boundary" units are similar. The "view" unit means scroll by the size of the view. The "view - slide boundary" unit means that scroll as much as possible but the maximum amount of scroll is the size of the view and the slides must be aligned as specified by the Slide Align option.
  • The percentage unit allows you to scroll by an amount that is relative to the sum size of the slides. For instance, if the Value option is set to 20, then it means that scroll by the 20% of the sum size of the slides. It is mostly useful for autoplay animations when you want a "lap" to always take the same time, regardless of the size/number of the slides.
Also see the Value option.
Value Specifies the amount of units to scroll by. The unit is specified by the Unit option above. This option is not supported (value is always 1) for the "view - slide boundary" unit.
End Action Set the action that should be taken when the transition cannot be performed because the slides are scrolled to the start/end position. This option has only effect on non-circular sliders (Circular option - General section).
Autoplay Transition
Direction Select the direction of the autoplay animation.
Delay Specifies the delay time, in milliseconds, before the transition begins.
If the Animation Duration is negative, the delay is ignored.
Autoplay
Enable Autoplay Enable or disable automatic playing.
Show Autoplay Button Select whether to show the play/pause buttons, or not. Technically it determines whether the [slider_button type="play" /] shortcode in the slideshow template should generate any content or not. If there is no [slider_button type="play" /] shortcode in the slideshow template, this option has no effect.
Autoplay Button Visibility Select whether the autoplay button should be always visible, only when it is enabled or only when the mouse hovers over the slideshow.
Autoplay Button Skin Select a skin for the autoplay button.
Autoplay Button Shape Select the shape of the autoplay button. If you select "Custom", you should add a background image and/or custom styling to the play button.
Play Button Icon Set the icon of the play button. Default is 'arrow-right-2'. For a complete list of icons, see Font Icons.
If you do not want to display any icon, set the value to "none".
Technically, this option specifies an icon for the [slider_button type="play"] shortcode in the slideshow template.
Pause Button Icon Set the icon of the pause button. Default is 'pause'. For a complete list of icons, see Font Icons.
If you do not want to display any icon, set the value to "none".
Technically, this option specifies an icon for the [slider_button type="pause"] shortcode in the slideshow template.
Show Timeline Select whether to show the autoplay progress line, or not. Technically it determines whether the [slider_timeline /] shortcode in the slideshow template should generate any content or not. If there is no [slider_timeline /] shortcode in the slideshow template, this option has no effect.
Timeline Skin Select a skin for the timeline.
Previous and Next Navigation - Dragging
Show Prev/Next Buttons Select whether to show the previous and next buttons, or not. Technically it determines whether the [slider_button type="prev" /] and [slider_button type="next" /] shortcodes in the slideshow template should generate any content or not. If there is not previous and next buttons in the slideshow template, this option has no effect.
Prev/Next Buttons Visibility Select whether the previous and next navigation buttons should be always visible, only when they are enabled or only when the mouse hovers over the slideshow.
Prev/Next Buttons Skin Select a skin for the previous and next buttons.
Prev/Next Buttons Shape Select the shape of the previous and next buttons.
Previous Button Icon Set the icon of the previous button. Empty string means that the icon is selected automatically (arrow-left-3 or arrow-up-3) based on the orientation of the slideshow. If you do not want to display any icon, set the value to "none".
For a complete list of icons, see Font Icons.
Technically, this option specifies an icon for the [slider_button type="prev"] shortcode in the slideshow template.
Next Button Icon Set the icon of the next button. Empty string means that the icon is selected automatically (arrow-right-3 or arrow-bottom-3) based on the orientation of the slideshow. If you do not want to display any icon, set the value to "none".
For a complete list of icons, see Font Icons.
Technically, this option specifies an icon for the [slider_button type="next"] shortcode in the slideshow template.
Pause Autoplay On Over Select whether the slideshow should be paused when the mouse is over the previous or next button.
Enable Keyboard Navigation Select whether keyboard navigation is allowed, or not. If this option is enabled, slide transitions can be performed using the left and right arrow keys.
Repeat Delay Holding down the left mouse button or your finger on the previous or next navigation button changes the slides continuously. The same happens when the keyboard navigation is enabled and you hold down the left or right arrow keys. The "Repeat Delay" option allows you to specify the pause time between slide transitions, in milliseconds. A negative value means that automatic playing is disabled.
Drag Support Select the devices you want the drag support to be enabled for.
Navigation Buttons - Nested Navigation Sliders
Navigation Type Select the type of the navigation. You can choose from image (with and without border), numbered, disc, rectangle and custom navigations. Regardless of the selected navigation type, you can decide whether you want to display the navigation buttons in a nested slider or not. For details, please see the Nested Slider For Navigation option.
A custom navigation is always displayed in a nested slideshow and in these cases the nested slideshow allows you to select post templates for the slides (the navigation buttons are the slides of the nested slideshow). It gives you full control over the look and feel of the navigation.
Skin Set the skin of navigation. Works for disc, rectangle and numbered navigations. The "auto" means that the look of the navigation is determined by the skin of the theme (Components » Slideshows in the theme editor).
Navigation Visibility Select whether the navigation should be always visible or only when the mouse hovers over the slideshow.
Alignment Set the alignment of the navigation.
Pause Autoplay On Over Select whether the slideshow should be paused when the mouse is over the navigation, or not.
Show tooltip Select whether to show a tooltip over the navigation items or not.
Works for all navigation types excluding the custom one. If you want to show a tooltip for a custom navigation, add a [tooltip] shortcode to the media/post template used for the navigation items.
Event Select the event that should trigger the slide transition.
Navigation Unit Select the unit of the navigation.

This option is only available for disc, rectangle and numbered navigations. For other navigation types, the unit is always "slide".

For the page unit, you can use the Slides Per Page option (General section) to specify the number of slides in a page. The value of 0 means that the slider will automatically determine the number of slides based on the view size. This is helpful for a responsive design when the view size, thereby the number of visible slides can change.

Limitations:

If the navigation unit is page:

  • The Slide Align option in the General section must be set to "left / top" or if a horizontal slider runs in RTL mode, "right / bottom".
  • Scale highlighting is not supported. The "Number of slides to highlight" must be set to 0 for the Scale Highlighting option in the Dimensions section.

Map Gallery By default, the same gallery is used for the navigation as for the slideshow (slides), but you can change this behavior.
Currently, only the _parent_post value is supported that means that the gallery used for the navigation will contain the parent posts of the gallery items used for the slideshow.
For instance, if the slideshow displays the "gallery1" gallery of the posts with id of 21, 22 and 23 and the "Map Gallery" option is set to "_parent_post", the navigation will display the posts with id of 21, 22, and 23 not their galleries.

Or another example. If the Separate Popup Galleries option is disabled for a post list, then clicking on the post thumbnails open a popup slideshow displaying the merged galleries of the posts.
If you want a navigation for the slideshow that displays the post titles:

  • You should create a custom post template that displays the post title (more on Post Templates):
    [post_title /]
  • Select this post template for the navigation items (Post Template option in the nested slider used for the navigation).
  • And set the "Map Gallery" option to "_parent_post".
Clicking on the navigation buttons the slides will be scrolled to the first gallery item to the post.

Note that the "Map Gallery" option is only supported for custom navigations (Navigation type option) and if the "Map Gallery" option is specified, the Navigation Unit option will be ignored.
Nested Slider For Navigation Select whether to use a nested slider for the navigation or not.
With the help of nested sliders, a slider can easily be made mobile-friendly. Moreover, nested sliders are extremely useful when there are a lot of navigation buttons for a slider.
For a nested slider, The same options are supported as for a main slider. Profiles, previous and next buttons, autoplay and more are all supported for nested sliders. Additionally, nested sliders can also have a navigation buttons that can also be displayed in a nested slider.
Navigation Item Width Set the width of the navigation items, in pixels.
This option is available only if the navigation is not displayed in a nested slider. If the navigation is displayed in a nested slider, the Slide Width option of the nested slider (Slide Settings section) provides similar functionality.
Navigation Item Height Set the height of the navigation items, in pixels.
This option is available only if the navigation is not displayed in a nested slider. If the navigation is displayed in a nested slider, the Slides Height option of the nested slider (Slide Settings section) provides similar functionality.
Scale Down Select whether the navigation should be scaled down if there is no enough space for it or the items should be displayed in multiple rows.
This option is available only if the navigation is not displayed in a nested slider.
Range Navigation
Show Range Navigation Select whether to show a range navigation, or not. Technically it determines whether the [range_control] shortcode in the slideshow template should generate any content or not. If there is no [range_control] shortcode in the slideshow template, this option has no effect.
Thumb Skin Select a skin for the thumb of the range navigation.
Animation Duration Specifies how long the thumb should take, in milliseconds, to move to a new position. The value 0 means go to the new position immediately. For instance, if this value is 1000 and the user clicks on the track of the range control, the thumb will take one second to reach to the new position.
Animation Easing Select an easing for the thumb animation.
Popup Gallery
Enable Popup Galleries Enable this option if you want to open popup slideshows from the slideshow.

There are two shortcodes that are designed to open popup slideshows: the [gallery_button] and [popup_opener] shortcodes. If you select an overlay or post template for the posts (Media Overlay and Post Template options) that contains a [gallery_button] or [popup_opener] shortcode, then clicking on it will open a popup slideshow. The popup slideshow will display the given gallery (Popup Galleries option) of the corresponding post or all posts based on the setting of the Separate Popup Galleries option. For this feature to work, the "Enable Popup Galleries" option must be enabled.

For performance reasons, do not enable this option if you don't need popup galleries.
Popup Galleries Comma separated list of galleries that should be open in the popup slideshow. For instance, "gallery1" means that the popup slideshow will display the "gallery1" gallery of posts, while "gallery1, gallery2" means that the popup slideshow will display both the "gallery1" and "gallery2" galleries of posts.
If this option is not specified, the default gallery will be used.
Additionally, there are two special values:
  • _default: identifies the default gallery. For instance, "_default" means the same as an empty string, "_default, gallery1" means that the popup slideshow will display both the default gallery and the "gallery1" gallery of posts.
  • _same: the popup slideshow will display the same galleries/posts as the slideshow. It works when the gallery is specified with the "galleries" attribute of the [slideshow] shortcode and also when the slideshow displays the result of a query (nested [query] shortcode).
    For instance, if you have a gallery containing 5 videos and every video has a thumbnail, you can display the thumbnails as a carousel and clicking on the thumbnails opens a popup slideshow displaying the videos. Or for instance, you can display the thumbnails of the 5 latest posts in the carousel and clicking on the thumbnails a popup slideshow opens displaying full size thumbnails, post titles and descriptions. See this demo page, it demonstrates the use the the "_same" value for post list pages.
Separate Popup Galleries Select whether the popup slideshow should display the given gallery (Popup Galleries option) of only the corresponding post or all posts.
For instance, if the Popup Galleries option is set to '_default', then:
  • if the "Separate Popup Galleries" option is enabled, then the popup slideshow will display only the default gallery of the corresponding post
  • if the "Separate Popup Galleries" option is disabled, then the popup slideshow will display the default galleries of all posts
Gallery Popup Select a gallery popup for the slideshow. It will be used by the [gallery_button] and [popup_opener] shortcodes to display popup slideshows.
The "Determined by gallery" means that the (first) displayed gallery determines the gallery popup. For further details, please see Popup Slideshows.

18.4 Slideshow Templates - Slideshow Specific Shortcodes

There are two kinds of templates that can be used for slideshows: slideshow template and post template.

With the help of slideshow templates you can specify what slideshow components and how you want to display. You can place the navigation buttons below, next to, or above the slides, the play/pause button over the slides, etc. You will find a Slideshow Template option in the General section for every slideshow. It allows you to select a custom slideshow template for the slideshow.

Although slideshow templates give you total creative freedom, but does not allow you to change the look and feel slides (and custom navigations). For these purposes, the post templates can be used.

In the following sections, the slideshow template and the slideshow specific shortcodes will be described. For a description of post templates, please read the Post Templates section.

18.4.1 Creating and Managing Slideshow Templates

Slideshow templates can be created and managed under Templates » Slideshow Templates. The theme comes with a couple of predefined templates and you can also create custom ones. The contents of custom slideshow templates can be edited the same way as the contents of pages and posts, and you can also use shortcodes in them. There are some shortcodes that have been designed for slideshow templates. You will find their description in the Slideshow Specific Shortcodes.
The predefined templates are read-only, but you can view their content that give you a good basis to create your own templates.

To create your own slideshow template:

You are done, your custom slideshow template is ready to use. Now if you select the new slideshow template for your slideshow (Slideshow Template option in the General section), you will see the changes.

18.4.2 Slideshow Specific Shortcodes

These shortcodes can only be used in slideshow templates and display the main components of a slideshow.

18.5 Styling Guide For Slideshows

There are a number of CSS classes that help you in designing slideshows. Some of them are created based on the settings of the slideshow while others indicate the current state of the slideshow.

CSS Classes Added To The Slideshow Wrapper
slider Added to every slideshow.
slideshow Added to every slideshow.
type-single / type-scroller "type-single" for single sliders, "type-scroller" for carousel (scroller) sliders.
mainslider / navigationslider "mainslider" for main sliders, "navigationslider" for navigation sliders (when the navigation is displayed in a nested slideshow).
circular / noncircular "circular" for circular sliders, "noncircular" for non-circular sliders. See the Circular option.
orientation-horizontal / orientation-vertical "orientation-horizontal" for horizontal sliders, "orientation-vertical" for vertical sliders. See the Orientation option.
scrollable / unscrollable Indicates whether the slider is scrollable or not. Only supported for carousel sliders.
slide-num-n The number of slides in the slideshow. For instance, slide-num-10 when there are 10 slides in the slideshow.
CSS Classes Added To The Slides Wrapper Elements
slider_slides_outer_wrapper Added to slides outer wrapper. For further details, please see outer and inner views.
slider_slides_inner_wrapper Added to slides inner wrapper. For further details, please see outer and inner views.
slider_slides Added to the innermost element enclosing the slides. Single sliders resize this element during slide transitions. In carousel sliders, this element is moved to scroll the slides.
Additionally, most of the CSS classes in the first table above are also added to the wrapper element of the slides (to the outer and inner wrappers) but with a "slider-" prefix. Such as slider-type-scroller, slider-orientation-horizontal, slider-mainslider, slider-circular, etc.
This is extremely useful when the slideshow has a nested navigation slideshow and you want to apply custom styles to the main slides but not to the slides in the navigation slider.
For instance, if you want to add some border around the visible area of the slides and you also want to add some border to the slides in a carousel, you should write something like this:
.slider_slides_outer_wrapper.slider-mainslider {border: 5px solid red;}
.slider_slides.slider-mainslider > slider_slide_wrapper {border: 2px solid blue;}
CSS Classes Added To The Slides
slider_slide_wrapper Added to each slide wrapper. There are two wrappers around the slides, the outer one is the "slider_slide_wrapper", the inner one is the "slider_slide".
slider_slide Added to the innermost HTML element enclosing the slide. There are two wrappers around the slides, the outer one is the "slider_slide_wrapper", the inner one is the "slider_slide".
CSS Classes Added To The "slider_slide_wrapper"
active / inactive "active" when the slide is active, "inactive" when the slide is inactive. The "active" and "inactive" classes are changing at the start of transition animations.
slide visibility
  • state-visible: The whole slide is visible.
  • state-showing: In single sliders, Added to the incoming slide during slide transitions. In carousel sliders, added to a slide if it is only partially visible and last time it moved into the view.
  • state-hiding: In single sliders, Added to the outgoing slide during slide transitions. In carousel sliders, added to a slide if it is only partially visible and last time it moved out of the view.
  • state-hidden: The slide is not visible.
Additionally, the following classes are also added to the slide to help you in designing:
  • visible: The slide is visible. In other words, when "state-visible", "state-showing" or "state-hiding" is added to the slide.
  • hidden: The slide is hidden. Same as "state-hidden".
Please note that the CSS classes in the previous table are also added to custom slides (slider_custom_slides shortcode). So for instance, if the "active" class is added to a custom slide, then it means that the custom slide belongs to the active slide of the slideshow. Or for instance, if the "state-showing" class is added to a custom slide in a carousel slider, then the slide the custom slide belongs to is partially visible.
CSS Classes Added To Navigations
slider_navigation_wrapper Added to the wrapper element of the navigation.
slider_navigation Added to the inner wrapper element of the navigation.
navigation_item_wrapper Added to the wrapper element of each navigation item.
navigation_item Added to the innermost element enclosing a navigation item.
active / inactive "active" when the item is active, "inactive" when the item is inactive. The "active" and "inactive" classes are changing at the start of transition animations.

18.5.1 Styling Of Slideshow and Post Templates

As described in the Slideshow Templates - Slideshow Specific Shortcodes section, there are two kinds of templates that can be used for slideshows: slideshow template and post template.
Slideshow templates determine what slideshow components and how you want to display, while post templates determine the look and feel of slides and custom navigation items. These templates give you total creative freedom, but there is an important question. How to create responsive slideshow and post templates? In other words, how to create slideshows that look and work as expected on most devices.
Since slideshows are often displayed in popup windows, the problem is more complex. Slideshows should look good even if there is not enough space horizontally and even if there is not enough space vertically.
A part of the problems can be solved with CSS, but there are cases when the CSS language does not provide enough flexibility. This is particularly true for vertical cases.
This is the reason why we have created the CSSEx JavaScript toolkit that extends the CSS language. For further details, please see CSS Extension JavaScript Toolkit.

18.6 Slides

In the Dottoro theme, the whole concept of slideshows has been entirely changed in version 1.42.
Before version 1.42, if you wanted to add a slideshow to your site, you had to create a slideshow and a couple of slides and you had to add the slides to the slideshow. This system allowed you to create complex slideshows with layer animations, but if you only wanted to create a simple image or post slideshow, it was very difficult to use.
In version 1.42, the whole concept has been changed. In the new system, every time you want to add a slideshow to your site, you should specify the slideshow and the gallery you want to display in the slideshow. You can create multiple galleries to every page and post and each gallery can contain images, videos, posts, pages, any HTML content and even slides. The new system allows you to create both "simple" image/post slideshows and complex slideshows with layer animations (more on Galleries and Slideshows).
In the new system, using slides is rarely needed, but for instance, if you want to add a home slider to your site that displays a unique content (not page/post contents), slides can be helpful. Just create your slides and add them to a gallery (Creating And Managing Galleries). Then if you have not already done, create a slideshow (Creating Slideshows). Finally, use the [slideshow] shortcode or the Slideshow Widget to add a slideshow to your site that displays the gallery containing the slides.

Slides can be created an managed under SlideShows » Slides. The contents of slides can be edited the same way as the contents of posts and pages, and you can also use shortcodes in them.

Slide Options
Description Specifies a description for the slide. The description can be displayed with the [post_content] shortcode.
Tooltip Sets a tooltip for the slide.
If a slideshow has non-custom navigation buttons (disc, rect, numbered or image), the tooltip will appear when the mouse hovers over the navigation button. Additionally, the [post_tooltip_text] shortcode allows you to display the tooltip in custom navigations.
Delay Here you can set the amount of time in milliseconds that the slide should remain visible before it hides. This option has effect only in single sliders and not in scroller (carousel) sliders.
If this option is specified, it overwrites the Autoplay Delay setting of the slideshow for the slide.
Animation Duration The duration of the slide transition animation, in milliseconds. This option has effect only in single sliders and not in scroller (carousel) sliders.
If this option is specified, it overwrites the Animation Duration setting of the slideshow for the slide.
Animation Type Here you can select the slide transition animation and its easing. This option has effect only in single sliders and not in scroller (carousel) sliders.
The "By Slideshow" value means the Animation Type and Animation Easing options of the slideshow determines the animation type and easing.
CSS Class Space separated list of CSS classes to add to the HTML wrapper element of the slide. You can use this option to apply individual styles to the slide.
This option allows you to assign an URL to the slide. Clicking on the slide in a slideshow opens the specified URL.
Additionally, you can use the post_visit_site and [visit_site_button] shortcodes to display a link/button pointing to this URL in a custom slideshow navigation.
Background Image Sets a background image to the slide.
Thumbnail Sets a thumbnail for the slide.
This thumbnail will be used for image navigations in slideshows. Additionally, if you want to display the thumbnail in a custom navigation, use the [post_thumbnail] shortcode in the post template used for the navigation.
Adding layers to slides
A layer is timed content that can appear and disappear with an animation. In the Dottoro Theme, you can add any number of layers to slides. Creating layers is simple, just embed your HTML content into a layer shortcode.

For example:

[layer]Some text[/layer]
[layer style="top:20px;left:100px"]<a href="#">Link</a>[/layer]
[layer start="top:20,left:10" on="top:0,left:10" starttime="600"]<img src="myImage.jpg" />[/layer]
[layer start="right:30,bottom:50;" on="right:0,bottom:10" end="right:-30,bottom:-50"]text[/layer]

Layers can be used not only in slides but in the content of posts and pages as well. The layer shortcode supports several attributes, some of them are standard HTML attributes while others are for layer animation effects. For the available attributes, please see the [layer] shortcode.