1. Home
  2. Docs
  3. Gossh Framework
  4. Sliders
  5. Fullscreen slider

Fullscreen slider

In order to add slides to this slider go to the Gossh » Fullscreen Slider section. For each slide there are different options that you can apply.

Slide types

There are four slide layouts available: Text only, Text + Content Image, Image Slider and Video Background. You can select the type in the Slide Type field

Text Only Slide Type

This slide is designed to display a short text + description with a background image/solid background color.

You can select the position of the text in the Layout field

You can also change the default slide typography, colours and background image alignment in the Slide Settings field by selecting the “Custom Settings” option

Optimal background image size: There is no specific default/optimal size for the background image – by default the background image is always centered in the visible slider area and how it is displayed depends on the user’s browser window size and the default image ratio. It is recommended to use images that are around 1000 pixels and not bigger than 1500 pixels in size, so that the page loads faster.

Text + Content Image Slide Type

This slide is designed to display a longer text + description with an image and it optionally can have a background image/solid background color set.

You can select the position of the text in the Layout field

You can also change the default slide typography, colors and background image alignment in the Slide Settings field by selecting the “Custom Settings” option

Default content image size: You can change the default image crop size in the Story Options » Slider Settings » Fullscreen slider » Image size options section. By default the images will be cropped to the predefined sizes, however you can disable the image cropping or modify the default crop sizes. If you would like to preserve the original image ratio when cropping just leave the height field empty.

Image Slider

– Displays a horizontal image slider with multiple images.

– You can add the images by clicking on the “Add images” button

– You can set an caption to each image in its “Caption” field

– You can reorder the images by dragging and dropping them

– Optimal image size: There is no specific default/optimal size for the background image – by default the background image is always centered in the visible slider area and how it is displayed depends on the user’s browser window size and the default image ratio. It is recommended to use images that are around 1000 pixels and not bigger than 1500 pixels in size, so that the page loads faster.

Video Background

Displays an HTML5 video as a background to the slide.

– In order to make sure that the video will be supported by all the major browsers, you have to add the video in several different formats to the corresponding fields: MP4, WebM and Ogg. You can check the browser support for the different video formats in the “Video Formats and Browser Support” section here. It is recommended to add at least WebM and MP4 videos as all of the popular browsers support at least one of these formats.

IMPORTANT: If any of the browsers fail to load a format that they support by default, then your server needs to be configured to set the correct MIME types – you can do this by editing the WordPress .htaccess file (located in the root directory of your WordPress installation) and add the following lines to the end of the file:

AddType video/mp4 .mp4  
AddType video/mp4 .m4v  
AddType video/ogg .ogv  
AddType video/webm .webm  
AddType video/webm .webmv  

– Mobile Devices: – since mobile devices don’t support autoplaying background videos you can instead choose an image to display on mobile devices in the “Mobile Devices Background Image” field. Please note that the purpose of the background video is just to enhance the appearance of the slder, however if you need to show an important informational video, you would have to choose another way to display this video. For example, you can link the slider button to a page that contains the video or you can embed the video into the Description section of the slide. For example, you can embed a YouTube/Vimeo video just by adding the URL of the video to the “Description” field of the slide and it will be automatically displayed.

– Max upload size limits – if your server has a limit to the upload file size and your video files exceed this limit, you can do one of the following:

  • Manually upload the file to the server via FTP and insert the file URL to the video field
  • Use another server to host your videos and insert the video URL to the video field
  • Contact your hosting support to increase the maximum upload size of your files

Changing the slide order

Once you add the images, you can change their order by dragging and dropping the image container to the desired place. After you change their order, in order the new order to be saved, you have to click on the “Save Order” button that would appear right above the images:

Adding the slider to a page

In order to add the slider to a page:

  1. Create a new page from the Page » Add New section or open an existing page in edit more.
  2. Set the “Fullscreen slider page” template to the page (In the Page Attributes » Template section)
  3. Select the fullscreen slider that you would like to show (the “default” slider will be set by default) in the “Select fullscreen slider” field of the page.
  4. Enable autoplay: You can optionally enable autoplay in the “Slider Autoplay” field below (In the “Story Page Settings” section of the page).
    Since version 1.3.0 you can also enable autoplay to the inner horizontal slider in the “Slide Autoplay” » “Horizontal Slider Autoplay” field. Please note that the main “Enable Autoplay” option must be active in order the autoplay functionality to be applied to the horizontal slider.

Creating additional sliders

You can create additional fullscreen sliders in the Gossh » Fullscreen Slider section by clicking on the “Add New Fullscreen Slider” button:

After you create a new slider you can select its name in the “Select fullscreen slider” field of the page.

Slider options

You can also apply different options such as image cropping, animation settings, etc. in the Gossh Options -> Slider Settings -> “Fullscreen Slider” section.

Linking to sections of the slider from the main menu

In order to add a link from the menu to a section of the slider, go to Appearance » Menus section and click on the “Links” section. If for example, you would like to add a link to the third slide set the following options:

URL: http://site.com/page-slug/#3
Link: The name of the link
(replace http://site.com/page-slug with the URL of the fullscreen slider page)

and click on the “Add to menu” button.

Was this article helpful to you? Yes No

How can we help?