Create a Custom Slider
This guide assumes you know already how to add a Module to a Page. Not sure how? Click here to find out.
Slider Settings & What They Affect
Adaptive Height
Enables adaptive height for single slide horizontal carousels.
Autoplay
Allows the slider to play automatically once the page has loaded. Slide Speed can be configured in a different setting.
Arrows
This controls whether or not the Previous/Next arrows are visible. Checking this option will make them visible and vice versa.
Dots
This controls whether or not the Dot indicators are visible. Checking this option will make them visible and vice versa.
Fade Transition
Enabling this option will swap the default Slide transition with a Fade transition. Disabling will revert to the default slide option.
Infinite
Selecting the Infinite option will mean that if you customer scrolls right whilst on the last slide in the presentation, it will loop back to the beginning. This will also be the case when the slider is set to Autoplay.
Slide Speed (MS)
This controls the interval between slide changes and is measured in milliseconds. E.g. 1000 will mean the active slide changes every second.
Slider Height
Sets the height of the slider in pixels. This sets the height explicitly, so will not function as a minimum or maximum height.
Slides to Show
This controls the number of visible slides. If this is set to 2, then you would be able to see 2 slides at all times.
Note - The more slides you have visible, the smaller the slides will be when they appear.Slides to Scroll
This sets the number of slides to scroll on each press of a next or previous button or similar simulated action (e.g. swipe on mobile).
Slide List
What's in the grid?
In the grid, you will find the fields Slide Title and Slide Url, and two buttons, one for Edit (Pencil Icon) and one for Delete (Trash Icon).
Clicking the Edit button will provide you with a form to edit the details of the slide. These details are explained further below.
Clicking the Delete button will remove the slide from the slider module. Once removed, a slider cannot be restored.
Adding a new Slide
To add a new Slide, start by clicking New Slide, found at the bottom left of the Slide List. After clicking New Slide, you will see a new section has appeared, titled Add New Slide, with 6 fields and a save button beneath. The meaning of these fields and descriptions of their content and purpose can be found below.
Slide Title
This field controls the title that can be overlayed on the image chosen for the slide. In Figure 1 (below), this field is the section reading "2021 Concerts".
Slide Description
This field controls the text that accompanies the title when an overlay has been configured. In Figure 1 (below), this field is the line reading "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
Image Path
This is the relative path to the image on your website that you're looking to add to the carousel. You can use the built-in File Browser (Paperclip Icon) to find a file or type in the path if you know it off-hand.
Image Alt
If the image the slide is looking for can't be found (has since been moved or deleted), the Image Alt is what will be displayed. This field is also used for Copyright Attribution. This field is not a presentational one, so won't be visible unless the image link is no longer valid.
Slide Link
This allows you to add a link that the user should be navigated to if they click the slide.
For example, you might use the carousel to advertise an offer you're running on Tours of a specific type. If you are, then you can set the Slide Link to "/offers" (or the URL for your offers page), and this would navigate to that page, showing your Customers the Tours affected.
Link Target
This field controls whether or not the Slide Link is opened in a new tab, or the current one once clicked. There are two values in this dropdown: _SELF and _BLANK. The _SELF value will cause the link to open in the current tab, whilst _BLANK will force the browser to open the link in a new tab.
Visibility Settings
Here, you can control which viewports the slider will be visible on. You might be thinking, why? Sliders look great on desktop & big screens, but they don't always work on smaller screens. Things such as image ratios can be heavily distorted when swapping from a landscape to portrait view, making content management all the more manual. With that in mind, hiding a slider on mobile and tablet can often keep the presentational impact on the big screens, whilst at the same time conserving page length and content layout when people are browsing on the move.
Related Articles
Creating Tours
The following Article will take you though the process of creating a tour and also explaining all the available options that can be utilised to create your Day Excursions/Inclusive Tours Preparation Before creating tours it is strongly recommended ...Create a Page
Pages can be managed in the Admin section of your WebRes CMS under Manage Pages -> Page List Page Settings & What They Affect Name Your internal reference to the specific Page. This is what displays in the Page list so aim to keep it short and ...How to add attachments and create an email template
This article assists with personalising your emailed documentation and how to include any additional attachments, that may be required to support the document. Adding an attachment Located via the settings menu, browse to the following section. ...Create an Itinerary
This article is the first of three required for Managing Itineraries in WebRes. The others are: Manage Itinerary Items Link Tours to an Itinerary Itinerary Settings & What They Affect Title This is the title for the Itinerary. This is both the ...Categorise Your Tours – Using Itinerary Categories
What Are Itinerary Categories? Itinerary Categories are, in effect, as simple as they sound. They are simply a way of categorising Itineraries, allowing the developers in the WebRes department to implement custom behaviour based on the ...