Logo Carousel
Effortless integration with any ecommerce platform
HubBox’s versatile software offers quick and seamless integration with your existing technology, meaning that you don’t have to change any systems, carriers or fulfilment processes.
Field
Field Type
Field Name
Instructions
Block Data
tab
Heading Type
select
heading_type
Heading Text
text
heading_text
Content
wysiwyg
content
Button Type
select
button_type
Button Color
select
button_color
Button Link
link
button_link
Logos
repeater
logos
-- Logo
image
logo
-- Link
url
link
Block Meta
tab
ID
text
block_id
Block Classes
text
block_classes
Background Colors
select
background_colors
Width
button_group
background_colors_width
Padding Top
select
padding_top
Padding Bottom
select
padding_bottom
Margin Top
select
margin_top
Margin Bottom
select
margin_bottom
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-logo-carousel {
text-align: center;
overflow: hidden;
h2 {
color: $secondary;
@include margin-bottom(rem-calc(2.188rem));
span {
display: block;
color: $primary;
}
}
.heading {
color: $secondary;
@include margin-bottom(rem-calc(2.188rem));
@include fluid-type(28, 50, 375, $max-container-size);
font-weight: 700;
line-height: 100%;
span {
display: block;
color: $primary;
}
}
p {
font-weight: 400;
margin-left: auto;
margin-right: auto;
@include margin-bottom(rem-calc(2.563rem));
@include bp($xl, true) {
max-width: 100%;
}
}
&__text-wrapper {
max-width: 70%;
margin-left: auto;
margin-right: auto;
@include bp($xl, true) {
max-width: 100%;
}
}
h5 {
font-weight: 700;
@include margin-bottom(rem-calc(1.875rem));
}
.btn {
@include margin-bottom(rem-calc(7.375rem));
}
&__wrapper {
.slick-track {
display: flex;
align-items: center;
}
}
&__wrapper-slide {
text-align: center;
img {
max-width: 13.625rem;
max-height: 150px;
@include bp($md, true) {
margin: auto;
max-height: 150px;
}
}
}
}
import '../../node_modules/slick-carousel/slick/slick';
$(document).ready(function () {
if ($('.block-logo-carousel__wrapper').length > 0) {
$('.block-logo-carousel__wrapper').slick({
centerMode: true,
slidesToShow: 6,
slidesToScroll: 1,
prevArrow: false,
centerPadding: '30px',
pauseOnHover: false,
cssEase: 'linear',
speed: 8000,
autoplaySpeed: 0,
nextArrow: false,
centerMode: true,
autoplay: true,
autoplaySpeed: 1000,
responsive: [
{
breakpoint: 2200,
settings: {
arrows: false,
centerMode: true,
centerPadding: '30px',
slidesToShow: 5
}
},
{
breakpoint: 1499,
settings: {
arrows: false,
centerMode: true,
centerPadding: '30px',
slidesToShow: 3
}
},
{
breakpoint: 992,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 2
}
},
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 2
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
slidesToShow: 1
}
}
]
});
}
});
Page Title
Page Type
Page URL
There are is no readme file with this component.