1. Home
  2. Docs
  3. Gossh Framework
  4. Sliders
  5. Content Slider

Content Slider

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

Selecting the slide layout

You can select the silde layout in the “Slide Layout” field. You can choose between “Centered text”, “Image right – Text left”, “Image left – Text right”, “YouTube Video right – Text left” and “YouTube Video left – Text right”. Here are examples of how each of these options looks like:

Centered Text:

Image right – Text left:

Image left – Text right:

YouTube Video right – Text left

YouTube Video left – Text right

  • In the Slide Animation field you can select the animation direction for the slide elements and you can set custom background and text color in the Custom Slide Background Color and Custom Slide Text Colorfields
  • Setting a background image
    If you want, you can also set a background image to the slide in the Background Image URL field. You can also set the background image opacity in the Background Image Opacity field.
  • Setting the main image
    You can set a main slide image when one the “Text on the left” or “Text on the right” layouts is selected for the slide – this image is displayed on the side of the text. You can set this image in the Main image URLfield.

You can also set the slide without this image, it will look like this:

    • In the rest of the fields below you can set some content to the slide, such as titles, description and custom buttons with links.
  • Custom Slide Settings – to each slide you can apply some custom settings by selecting the “Custom Settings” option in the “Slide Settings” field – when you select this option, an additional settings section will be displayed below where you can set some advanced settings, such as:
    • Custom Typography – you can change the default typography options, such as font family, font size and font style
    • Background Image Alignment – please note that the alignment is not fixed and the visible image area still depends on the screen size and ratio
    • Background Style – select the way the background image is displayed:
      – Parallax Cover – covers the visible area of the slider with a parallax effect. When the parallax effect is applied, the background image will be resized to cover the entire window size as well, that sometimes (depending on the screen and image size) can make the image look a bit zoomed
      – Cover – covers the visible area of the slider with no parallax effect.
      – Contain – the image will be resized so that it fits within the slider area – it will be always fully visible with no hidden parts.
    • Custom Button Colors

When you set all the slide data, just click on the “Add Item” button to add the slide.

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:

Creating additional content sliders

If you would like to add a new slider with a different image set, you have to click on the “Add new Content slider” button located in the top section of the page and insert its name in the dialog box that will be displayed. After that a section for the additional slider images will be created so that you can set the new images to it.

Changing the slider options

You can change the default slider options such as setting automatic image resizing and changing slider speed in the Gossh Options » Sliders » Content Slider section.

Default/optimal image sizes:
– Main (side) image: 569px × 320px . The image height can be changed in the slider options section.
– Background image: 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.

Adding a slider to a page

Setting the slider as a header of the page

You can select the name and type of the slider that you would like to display in a page in the “Page Slider/Header” field of the page settings section (located below the main content editor)

Adding the slider to the content of the page

You can read more on how to add the slider to the content of the page in the Content slider in page/post content section

Slider options

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

Was this article helpful to you? Yes No

How can we help?