Slider

Very useful to structure your content, the slider displays information that aligns horizontally. Scroll to see this information.

Initializing the component.

Below is the base of the component.

slider

<div class="h_slider">
   <div class="h_slider_wrapper">
       ...
   </div>
</div>

<div class="h_slider">
   <div class="h_slider_wrapper">
       ...
   </div>
</div>

Add h_slider_section. This is where you will put your different contents (cards, images, etc).

slider

<div class="h_slider">
<div class="h_slider_wrapper">
    <div class="h_slider_section"><div class="slider-block-documentation"></div></div>
    <div class="h_slider_section"><div class="slider-block-documentation"></div></div>
    <div class="h_slider_section"><div class="slider-block-documentation"></div></div>
    <div class="h_slider_section"><div class="slider-block-documentation"></div></div>
    <div class="h_slider_section"><div class="slider-block-documentation"></div></div>
</div>
</div>

<div class="h_slider">
<div class="h_slider_wrapper">
    <div class="h_slider_section"><div class="slider-block-documentation"></div></div>
    <div class="h_slider_section"><div class="slider-block-documentation"></div></div>
    <div class="h_slider_section"><div class="slider-block-documentation"></div></div>
    <div class="h_slider_section"><div class="slider-block-documentation"></div></div>
    <div class="h_slider_section"><div class="slider-block-documentation"></div></div>
</div>
</div>

The controls class is used to display navigation buttons.

slider

<div class="h_slider controls">
   <div class="h_slider_wrapper">
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
   </div>
</div>

<div class="h_slider controls">
   <div class="h_slider_wrapper">
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
   </div>
</div>

The extended class allows you to override the overflow property of sliders.

slider

<div class="h_slider extended">...</div>

<div class="h_slider extended">...</div>

slider

<div class="h_slider controls">
   <div class="h_slider_wrapper">
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
   </div>
</div>

<div class="h_slider controls">
   <div class="h_slider_wrapper">
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
      <div class="h_slider_section"><div class="slider-block-documentation"></div></div> 
   </div>
</div>

Class	Definition
h_slider	Create a slider.
controls	add controls.
no-drag	avoid drag.
h_slider_wrapper	Create a slider wrapper.
h_slider_section	Create a slider children.