Wordpress　プラグイン使用せずslickを利用してスライダーをコーディングしたい

前提・実現したいこと

実装内容：Wordpressで作った固定ページ　スライドの設置
カスタム投稿：page-company.php

実装にあたっての詳細▼
①プラグインなしで実装
②表示画像４画像　うち中央に２画像、端２画像（画像幅を半分見えている状態）
③画像下にドットを表示して１つのドットを押すと１画像が動く
④コンテンツ幅なし（width:100%;）
※スライドの速さ等は後に微調整する予定

デザインの詳細▼
コンテンツ幅なし（width:100%;）
画像幅　　600px
画像高さ　500px
画像と画像の間　残りを均等に３箇所に割ったpx（1920pxでデザインした際は画像の余白33px）

イメージ画像▼　
![
（赤の部分：画像を挿入予定）

発生している問題・エラーメッセージ

・４画像の表示は出来たが端画像幅全部見えている状態

header.php

	
<!doctype html>
<html>
<head>

<!--
title,ogタグ等は省略
-->

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- slick -->
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/slick/slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/slick/slick-theme.css" media="screen" />
<script src="<?php echo get_template_directory_uri(); ?>/slick/slick.min.js"></script>

<!-- css-->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/company.css" type="text/css">
</head>

<!--
headerタグ省略
-->

page-company.php

	
<?php
/*
Template Name: company
*/
?>

<?php get_header(); ?>
<div class="slick01 slick-slider shop_img_slide">
  <div class="slick-slide slick-current slick-active" id="slick-slide01"><img src="<?php echo get_template_directory_uri(); ?>/img/shop/slide_img01.jpg" alt="img01"></div>
  <div class="slick-slide slick-current slick-active" id="slick-slide02"><img src="<?php echo get_template_directory_uri(); ?>/img/shop/slide_img02.jpg" alt="img02"></div>
  <div class="slick-slide slick-current slick-active" id="slick-slide03"><img src="<?php echo get_template_directory_uri(); ?>/img/shop/slide_img03.jpg" alt="img03"></div>
  <div class="slick-slide slick-current slick-active" id="slick-slide04"><img src="<?php echo get_template_directory_uri(); ?>/img/shop/slide_img04.jpg" alt="img04"></div>
</div>

<?php get_footer(); ?>

footer.php


<!--
footerタグ省略
-->

<script type="text/javascript">
$('.slick01').slick({
  autoplaySpeed: 3000,
  speed: 800,
  dots:true,
  draggable:true,
  infinite: true,
  autoplay: true,
  slidesToScroll: 1,
  centerMode: true,
  slidesToShow:4,
});
</script>
<script>
  $('.slick01').slick({ 
    autoplay: true, 
    dots: true, 
  });</script>
</body>
</html>

css

<style>

slick-slider{
    width: 100%;
    margin: 0 auto;
}

.slick-slider img{
    height: auto;
    width: 100%;
    padding-right:33px;
}
    
</style>

試したこと

js指定の追加
<script>タグに画面表示を４に指定しましたが、希望である端画像の幅半分が隠れず画像幅全て見えている

画像を４枚から６枚に追加
・画像６枚見えている
・中央２枚
・端２枚の画像は画像幅半分ではない
・画像下のドットの挙動は問題ない

画像幅を％で指定
jsがうまく動かないのかスライダー表示せず画像が全て見えている

お手数ですが、ご回答宜しくお願い致します。

補足情報（FW/ツールのバージョンなど）

Wordpress　5.3.2
Windows 10

行動規範の内容に同意します

回答1件

ベストアンサー

CSSについて、こんな感じでいかがでしょうか?

slick-slider{
    width: 100%;
    margin: 0 auto;
}
.slick-slider .slick-slide {
    padding: 0 calc(33px / 2);
    box-sizing: border-box;
}
.slick-slider img{
    height: auto;
    width: 100%;
    /* padding-right:33px; */
}

投稿2020/03/10 15:27