かっこいい感じのカルーセルパネルを作った

WordPress向けにかっこいい感じのカルーセルパネルを作ったのでメモ。
Swiper.jsというスライダーが作れるJavaScriptライブラリを使ってます。

![スクリーンショット 2022-04-12 16.33.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2483880/7c7abac9-4785-790e-2e61-7baf0f1d50dc.png)


```php
<!-- スライダーのphp -->
<div class="slider">
    <div id="slider_prev" class="swiper-button-prev swiper-button-white"></div>
    <div id="slider_next" class="swiper-button-next swiper-button-white"></div>
    <!-- .slider_content -->
    <section class="slider_content">
        <!-- .swiper-container -->
        <div class="swiper-container">
            <!-- .slider -->
            <ul class="slider swiper-wrapper">
                <?php
                $count = 1;

                $args = array(
                    'orderby' => 'post_date',
                    'order' => 'DESC',
                    'post_type' => 'post',
                    'post_status' => 'publish',
                    'posts_per_page' => -1
                );
                $the_query = new WP_Query($args);
                if ( $the_query->have_posts() ) :
                    while ( $the_query->have_posts() && $count <= 10 ) : $the_query->the_post();

                $cat = get_the_category();
                $cat_id = $cat[0]->cat_ID;
                $cat_name = $cat[0]->name;
                $cat_link = get_category_link($cat_id);

                $checked = get_field('pickup_check');
                if($checked) :
                ?>
                <!-- .slider_item -->
                <li class="slider_item swiper-slide">
                    <!-- .slider_article -->
                    <article class="slider_article">
                        <a href="<?php the_permalink(); ?>" class="slider_item_link">
                            <figure class="slider_article_figure">
                            <?php
                            if(has_post_thumbnail()){
                                the_post_thumbnail( 'array()');
                            }else{
                                echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/noimage.jpg" alt="no-image">';
                            }
                            ?>
                            </figure>
                            <!-- .slider_article_body -->
                            <div class="slider_article_body">
                                <!-- .slider_article_meta -->
                                <div class="slider_article_meta">
                                    <object><a class="slider_article_meta_cat" href="<?php echo $cat_link; ?>"><?php echo $cat_name; ?></a></object>
                                    <time class="slider_article_meta_date" datetime="<?php echo get_post_time('Y.m.d'); ?>"><?php echo get_post_time('Y.m.d'); ?></time>
                                </div>
                                <!-- /.slider_article_meta -->
                                <h2 class="slider_article_title"><?php the_title(); ?></h2>
                                <?php
                                $posttags = get_the_tags();
                                if ( $posttags ): ?>
                                <!-- .slider_article_tag_wrap -->
                                <div class="slider_article_tag_wrap">
                                    <?php foreach ( $posttags as $tag ) : ?>
                                    <object><a class="slider_article_tag" href="<?php echo get_tag_link($tag->term_id); ?>">#<?php echo $tag->name; ?></a></object>
                                    <?php endforeach; ?>
                                </div>
                                <!-- /.slider_article_tag_wrap -->
                                <?php endif; ?>
                            </div>
                            <!-- /.slider_article_body -->
                        </a>
                    </article>
                    <!-- /.slider_article -->
                </li>
                <!-- /.slider_item -->
                <?php $count++; ?>
                <?php endif; ?>
                <?php endwhile; endif; ?>
            </ul>
            <!-- /.slider -->
        </div>
        <!-- /.swiper-container -->
    </section>
    <!-- /.slider_content -->
    <div class="swiper-pagination"></div>
</div>
```
```css
/* スライダーのCSS全文 */
/* スライダー */
.slider{
  position: relative;
}
.slider_content{
  margin-top: 30px;
  padding-left: 50px;
  position: relative;
}
.slider_content::before{
  content: "";
  display: block;
  width: 100%;
  height: 300px;
  background-color: #333;
  position: absolute;
  top: 7vw;
  right: 0;
}
.slider_item{
  height: 100%;
}
.slider_article{
  height: 100%;
  background-color: #FFFFFF;
}
.slider_article:hover{
  color: #00A0E9;
}
.slider_article_figure{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.slider_article_figure::after{
  content: "";
  display: block;
  padding-top: calc(100% / 3 * 2);
}
.slider_article_figure img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider_article_body{
  padding: 20px;
  min-height: 120px;
}
.slider_article_meta{
  display: flex;
}
.slider_article_meta_cat{
  width: 80px;
  height: 28px;
  line-height: 28px;
  display: block;
  margin-right: 10px;
  border-radius: 2px;
  font-size: 12px;
  color: #FFFFFF;
  font-weight: bold;
  background-color: #AAAAAA;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.slider_article_meta_date{
  font-family: "Source Sans Pro";
  font-size: 16px;
  color: #AAAAAA;
}
.slider_article_body{
  background-color: #FFFFFF;
}
.slider_article_title{
  height: 90px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-top: 10px;
  font-size: 20px;
}
.slider_article_tag_wrap{
  margin-top: 10px;
}
.slider_article_tag{
  font-size: 14px;
  padding: 6px;
  color: #75CCF3;
  border: 1px solid #75CCF3;
  border-radius: 2px;
  display: inline-block;
  margin-right: 5px;
  margin-top: 5px;
}
.slider_article_tag:hover{
  background-color: #75CCF3;
  color: #FFFFFF;
}

.swiper-wrapper{
}
.swiper-container{
  max-width: 1800px;
}
.swiper-slide{
  max-height: 50%;
}
.swiper-slide-active{
  height: 600px !important;
  width: 40% !important;
  max-width: 600px;
}
.swiper-slide-active > .slider_article > .slider_item_link > .slider_article_figure{
  height: 100%;
}
.swiper-slide-active > .slider_article > .slider_item_link{
  display: block;
  height: 100%;
  position: relative;
}
.swiper-slide-active > .slider_article > .slider_item_link::after{
  position: absolute;
  display: block;
  content: "";
  height: 2px;
  background-color: #CC0011;
  width: 200px;
  bottom: 70px;
  right: -10%;
}
.swiper-slide-active > .slider_article > .slider_item_link > .slider_article_body{
  position: absolute;
  bottom: 0;
  width: 120%;
  right: -135%;
  padding: 0;
  min-height: auto;
}
.swiper-slide-active > .slider_article > .slider_item_link > .slider_article_body > .slider_article_meta > object > .slider_article_meta_cat{
  width: 100px;
  font-size: 14px;
  margin-right: 20px;
}
.swiper-slide-active > .slider_article > .slider_item_link > .slider_article_body > .slider_article_meta > .slider_article_meta_date{
  font-size: 18px;
}
.slider_article_tag_wrap{
  display: none;
}
.swiper-slide-active > .slider_article > .slider_item_link > .slider_article_body > .slider_article_tag_wrap{
  display: block;
  height: 44px;
  overflow: hidden;
}
.swiper-slide-active > .slider_article > .slider_item_link > .slider_article_body > .slider_article_title{
  height: 72px;
  -webkit-line-clamp: 2;
  font-size: 23px;
}

/* ボタン */
.swiper-button-next{
  right: 20px;
}
.swiper-button-prev{
  left: 20px;
}
.swiper-button-next, .swiper-button-prev{
  top: 45%;
  background-color: #333;
  height: 35px;
  width: 35px;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  opacity: .7;
}
.swiper-button-next:after, .swiper-button-prev:after{
  font-size: 15px;
  font-weight: bold;
}

/* ナンバリング */
.swiper-pagination-fraction{
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #CC0011;
  border-radius: 50%;
  bottom: -35px;
  left: 20px;
  color: #FFFFFF;
  position: absolute;
}
.swiper-pagination-fraction::after{
  position: absolute;
  bottom: 0;
}
.slider_content::after{
  display: block;
  content: "";
  width: 120px;
  height: 120px;
  border-radius: 50%;
  bottom: -45px;
  left: 10px;
  position: absolute;
  background-color: #CC3D49;
  opacity: .7;
  z-index: 1;
}
.swiper-pagination-current{
  font-size: 25px;
  font-weight: bold;
  position: absolute;
  top: 20px;
  left: 20px;
}
.swiper-pagination-total{
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  bottom: 20px;
  right: 20px;
}

@media screen and (max-width:991px) {
  /* スライダー */
  .slider_article_body{
    padding: 10px;
  }
  .slider_content{
    padding: 0 0 0 20px;
  }

  .swiper-slide-active{
    height: 560px !important;
    width: 47% !important;
  }
  .swiper-slide-active > .slider_article > .slider_item_link > .slider_article_body{
    width: 110%;
    right: -115%;
    padding: 10px;
  }
  .swiper-slide-active > .slider_article > .slider_item_link::after{
    right: -5%;
  }

  /* ナンバリング */
  .slider_content::after{
    left: 5px;
  }
  .swiper-pagination-fraction{
    left: 15px;
  }
}

@media screen and (max-width:768px) {
  /* スライダー */
  .slider_article{
    height: auto;
  }
  .slider_article_figure img{
  }
  .slider_content::before{
    height: 195px;
    top: 25vw;
  }
  .slider_article_meta_cat{
    height: 21px;
    line-height: 21px;
    width: 81px;
    font-size: 12px;
    margin-right: 10px;
  }
  .slider_article_meta_date{
    height: 21px;
    line-height: 21px;
    font-size: 12px;
  }
  .slider_article_title {
    height: 44px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 5px;
    font-size: 16px;
  }
  .slider_article_tag {
    font-size: 12px;
    padding: 3px;
    margin-right: 5px;
  }

  .swiper-container{
  }
  .swiper-slide-active{
    height: auto !important;
    width: 75% !important;
  }
  .swiper-slide-active > .slider_article > .slider_item_link::after{
    display: none;
  }
  .swiper-slide-active > .slider_article > .slider_item_link > .slider_article_figure{
    height: auto;
  }
  .swiper-slide-active > .slider_article > .slider_item_link > .slider_article_body{
    width: 100%;
    position: inherit;
    right: auto;
  }
  .swiper-slide-active > .slider_article > .slider_item_link > .slider_article_body > .slider_article_tag_wrap{
    height: 65px;
  }

  /* ナンバリング */
  .swiper-pagination-fraction{
    width: 60px;
    height: 60px;
    top: -10px;
    left: 15px;
    bottom: auto;
  }
  .swiper-pagination-current{
    font-size: 18px;
    top: 5px;
    left: 12px;
  }
  .swiper-pagination-total{
    font-size: 16px;
    bottom: 5px;
    right: 12px;
  }
  .slider_content::after{
    width: 80px;
    height: 80px;
    top: -20px;
    bottom: auto;
  }
}
```
```javascript
// スライダーのjavascript
var swiper = new Swiper('.swiper-container', {
  loop: true,
  speed:400,
  spaceBetween: 20,
  allowTouchMove: false,
  centeredSlides: false,
  slidesPerView: 1.5,
  breakpoints: {
    769: {
      slidesPerView: 3.1
    },
    992: {
      slidesPerView: 4.0
    },
    1200: {
      slidesPerView: 4.5
    },
  },
  autoplay: {
    delay: 4000,
    disableOnInteraction: true
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'fraction'
  },
});
```