Logos slider - slck - auto screen width
Mon Aug 01 2022 12:09:50 GMT+0000 (Coordinated Universal Time)
Saved by @webdevyaros #javascript #css #html
/** * * Section: Logos * */ jQuery(document).ready( $ => { // Init initLogosSlider('.section-logos__list', '.section-logos__listItem', '.section-logos__wrapper'); $(window).on('resize', debounce(function() { initLogosSlider('.section-logos__list', '.section-logos__listItem', '.section-logos__wrapper'); })); // Init functions function initLogosSlider(sliderClassName, slidesClassName, sliderWrapperClassName) { if (!$(sliderClassName).length) return; // For each slider $(sliderClassName).each( function() { let slider = $(this); let wrapper = $(slider).parents(sliderWrapperClassName); // Slider wrapper if ( slidesWidthSum(slider) <= $(slider).outerWidth() && $(slider).hasClass("slick-initialized")) { $(wrapper).removeClass('is-slider'); $(slider).slick("unslick"); } if ( slidesWidthSum(slider) > $(slider).outerWidth() ) { if (!$(slider).hasClass("slick-initialized")) { $(wrapper).addClass('is-slider'); let logosTotalCount = $(slider).find(slidesClassName).length; let defaultSlides1200 = 5; let defaultSlides992 = 4; let defaultSlides768 = 2; let defaultSlides561 = 1; if (logosTotalCount <= defaultSlides1200) { defaultSlides1200 -= 1; } if (logosTotalCount <= defaultSlides992) { defaultSlides992 -= 1; } if (logosTotalCount <= defaultSlides768) { defaultSlides768 -= 1; } $(slider).slick({ infinite: true, slidesToShow: 6, slidesToScroll: 6, dots: true, arrows: true, autoplay: false, prevArrow: $(wrapper).find('.section-logos__arrow.slick-prev')[0], nextArrow: $(wrapper).find('.section-logos__arrow.slick-next')[0], responsive: [ { breakpoint: 1200, settings: { slidesToShow: defaultSlides1200, slidesToScroll: defaultSlides1200, } }, { breakpoint: 992, settings: { slidesToShow: defaultSlides992, slidesToScroll: defaultSlides992, } }, { breakpoint: 768, settings: { slidesToShow: defaultSlides768, slidesToScroll: defaultSlides768, } }, { breakpoint: 561, settings: { slidesToShow: defaultSlides561, slidesToScroll: defaultSlides561, } }, ] }); } } }); // Helper function slidesWidthSum(slider) { let slidesWidth = 0; let totalGap = parseInt( $(slider).css('gap') ) * ( $(slider).find(`${slidesClassName}:not(.slick-cloned)` ).length - 1); $(slider).find(`${slidesClassName}:not(.slick-cloned)`).each(function() { slidesWidth += $(this).outerWidth(); }); return slidesWidth + totalGap; } } // Helper function debounce(func){ var timer; return function(event){ if(timer) clearTimeout(timer); timer = setTimeout(func, 150, event); }; } }) /** * * Section: Logos * */ .section-logos { padding: 70px 0; background-color: var(--bg-color); &, &[data-theme="white"] { --bg-color: #fff; } &[data-theme="grey"] { --bg-color: rgba(240, 243, 249, 0.5); } .container { @media (min-width: 1200px) { width: 1118px; } @media (min-width: 1440px) { width: 1278px; } @media (min-width: 1600px) { width: 1336px; } @media (min-width: 992px) and (max-width: 1199px) { width: 988px; } @media (max-width: 767px) { max-width: 500px; padding-left: 20px; padding-right: 20px; } } &__inner { max-width: 1078px; margin: 0 auto; @media (max-width: 1199px) { max-width: 896px; } @media (max-width: 560px) { max-width: calc(100% - 70px); } } &__header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; padding-bottom: 37px; border-bottom: 1px solid #D4D3D7; @media (max-width: 767px) { flex-direction: column; padding-bottom: 32px; text-align: center; } } &__title { margin-top: 0; margin-bottom: 0; font-family: var(--font-family-primary); font-weight: 700; font-size: 22px; line-height: 1.1; color: var(--color-dark2); } &__wrapper { padding-top: 40px; position: relative; @media (max-width: 767px) { padding-top: 32px; } &.is-slider { .section-logos__list { display: block; &Item { margin: 0 17px; min-width: unset; } } .section-logos__arrow { display: block; } } .slick-dots { --slick-dots-size: 12px; --slick-dots-background: #D4D3D7; --slick-dots-background-active: var(--color-dark2); --slick-dots-margin: 0 8px; } } &__arrow { --arrow-size: 32px; --arrow-offset: 35px; width: var(--arrow-size); height: var(--arrow-size); display: none; position: absolute; top: 0; transform: translateY(-50%); background-repeat: no-repeat; background-position: center; background-size: contain; @media (max-width: 1279px) { --arrow-offset: 15px; } @media (max-width: 1199px) { --arrow-offset: 10px; } &.slick-prev { right: 100%; margin-right: var(--arrow-offset); background-image: url('../images/sections/logos/arrow-prev.svg'); } &.slick-next { left: 100%; margin-left: var(--arrow-offset); background-image: url('../images/sections/logos/arrow-next.svg'); } } &__list { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 35px; &Item { --logo-wrapper-width: 150px; --logo-wrapper-height: 50px; min-width: var(--logo-wrapper-width); min-height: var(--logo-wrapper-height); display: flex; align-items: center; justify-content: center; img { max-width: 100%; max-height: 100%; margin: 0 auto; } } } } <section class="section-logos" data-theme="grey"> <div class="container"> <div class="section-logos__inner"> <div class="section-logos__header"> <h2 class="section-logos__title">Trusted by 1,800+ customers</h2> <a href="#" class="moreButton"> Learn More <span class="moreButton-icon"> <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 6H10" stroke="var(--more-button-color)" stroke-width="4" stroke-linecap="round"/> <path d="M8 2L12 6L8 10" stroke="var(--more-button-color)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> </a> </div> <div class="section-logos__wrapper"> <button class="section-logos__arrow slick-prev"></button> <button class="section-logos__arrow slick-next"></button> <div class="section-logos__list"> <div class="section-logos__listItem"> <img src="./assets/images/sections/logos/payoneer.svg" alt=""> </div> <div class="section-logos__listItem"> <img src="./assets/images/sections/logos/masterclass.svg" alt=""> </div> <div class="section-logos__listItem"> <img src="./assets/images/sections/logos/monday.svg" alt=""> </div> <div class="section-logos__listItem"> <img src="./assets/images/sections/logos/lufthansa.svg" alt=""> </div> <div class="section-logos__listItem"> <img src="./assets/images/sections/logos/adobe.svg" alt=""> </div> <div class="section-logos__listItem"> <img src="./assets/images/sections/logos/capgemini.svg" alt=""> </div> <div class="section-logos__listItem"> <img src="./assets/images/sections/logos/capgemini.svg" alt=""> </div> </div> </div> </div> </div> </section>
Cora
Comments