LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@tomoki828

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

Posted at

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

スクリーンショット 2022-04-12 16.33.41.png

<!-- スライダーの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全文 */
/* スライダー */
.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
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'
  },
});
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?