Hubspot Slick Slider Crousel
<!-- <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; text-transform: none; } .item-wrapper .slick-slide { margin: 0 12px ; } .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; background: #C4C4C4 ; border-radius: 20px; width: 15px; height: 15px; } .item-wrapper .slick-dots li.slick-active button { border: 1px solid #C20047; background-color: #C20047; } .item-wrapper .slick-dots li button:before { display: none; } .item-wrapper .slick-dots { bottom: -50px; bottom: -70px; } .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: 11px 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, autoplay: true, autoplaySpeed: 2000, 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 ] }); });
Reviewed by Waqas Liaqat
on
December 10, 2020
Rating:
No comments: