Loaded
Bruner Template

Portfolio

Help Center » Template Docs Bruner

Carousel Slider

This template provides a very elegant way to showcase your work using a WebGL carousel slider. Setting up is simple. Please use the following codes:

Code Example:

Carousel slider options

Options
Description
fx-one
fx-two
fx-three
fx-four
fx-five
fx-six
fx-seven

Set a class to define a fit thumb to screen effect
preview-mode-enabled

Set this class to enable the proview mode by clicking on one project
resize-mode-enabled

Set this class to enable resize thumbs on drag slider

Slide Structure

The slide structure consists of an image accompanied by a caption. The setup process is straightforward. Please use the following codes:

Code Example:

Carousel slide options

Options
Description
data-centerLine="VIEW"

Define a word that will be displayed on thumbnail hover before entering the preview to the following div:
data-centerLine="OPEN"

Define a word that will be displayed on preview mode image hover before entering the project page to the following div:
data-projectbgcolor="#e1dedf"

Set indvidual project background color for preview mode:
data-projectcolor="#9c505f"

Set indvidual project text color for preview mode:
Thumbnail

Set up the URL of your project's thumbnail image in the following img:
Fullscreen Image

Set up the URL of your project's hero image in the following img:

Infinity List Slider

This template provides a very elegant way to showcase your work using a WebGL vertical list slider. Setting up is simple. Please use the following codes:

Code Example:

Infinity List slider options

Options
Description
fx-one
fx-two
fx-three
fx-four
fx-five
fx-six
fx-seven

Set a class to define a fit thumb to screen effect

Slide Structure

The slide structure need to be empty. Please use the following codes:

Code Example:

The sync slide structure consists of an image accompanied by a caption. The setup process is straightforward. Please use the following codes:

Code Example:

Sync slide options

Options
Description
data-centerLine="OPEN"

Define a word that will be displayed on project title hover before entering the project page to the following div:
data-projectbgcolor="#e1dedf"

Set indvidual project background color for preview mode:
data-projectcolor="#9c505f"

Set indvidual project text color for preview mode:
Thumbnail

Set up the URL of your project's thumbnail image in the following img:
Fullscreen Image

Set up the URL of your project's hero image in the following img:

Project Page

This page is composed of three section:

Hero

This page section contains the project title, subtitle and image/video.

Code Example:

Hero Caption Options

Options
Description
parallax-scroll-caption

Set this class to have the caption title parallax on scroll
parallax-scroll-image

Set this class to have the hero image parallax on scroll

Main Page Content

On this page section contains you can build all the page content.

Code Example:

This section has the following option:

Options
Description
content-max-width

Set this class to have the content maximum width up to 1280px
content-full-width

Set this class to have the content width like the viewport

Next Project Navigation

The section should have the same atributes as the next project hero.

Code Example:

This section has the following options:

Options
Description
auto-trigger

Set this class for autotrigger link on reach bottom of each project page
data-color="#838b8a"

Set the color for Mouse Circle Cursor hovering the next page title url

Didn't find what
you were looking for?


If there’s anything unclear or you have some concerns
send us a message and we'll get back to you.

Send Us a Message