PopUp

Slick Slider

Slider init:


        data-slick='{
        
"arrows": true,
        
"mobileFirst": true,
        
"slidesToShow": 1,
        
"slidesToScroll": 1,
        
"autoplay": true,
        
"autoplaySpeed": 1500
        
}'

Swiper Slider

Swiper init:


        data-swiper='{

        
"slidesPerView": 1.85,
        
"nav": "true",
        
"spaceBetween": 20,
        
"breakpoints": {
        
"767": {
        
"slidesPerView": 3.5
        
},
        
"998": {
        
"slidesPerView": 3.75
        
},
        
"1140": {
        
"slidesPerView": 5
        
}
        
}
        
}'

You make init slider use only [data-swiper]


        defaultOptions = {

        
slidesPerView: 1.25,
        
"nav": "true",
       
 spaceBetween: 21,
        
breakpoints: {
        
767: {
        
slidesPerView: 2.25,
       
 spaceBetween: 25
        
},
       
 998: {
       
 slidesPerView: 2.75
       
 },
        
1140: {
       
 slidesPerView: 3.2,
        
spaceBetween: 30
        
}
        
}

If "nav":"true", set this element inside slider container


        button type="button" role="switch" data-arrow-prev optional: class="swiper-button-prev"
        

        button type="button" role="switch" data-arrow-next optional:  class="swiper-button-next"

Buttons

Link

Default link
Hovered link
Default link arrow
Hovered link arrow

Group Tabs

Tab Default

TAB 1
TAB 2
TAB 3
TAB 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam asperiores consectetur, cum debitis dolore fugiat fugit ipsam itaque maiores maxime molestiae officia officiis provident ratione sunt tempora unde voluptatem!

Tab small

TAB 1
TAB 2
TAB 3
TAB 4

DROP DOWN

Accordion

Single open accordions Iteration

1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, explicabo, incidunt ipsum maiores molestias, officia officiis quae quis quod sed vitae voluptatem? Adipisci dolore esse excepturi explicabo laboriosam magni quo.

2

3 Sigle open accordions Test component

Multiple open accordions

1

2

3

4

5

6

Alert messages

See all alertBox components: templates/components/common/alert

general

info

error

Field Name regular Required

Field Name Error Required Error Message.

Field Name success

Field Name date

Field Dropdown

Basic Checkbox - Default

Basic Checkbox - Active

Basic Checkbox - Error

Subtitle for Radio Button - Default

Subtitle for Radio Button - Active

Subtitle for Radio Button - Error

Quantity:

Body Hardware

Electrical

Filtration

Heavy Transport and Equipment

Light Trailer

Lubrication and Fluids

Safety

Workshop and Automotive

PopUp

Slick Slider

Swiper Slider

Buttons

Link

Group Tabs

Tab Default

Tab large

Tab small

DROP DOWN

Accordion

Single open accordions Iteration

1

2

3

Sigle open accordions Test component

Multiple open accordions

1

2

3

4

5

6

Alert messages

See all alertBox components: templates/components/common/alert

general

info

error

error

Icons

SUBSCRIBE TO OUR NEWSLETTER

TOP CATEGORIES

Quick links

Help

Contact Us