HUB - Carousel

Hub provides a powerful carousel element. You can basically put anything inside the carousel.

Let's go through the options.

General

  1. Columns: We provide a responsive cell option. So you'll be able to control cells sizes on any major screen sizes. Just define how many cells you want to be visible in the viewport, As well as spacing between each cell. Please also remember that top values inherits from bottom values. So for example, like in the screenshot below, if you don't provide any value for desktop, it'll inherit from landscape tablet value, which is 3.

  2. Inactive slides opacity: Control the opacity of inactive items.
  3. Shadow: You can define items shadow. Shadow for all items or only active ones.
  4. Parallax: This option only works when you have 1 image inside each slide. and gives you a nice parallax effect when changing slides.
  5. Animate Carousel Items: To add animations to each cell when the carousel is inside the viewport

Carousel Options

Most of the options here are obvious from the heading. But let's go through some of them. And we'll get back to navigations and dots after this section.

  1. Stretch Carousel: Stretching items to the side of the viewport

  2. Fade Sides Carousel: It'll add a faded out effect to the sides of the carousel

  3. Random Vertical Position: Randomly position cells

  4. Controlling Carousels: You can control other carousels with this option. E.g. you are building 2 separate carousels that one of the shows images and the other one showing testimonials. Just add an ID to the carousel you want to control. and provide that ID in this field. That's all

Navigation Arrows

Again, here most of the options are obvious from their headings. But let's explain some of them.

  1. Style: Hub provides 6 predefined arrow styles. But you can also add a custom arrow. Choose Custom from the dropdown. And you can put an svg arrow or use font icons. One thing to remember here is to add a \ (slash) right before any double quote marks 

  2. Numbers to Arrows: Add numbers indicator or active - total slides to the navigation

  3. Navigation Arrows Offset: If you want to change the position of the navigation buttons, like moving it a bit to the top, bottom or left and right, you can use this option. E.g.

  4. Previous/Next Button Offset: With these 2 options you can move each navigation button separately. Only to the left or to the right 

Pagination Dots

Let's explain some of pagination dots options.

  1. Pagination Type: It can be regular dots or numbers.

    1. Regular dots: 

    2. Numbers Circle: 

    3. Numbers Line: