Slick Slider Hubspot
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
Above files must be inclde in template, if not already included ,to work the slick slider correctly.
-->
<div class="crousel-wrapper {{ name }}">
<h2 style="font-family: {{ module.heading_font.font }}; {{ module.heading_font.style }};
color: {{ module.heading_font.color }};
font-size: {{ module.heading_font.size }}{{module.heading_font.size_unit }};"> What Dicker Data offers </h2>
<div class="item-wrapper">
{% for item in module.slider_group %}
<div class="item">
<h3> {{ item.heading_slide }}</h3>
<div class="thumb">
{% if item.thumb.src %}
{% set sizeAttrs = 'width="{{ item.thumb.width }}" height="{{ item.thumb.height }}"' %}
{% if item.thumb.size_type == 'auto' %}
{% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
{% elif item.thumb.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ item.thumb.max_width }}px; max-height: {{ item.thumb.max_height }}px"' %}
{% endif %}
{% set loadingAttr = item.thumb.loading != 'disabled' ? 'loading="{{ item.thumb.loading }}"' : '' %}
<img src="{{ item.thumb.src }}" alt="{{ item.thumb.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
{% set href = item.link_field.url.href %}
{% if item.link_field.url.type is equalto "EMAIL_ADDRESS" %}
{% set href = "mailto:" + href %}
{% endif %}
{% set rel = [] %}
{% if item.link_field.no_follow %}
{% do rel.append("nofollow") %}
{% endif %}
{% if item.link_field.open_in_new_tab %}
{% do rel.append("noopener") %}
{% endif %}
<a href="{{ href }}"
{% if item.link_field.open_in_new_tab %}target="_blank"{% endif %}
{% if rel %}rel="{{ rel|join(" ") }}"{% endif %}
>
{{ item.link_text }}</a>
</div>
</div>
{% endfor %}
</div>
</div>
<style>
.crousel-wrapper.{{ name }}{
background-color: {{ module.module_style.section_background_color.color }};
padding-top:{{ module.module_style.padding_top_desktop }}px;
padding-bottom:{{ module.module_style.padding_bottom_desktop }}px;
font-family: {{ module.module_style.font_field.font }}; {{ module.module_style.font_field.style }};
color: {{ module.module_style.font_field.color }};
font-size: {{ module.module_style.font_field.size }}{{module.module_style.font_field.size_unit }};
}
.item-wrapper .item h3{
font-family: {{ module.font_crousel.font }}; {{ module.font_crousel.style }};
color: {{ module.font_crousel.color }};
font-size: {{ module.font_crousel.size }}{{module.font_crousel.size_unit }};
}
.item-wrapper .item .thumb a{
font-family: {{ module.font_link.font }}; {{ module.font_link.style }};
color: {{ module.font_link.color }};
font-size: {{ module.font_link.size }}{{module.font_link.size_unit }};
}
@media screen and (max-width: 768px) {
.crousel-wrapper.{{ name }}{
padding-top:{{ module.module_style.padding_top_tablet }}px;
padding-bottom:{{ module.module_style.padding_bottom_tablet }}px;
}
}
@media screen and (max-width: 480px) {
.crousel-wrapper.{{ name }}{
padding-top:{{ module.module_style.padding_mobile_top }}px;
padding-bottom:{{ module.module_style.padding_mobile_bottom }}px;
}
}
</style>
CSS
.crousel-wrapper {}
.crousel-wrapper h2 {
color: #C20047;
margin: 0 auto;
text-align: center;
}
.crousel-wrapper h2::after {
content: '';
display: block;
height: 1px;
max-width: 150px;
background-color: #C20047;
margin: 20px auto 50px auto;
}
.item-wrapper {
color: red;
max-width: 820px;
margin: 0 auto;
}
.item-wrapper .item {
/* margin: 0 10px; */
}
.item-wrapper .item h3 {
text-align: center;
}
.item-wrapper .slick-slide {
margin: 0 12px !important;
}
.item-wrapper .slick-next:before,
.item-wrapper .slick-prev:before {
display: none;
}
.item-wrapper .slick-next,
.item-wrapper .slick-prev {
width: 26px;
height: 50px;
font-size: 0;
}
.item-wrapper .slick-next {
background: url(https://www.dickerdata.com.au/hubfs/right-arrow.png) no-repeat left top;
right: -55px;
}
.item-wrapper .slick-prev {
background: url(https://www.dickerdata.com.au/hubfs/left-arrow.png) no-repeat right top;
left: -55px;
}
.item-wrapper .slick-next:focus,
.item-wrapper .slick-next:hover {
background: url(https://www.dickerdata.com.au/hubfs/right-arrow.png) no-repeat left top;
}
.item-wrapper .slick-prev:focus,
.item-wrapper .slick-prev:hover {
background: url(https://www.dickerdata.com.au/hubfs/left-arrow.png) no-repeat right top;
}
.item-wrapper .slick-dots li button {
border: 1px solid #C4C4C4!important;
background: #C4C4C4 !important;
}
.item-wrapper .slick-dots li.slick-active button {
border: 1px solid #C20047!important;
background-color: #C20047!important;
}
.item-wrapper .item .thumb {
border: 1px solid #C20047;
border-radius: 5px;
overflow: hidden;
position: relative;
}
.item-wrapper .item .thumb img {
margin: 0 auto;
}
.item-wrapper .item .thumb a {
/* color: #fff; */
position: absolute;
right: 0;
float: right;
display: block;
padding: 7px 10px;
bottom: 0;
background-color: #C20047;
/* font-size: 14px;
font-family: 'Roboto';
font-weight: 400; */
text-align: center;
min-width: 75px;
}
@media (max-width: 1024px) {
.item-wrapper {
max-width: 600px;
}
}
@media (max-width: 768px) {
.item-wrapper {
max-width: 400px;
}
}
JS
// $('.item-wrapper').slick({
// dots: true,
// arrows:false,
// infinite: true,
// speed: 300,
// slidesToShow: 3,
// adaptiveHeight: true,
// slidesToScroll: 1,
// autoplay: true,
// autoplaySpeed: 4000,
// });
//
//
$(document).ready(function(){
$('.item-wrapper').slick({
slidesToShow: 3,
dots:true,
centerMode: false,
arrows:true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 580,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows:false
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
});
Comments
Post a Comment