Documentation

Home / Documentation / Carousel

Carousel

Gallery
Sliders
CSS styling

Options

Gallery frames

Default: 4
humge-frames="1-img.lenght"

Controls

Default: none
humge-control="true"

Gallery offset step

Default: 2
humge-step="1-frames.lenght"

Default Gallery

The attrebute humge-type="film_gallery" is required. If humge-type="film_gallery" is the only one parameter, in the gallery will show 4 pictures with step 2

Gallery with 2 frames

The frame parameter should be bigger than 1 but smaller than the total number of images.

Gallery with step=1

The attrebute humge-step should be bigger than 1 but smaller than the total number of images.

Gallery with controls

The attrebute humge-control should be set to "true" to have arrows

Mixed Gallery

Options

Slide Effect

Default: humge-effect="slide"
humge-effect="fade"

Controls

Default: none
humge-control="dots"
humge-control="arrow"

Load Bar

Default: none
humge-loadbar="true"
humge-loadbar="false"

Slider Speed

Default: 5s/5000ms/
humge-speed="1-∞"

Default Slider

The attrebute humge-type="slider" is required. If humge-type="slider" is the only one parameter, in the gallery will be with slide effect, with speed 5s, without loadbar and controls

Slider with fade effect

The attrebute humge-effect change the slide effect with fadeout.

Slider with arrow controls

When the attrebute humge-control is equal to arrow add arrows.

Slider with dots controls

When the attrebute humge-control is equal to dots add dots.

Slider with load bar

When the attrebute humge-loadbar should be set to "true" to add loading bar.

Slider with speed 2 seconds

The attribute humge-speed should be bigger than 1s and this attribute change the speed of movement of images.

.slider .dots a { background-color: your color } - This CSS selector change the color of slider's dots
.slider .dots a.active { background-color: your color } - This CSS selector change the color of slider's active dot
.slider .c_prev:after { content: url( your picture in base 64 ); } - This CSS selector change the slider's left arrow
.slider .c_next:after { content: url( your picture in base 64 ); } - This CSS selector change the slider's right arrow
.slider .loadbar { background-color: your color } - This CSS selector change the color of slider's load bar