0

Установил slick-carousel и возникла проблема. За пределами контента появляется отступ у body. Пробовал присвоить overflow: hidden - не помогло. Прошу помочь, не знаю как это пофиксить.

введите сюда описание изображения

Вот ссылка на github:

Исходник

HTML:

<div class="single-item">
        <div class="main-slider">
            <div class="container">
                <div class="slider-content">
                    <img class="logo-sld" src="img/logo-slider.png" alt="">
                    <h1>Building Strong Financial Systems<br> to Achieve aBetter Quality of Life</h1>
                    <button class="become">become a volunteer</button>
                    <form class="mail">
                        <p class="descr-form">subscribe for email updates</p>
                        <input type="email" placeholder="E MAIL">
                        <button class="submit" type="submit">submit</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="main-slider">
            <div class="container">
                <div class="slider-content">
                    <img class="logo-sld" src="img/logo-slider.png" alt="">
                    <h1>Building Strong Financial Systems<br> to Achieve aBetter Quality of Life</h1>
                    <button class="become">become a volunteer</button>
                    <form class="mail">
                        <p class="descr-form">subscribe for email updates</p>
                        <input type="email" placeholder="E MAIL">
                        <button class="submit" type="submit">submit</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="main-slider">
            <div class="container">
                <div class="slider-content">
                    <img class="logo-sld" src="img/logo-slider.png" alt="">
                    <h1>Building Strong Financial Systems<br> to Achieve aBetter Quality of Life</h1>
                    <button class="become">become a volunteer</button>
                    <form class="mail">
                        <p class="descr-form">subscribe for email updates</p>
                        <input type="email" placeholder="E MAIL">
                        <button class="submit" type="submit">submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

CSS:

.main-slider
padding-top: 108px
padding-bottom: 153px
background-color: #002d64
background-image: url("../img/bg-main-slider.png")
background-position: center top
background-size: cover
box-shadow: inset 0px 9px 50px rgba(0,0,0, .8)

.logo-sld
    margin-left: -3px

h1
    margin-top: 48px
    margin-left: -2px
    line-height: 1.2
    font-size: 40px
    color: #fff
    font-weight: bold
    text-shadow: 1px 5px 2px rgba(0,0,0, .6)

button.become,
button.submit
    background-color: #60f0b5
    color: #002d64
    text-transform: uppercase
    text-align: center
    font-size: 16px
    font-weight: 600
    border: none
    border-radius: 5px

button.become
    margin-top: 91px
    width: 265px
    height: 60px

button.submit
    height: 40px
    width: 125px
    font-size: 14px
    font-weight: 600

    &:hover,
    &:active
        background-color: #002d64
        color: #60f0b5

form.mail
    margin-top: 71px

    p.descr-form
        text-transform: uppercase
        color: #fff
        font-size: 14px
        font-weight: 500
        margin-bottom: 10px

    input
        margin-right: 6px
        width: 335px
        border: 1px solid #b4c0ce
        color: #999
        font-size: 16px
        padding: 10px 12px 11px 12px

JS:

//slick slider
$('.single-item').slick(); 
0

1 ответ 1

0

О каком отступе речь? :

$('.single-item').slick();
* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
}


.main-slider {
  padding-top: 108px;
  padding-bottom: 153px;
  background-color: #002d64;
  background-image: url("../img/bg-main-slider.png");
  background-position: center top;
  background-size: cover;
  -webkit-box-shadow: inset 0px 9px 50px rgba(0, 0, 0, 0.8);
          box-shadow: inset 0px 9px 50px rgba(0, 0, 0, 0.8);
}
.main-slider .logo-sld {
  margin-left: -3px;
}
.main-slider h1 {
  margin-top: 48px;
  margin-left: -2px;
  line-height: 1.2;
  font-size: 40px;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 5px 2px rgba(0, 0, 0, 0.6);
}
.main-slider button.become,
.main-slider button.submit {
  background-color: #60f0b5;
  color: #002d64;
  text-transform: uppercase;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 5px;
}
.main-slider button.become {
  margin-top: 91px;
  width: 265px;
  height: 60px;
}
.main-slider button.submit {
  height: 40px;
  width: 125px;
  font-size: 14px;
  font-weight: 600;
}
.main-slider button.submit:hover, .main-slider button.submit:active {
  background-color: #002d64;
  color: #60f0b5;
}
.main-slider form.mail {
  margin-top: 71px;
}
.main-slider form.mail p.descr-form {
  text-transform: uppercase;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}
.main-slider form.mail input {
  margin-right: 6px;
  width: 335px;
  border: 1px solid #b4c0ce;
  color: #999;
  font-size: 16px;
  padding: 10px 12px 11px 12px;
}
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>  
  
<div class="single-item">
  <div class="main-slider">
    <div class="container">
      <div class="slider-content">
        <img class="logo-sld" src="img/logo-slider.png" alt="">
        <h1>Building Strong Financial Systems<br> to Achieve aBetter Quality of Life</h1>
        <button class="become">become a volunteer</button>
        <form class="mail">
          <p class="descr-form">subscribe for email updates</p>
          <input type="email" placeholder="E MAIL">
          <button class="submit" type="submit">submit</button>
        </form>
      </div>
    </div>
  </div>
  <div class="main-slider">
    <div class="container">
      <div class="slider-content">
        <img class="logo-sld" src="img/logo-slider.png" alt="">
        <h1>Building Strong Financial Systems<br> to Achieve aBetter Quality of Life</h1>
        <button class="become">become a volunteer</button>
        <form class="mail">
          <p class="descr-form">subscribe for email updates</p>
          <input type="email" placeholder="E MAIL">
          <button class="submit" type="submit">submit</button>
        </form>
      </div>
    </div>
  </div>
  <div class="main-slider">
    <div class="container">
      <div class="slider-content">
        <img class="logo-sld" src="img/logo-slider.png" alt="">
        <h1>Building Strong Financial Systems<br> to Achieve aBetter Quality of Life</h1>
        <button class="become">become a volunteer</button>
        <form class="mail">
          <p class="descr-form">subscribe for email updates</p>
          <input type="email" placeholder="E MAIL">
          <button class="submit" type="submit">submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

3
  • Отступ из за слайдера в блоке .main-slider. Добавил картинку для наглядности. И, так как, то что я выложу код - ничего не покажет толком, я дал ссылку на репозиторий со всеми исходниками. Как думаете, в чем может быть проблема?
    – nirolo1
    22 дек 2017 в 16:13
  • @nirolo1, думаю проблема в чем-то другом, а не в слайдере.
    – SVE
    22 дек 2017 в 16:18
  • 2
    я нашел. Отступ появлялся из за стрелок слайдера. Когда присвоил arrows: false - отступ и горизонтальный скролл пропали
    – nirolo1
    22 дек 2017 в 17:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.