Usp Carousel
Effortless. Sustainable. High-ROI.
Transform your ecommerce strategy today
As a retailer, you’re faced with a number of competing strategies for tackling your biggest commercial and operational challenges.
HubBox offers a single software solution that can be integrated with any existing ecommerce system, in as little as a few hours.
Up to 75% greener
Meet your corporate social goals and responsibilities.
Drive repeat custom
Give customers a delivery solution that works for them.
Differentiate
Offer customers more delivery options than competitors.
Drive success
Reduce the number of failed deliveries to customers’ homes.
Lower WISMO enquiries
Reduce customer frustration and complaints by offering pickup.
Field
Field Type
Field Name
Instructions
Block Data
tab
Background Image
image
background_img
Overline
text
overline
Heading Type
select
heading_type
Heading Text
text
heading_text
Right Content
wysiwyg
right_content
USP Slider
repeater
usp_slider
-- Icon
image
icon
-- Active Icon
image
active_icon
-- Title
text
title
-- Text
textarea
text
Block Meta
tab
ID
text
block_id
Block Classes
text
block_classes
Margin Top
select
margin_top
Margin Bottom
select
margin_bottom
Padding Top
select
padding_top
Padding Bottom
select
padding_bottom
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-usp-carousel {
position: relative;
.container-fluid {
max-width: 100%;
}
.row {
@include bp($lg, true) {
justify-content: center;
}
}
@include bp($lg, true) {
background-size: cover;
text-align: center;
}
&__wrapper {
h3,
h6,
h5,
.heading,
li,
p {
color: $white;
}
h3 {
max-width: 90%;
@include bp($lg, true) {
max-width: 100%;
}
}
.heading {
max-width: 90%;
@include fluid-type(32, 70, 375, $max-container-size);
font-weight: 700;
line-height: 100%;
@include bp($lg, true) {
max-width: 100%;
}
}
.right-content__wrapper {
max-width: 66%;
margin-left: auto;
@include bp($lg, true) {
margin-right: auto;
max-width: 100%;
}
}
}
&__slider-box {
@include padding(rem-calc(1.875rem));
text-align: center;
transition: all 0.5s ease-in;
border: 2px solid $white;
background-color: transparent;
cursor: pointer;
filter: drop-shadow(0px 14px 24px rgba(0, 0, 0, 0.15));
&:hover {
background-color: $primary;
border: 2px solid $primary;
}
.active-icon {
display: none;
}
.icon {
display: block;
margin-left: auto;
margin-right: auto;
}
img {
@include margin-bottom(rem-calc(0.5rem));
max-width: 57px;
}
h4 {
color: $white;
@include margin-bottom(rem-calc(0.678rem));
}
h5 {
transition: all 0.5s ease-in;
display: none;
color: $white;
max-width: 100%;
margin: auto;
}
}
.slick-center {
background-color: $primary;
border: 2px solid $primary;
border-radius: 20px;
.active-icon {
display: block;
margin-left: auto;
margin-right: auto;
}
.icon {
display: none;
}
h5 {
display: block;
}
img {
max-width: 100px;
}
}
.slick-center {
.block-usp-carousel__slider-box {
background-color: $primary;
border: 2px solid $primary;
filter: none;
h5 {
display: block;
}
img {
max-width: 6.25rem;
@include bp($lg, true) {
max-width: 3.563rem;
}
}
}
}
&__slider-box-center {
background-color: $primary;
border: 2px solid $primary;
h5 {
display: block;
}
img {
max-width: 6.25rem;
@include bp($lg, true) {
max-width: 3.563rem;
}
}
}
}
.block-usp-carousel {
@include padding-top(rem-calc(9.375rem));
min-height: 891px;
overflow: hidden;
@media screen and (max-width: $xl) {
min-height: 991px;
}
@media screen and (max-width: $lg) {
min-height: 100%;
@include padding-bottom(rem-calc(9.375rem));
}
&__wrapper {
h3,
h6,
h5 {
color: $white;
}
h3 {
max-width: 90%;
@media screen and (max-width: $lg) {
max-width: 100%;
}
}
}
&__slider {
@include margin-top(rem-calc(3.75rem));
.slick-track {
display: flex;
align-items: center;
}
.slick-slide {
@include margin(rem-calc(0rem 0.719rem));
}
}
&__slider-box-center {
background-color: $primary;
border: 2px solid $primary;
h5 {
display: block;
}
img {
max-width: 6.25rem;
@media screen and (max-width: $md) {
max-width: 4.375rem;
}
}
}
&__bg-image {
position: absolute;
top: 0;
left: 0;
z-index: -1;
border-radius: 20px;
width: 100%;
min-height: 891px;
height: 100%;
@media screen and (max-width: $xl) {
min-height: 991px;
}
@media screen and (max-width: $lg) {
min-height: 891px;
}
picture {
height: 100%;
}
img {
height: 100%;
border-radius: 20px;
min-height: 891px;
object-fit: cover;
width: 100%;
@media screen and (max-width: $xl) {
object-fit: cover;
min-height: 991px;
}
@media screen and (max-width: $lg) {
min-height: 891px;
}
}
&::before {
content: "";
position: absolute;
background: linear-gradient(90deg, #263238 0%, rgba(38, 50, 56, 0) 100%);
left: 0;
top: 0;
height: 100%;
width: 50%;
border-radius: 20px;
}
&::after {
content: "";
position: absolute;
background: linear-gradient(90deg, #263238 0%, rgba(38, 50, 56, 0) 100%);
transform: matrix(-1, 0, 0, 1, 0, 0);
right: 0;
top: 0;
height: 100%;
width: 50%;
border-radius: 20px;
}
}
}
import '../../node_modules/slick-carousel/slick/slick';
$('.block-usp-carousel__slider').slick({
speed: 1000,
arrows: false,
loop: true,
focusOnSelect: true,
centerMode: true,
slidesToShow: 3,
responsive: [
{
breakpoint: 2200,
settings: {
arrows: false,
centerMode: true,
slidesToShow: 3
}
},
{
breakpoint: 1199,
settings: {
arrows: false,
centerMode: true,
slidesToShow: 3
}
},
{
breakpoint: 992,
settings: {
centerPadding: '20px',
arrows: false,
centerMode: true,
slidesToShow: 1
}
},
{
breakpoint: 768,
settings: {
centerPadding: '20px',
arrows: false,
centerMode: true,
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
centerPadding: '20px',
arrows: false,
centerMode: true,
slidesToShow: 1
}
}
]
});
Page Title
Page Type
Page URL
There are is no readme file with this component.