БЛОГ НА HUSL


Пустое место после последнего слайда

Автор вопроса: Ярослав

При использовании ссылок с заданным background появляется пустое пространство после последнего слайда, хотя, если вместо картинок использовать просто текст, то всё нормально работает. Размер картинки - квадрат с размерами 300px, это менять нельзя по задумке проекта.

$(document).ready(function(){
    $('.slider').slick({
        arrows:true,
        dots:false,
        infinity: true,
        slidesToShow:2,
        slidesToScroll:2,
        autoplay:true,
        speed:500,
        autoplaySpeed:2000,
        responsive:[
            {
                breakpoint: 768,
                settings: {
                    slidesToShow:2
                }
            },
            {
                breakpoint: 550,
                settings: {
                    slidesToShow:1
                }
            }
        ]
    });
});

.slider__block {
    width: 100%;
    max-width: inherit;
    background: #2c2a72;
    min-height: 512px;
}
.slider__uptitle {
    width: 100%;
    padding: 60px 0 40px;
    font-size: 60px;
    font-weight: normal;
    text-align: center;
    font-family: ChaletE;
}
.slick-slider{
    min-width: 0;
}

.slick-list {
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
}
.slick-track{
    display: flex;
    align-items: flex-start;
    padding-bottom: 40px;
}
.slider {
    position: relative;
    padding: 0px 60px;
}

.slider .slick-arrow{
    position: absolute;
    top: 50%;
    margin: -30px 30px 0px;
    z-index: 10;
    font-size: 0;
    width: 45px;
    height: 83px;
    border: none;
    opacity: 0.65;
}

.slider .slick-arrow:hover {
    opacity: 0.4;
}

.slider .slick-arrow.slick-prev{
    left: 0;
    background: url('../img/control-left.svg') 0 0 / 100% no-repeat;
}
.slider .slick-arrow.slick-next{
    right: 0;
    background: url('../img/control-right.svg') 0 0 / 100% no-repeat;
}
.slider .slick-arrow.slick-disabled{
    opacity: 0.2;
}

.slider__item {
    display: block;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.partner-link {
    display: block;
    width: 300px;
    height: 300px;
    padding: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

a#partner-rostelecom {
    background-image: url("../img/logo/logo-rostelecom.png");
}

a#partner-snowmedia {
    background-image: url("../img/logo/logo-snowmedia.png");
}

a#partner-skobeev {
    background-image: url("../img/logo/logo-skobeev.png");
}

a#partner-ascon {
    background-image: url("../img/logo/logo-ascon.png");
}

a#partner-demis {
    background-image: url("../img/logo/logo-demis.png");
}

a#partner-lanta {
    background-image: url("../img/logo/logo-lanta.png");
}

a#partner-krtex {
    background-image: url("../img/logo/logo-krtex.png");
}

<section class="slider__block" id="slider">
    <h2 class="slider__uptitle">ПРЕДПРИЯТИЯ ПАРТНЕРЫ</h2>
    <div class="slider">
        <div class="slider__item">
            <a id="partner-rostelecom" href="https://tambov.rt.ru/" class="partner-link"></a>
        </div>
        <div class="slider__item">
            <a id="partner-snowmedia" href="http://snow-media.ru/" class="partner-link"></a>
        </div>
        <div class="slider__item">
            <a id="partner-skobeev" href="https://seo.skobeeff.ru/" class="partner-link"></a>
        </div>
        <div class="slider__item">
            <a id="partner-ascon" href="https://ascon.ru/" class="partner-link"></a>
        </div>
        <div class="slider__item">
            <a id="partner-demis" href="https://demis.ru/" class="partner-link"></a>
        </div>
        <div class="slider__item">
            <a id="partner-lanta" href="http://lanta-net.ru/" class="partner-link"></a>
        </div>
        <div class="slider__item">
            <a id="partner-krtex" href="http://кртех.рф/" class="partner-link"></a>
        </div>
    </div>
</section>

Источник

Ответы (2 шт):

Автор решения: Alexandr

Вот ваш код, никаких отступов нет

$(document).ready(function(){
    $('.slider').slick({
        arrows:true,
        dots:false,
        infinity: true,
        slidesToShow:2,
        slidesToScroll:2,
        autoplay:true,
        speed:500,
        autoplaySpeed:2000,
        responsive:[
            {
                breakpoint: 768,
                settings: {
                    slidesToShow:2
                }
            },
            {
                breakpoint: 550,
                settings: {
                    slidesToShow:1
                }
            }
        ]
    });
});
.slick-list {
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
}
.slider__block{
background: blue;
}
.slick-track{
    display: flex;
    align-items: flex-start;
    padding-bottom: 40px;
}
.slider {
    position: relative;
    padding: 0px 60px;
}

.slider .slick-arrow{
    position: absolute;
    top: 50%;
    margin: -30px 30px 0px;
    z-index: 10;
    font-size: 0;
    width: 45px;
    height: 83px;
    border: none;
    opacity: 0.65;
}

.slider .slick-arrow:hover {
    opacity: 0.4;
}

.slider .slick-arrow.slick-prev{
    left: 0;
    background: url('../img/control-left.svg') 0 0 / 100% no-repeat;
}
.slider .slick-arrow.slick-next{
    right: 0;
    background: url('../img/control-right.svg') 0 0 / 100% no-repeat;
}
.slider .slick-arrow.slick-disabled{
    opacity: 0.2;
}



.partner-link {
    display: block;
    width: 300px;
    height: 300px;
    padding: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

a#partner-rostelecom {
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7UDq6_M1hU-C3mNf7ouGM2uY96rzqOd5CJw&usqp=CAU");
}

a#partner-snowmedia {
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7UDq6_M1hU-C3mNf7ouGM2uY96rzqOd5CJw&usqp=CAU");
}

a#partner-skobeev {
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7UDq6_M1hU-C3mNf7ouGM2uY96rzqOd5CJw&usqp=CAU");
}

a#partner-ascon {
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7UDq6_M1hU-C3mNf7ouGM2uY96rzqOd5CJw&usqp=CAU");
}

a#partner-demis {
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7UDq6_M1hU-C3mNf7ouGM2uY96rzqOd5CJw&usqp=CAU");
}

a#partner-lanta {
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7UDq6_M1hU-C3mNf7ouGM2uY96rzqOd5CJw&usqp=CAU");
}

a#partner-krtex {
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7UDq6_M1hU-C3mNf7ouGM2uY96rzqOd5CJw&usqp=CAU");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<section class="slider__block" id="slider">
    <h2 class="slider__uptitle">ПРЕДПРИЯТИЯ ПАРТНЕРЫ</h2>
    <div class="slider">
        <div class="slider__item">
            <a id="partner-rostelecom" href="https://tambov.rt.ru/" class="partner-link"></a>
        </div>
        <div class="slider__item">
            <a id="partner-snowmedia" href="http://snow-media.ru/" class="partner-link"></a>
        </div>
        <div class="slider__item">
            <a id="partner-skobeev" href="https://seo.skobeeff.ru/" class="partner-link"></a>
        </div>
        <div class="slider__item">
            <a id="partner-ascon" href="https://ascon.ru/" class="partner-link"></a>
        </div>
        <div class="slider__item">
            <a id="partner-demis" href="https://demis.ru/" class="partner-link"></a>
        </div>
        <div class="slider__item">
            <a id="partner-lanta" href="http://lanta-net.ru/" class="partner-link"></a>
        </div>
        <div class="slider__item">
            <a id="partner-krtex" href="http://кртех.рф/" class="partner-link"></a>
        </div>
    </div>
</section>

→ Ссылка
Автор решения: Ярослав

@Alexandr, спасибо за помощь. В конечном итоге, я переделал вёрстку, оставив всего 3 slider-item. С JS убрал пока что responsive, но добавил fade: true, cssEase: 'linear'. Немного передал стили, что оно нормально центрировало изображения.

В конечном итоге вот, что вышло:

$(document).ready(function(){
    $('.slider').slick({
        arrows:true,
        dots:false,
        infinity: true,
        fade: true,
        cssEase: 'linear',
        autoplay:true,
        autoplaySpeed:2000,
    });
});

.slider__block {
    width: 100%;
    max-width: inherit;
    background: #2c2a72;
    min-height: 512px;
}

.slider__uptitle {
    width: 100%;
    padding: 60px 0 40px;
    font-size: 60px;
    font-weight: normal;
    text-align: center;
    font-family: ChaletE;
}

.slick-slider{
    min-width: 0;
}

.slick-list {
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
}

.slick-track{
    display: flex;
    align-items: flex-start;
    padding-bottom: 40px;
}

.slider {
    position: relative;
    padding: 0px 60px;
}

.slider .slick-arrow{
    position: absolute;
    top: 40%;
    margin: -30px 30px 0px;
    z-index: 10;
    font-size: 0;
    width: 30px;
    height: 50px;
    border: none;
    opacity: 0.65;
}

.slider .slick-arrow:hover {
    opacity: 0.4;
}

.slider .slick-arrow.slick-prev{
    left: 90px;
    background: url('../img/control-left.svg') 0 0 / 100% no-repeat;
    background-size: contain;
}
.slider .slick-arrow.slick-next{
    right: 90px;
    background: url('../img/control-right.svg') 0 0 / 100% no-repeat;
    background-size: contain;
}
.slider .slick-arrow.slick-disabled{
    opacity: 0.2;
}

.slider__item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 300px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.partner-link {
    display: block;
    width: 300px;
    height: 300px;
    padding: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

a#partner-rostelecom {
    background-image: url("../img/logo/logo-rostelecom.png");
}

a#partner-snowmedia {
    background-image: url("../img/logo/logo-snowmedia.png");
    width: 400px;
}

a#partner-skobeev {
    background-image: url("../img/logo/logo-skobeev.png");
}

a#partner-ascon {
    background-image: url("../img/logo/logo-ascon.png");
    background-position: center 80px;
    width: 400px;
}

a#partner-demis {
    background-image: url("../img/logo/logo-demis.png");
    width: 400px;
}

a#partner-lanta {
    background-image: url("../img/logo/logo-lanta.png");
}

a#partner-krtex {
    background-image: url("../img/logo/logo-krtex.png");
}

<section class="slider__block" id="slider">
    <h2 class="slider__uptitle">ПРЕДПРИЯТИЯ ПАРТНЕРЫ</h2>
    <div class="slider">
        <div class="slider__item">
            <a id="partner-rostelecom" href="https://tambov.rt.ru/" class="partner-link"></a>
            <a id="partner-snowmedia" href="http://snow-media.ru/" class="partner-link"></a>
            <a id="partner-skobeev" href="https://seo.skobeeff.ru/" class="partner-link"></a>
        </div>
        <div class="slider__item">
            <a id="partner-ascon" href="https://ascon.ru/" class="partner-link"></a>
            <a id="partner-demis" href="https://demis.ru/" class="partner-link"></a>
        </div>
        <div class="slider__item">
            <a id="partner-lanta" href="http://lanta-net.ru/" class="partner-link"></a>
            <a id="partner-krtex" href="http://кртех.рф/" class="partner-link"></a>
        </div>
    </div>
</section>
→ Ссылка

licensed under cc by-sa 3.0 with attribution.