slick.jsでスライダーする要素にパディングをつけてはいけない

 
slickを使用してスライダーを何度か作成したことがあったんですが、スライダーの中身が画像だけじゃないときになかなかうまく動かなかったので、メモしておきます。

通常、slickを使用するときはスライドしたい親タグ(下記の例だと「slider」クラスのdivタグ)直下のタグをスライドしてくれます。

<div class="slider">  //親タグ
  <div><img src="slider01.jpg" alt=""></div>  //スライド要素1
  <div><img src="slider02.jpg" alt=""></div>  //スライド要素2
  <div><img src="slider03.jpg" alt=""></div>  //スライド要素3
</div>
<script>
$(function() {
    $('.slider').slick();
});
</script>

スライドしたいのは、画像が左にあって、右にテキストがあり、アイコンが左上にあるデザインでした。
左上のアイコンが背景からとびだしていることが厄介で、画像やテキストの要素に親要素を設けてアイコン画像が切れないようにすることが必要でした。

 
「slide-item」クラスのdivタグを囲っているsectionにパディングを指定したらslick.jsがwidthをうまく認識してくれないようになって変なところでスライダーするようになってしまいました。
スライド要素タグにはパディングを付けたらいけないということを知りませんでした。

marginで対応したらうまく動くようになりました。
その時のhtml、css、jsは下記の通りです。

HTML

<div class="slider">
  <section>
    <div class="slide-item">
      <a href="#">
        <figure class="icon-new"><img src="img/new.png" alt=""></figure>
        <div class="flex">
          <figure><img src="img/slide01.jpg" alt=""></figure>
          <div class="textarea">
            <p class="label">カテゴリー</p>
            <h2>タイトルタイトルタイトルタイトル</h2>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
      </a>
    </div>
  </section>
  <section>
    <div class="slide-item">
      <a href="">
        <figure class="icon-new"><img src="img/new.png" alt=""></figure>
        <div class="flex">
          <figure><img src="img/slide02.jpg" alt=""></figure>
          <div class="textarea">
            <p class="label">カテゴリー</p>
            <h2>タイトルタイトルタイトルタイトル</h2>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
      </a>
    </div>
  </section>
  <section>
    <div class="slide-item">
      <a href="">
        <figure class="icon-new"><img src="img/new.png" alt=""></figure>
        <div class="flex">
          <figure><img src="img/slide03.jpg" alt=""></figure>
          <div class="textarea">
            <p class="label">カテゴリー</p>
            <h2>タイトルタイトルタイトルタイトル</h2>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
      </a>
    </div>
  </section>
</div>

CSS

.slider .slick-prev {
  left: 1px;
  z-index: 99;
}
.slider .slick-next {
  right: 1px;
}
.slick-prev:before, .slick-next:before{
  color: black!important;
}
.slide-item {
  border-style: solid;
  border-width: 2px;
  border-color: white;
  border-radius: 5px;
  background-color: #eee;
  box-shadow: 2.351px 3.236px 6px 0px rgba(0, 0, 0, 0.5);
  position: relative;
  font-size: .5rem;
  margin: .4rem 1rem;
}
.slide-item .icon-new {
  position: absolute;
  top: -.4rem;
  left: -1rem;
}
.slide-item .icon-new img {
  width: 50px;
  height: 50px;
}
.slide-item a {
  text-decoration: none;
  color: #333;
}
.slide-item .label {
  color: #fff;
  background-color: #f5958f;
  display: inline-block;
  padding: .2rem;
  margin: 1rem 0 .5rem;
}
.slide-item h2 {
  color: #218fbc;
  font-size: .625rem;
  margin-bottom: .5rem;
}
.slide-item .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.slide-item .flex figure {
  width: 50%;
  margin-right: .625rem;
}
.slide-item .flex img {
  width: 100%;
  height: auto;
  border-radius: 6px 0 0 6px;
}
.slide-item .flex .textarea {
  width: 46%;
}

jQuery

$(function() {
  $('.slider').slick({
    infinite: true,
    dots: true,
    adaptiveHeight: true
  });
});

demo