No.1
No.2
No.315,000円
No.10
ルール・連絡事項
王冠アイコンはサイトデザインに合わせて変更できる
パーツ設置費用
CSS
.rank__slider__type2 .num {
display: table;
font-size: 20px;
font-weight: bold;
line-height: 1.0;
margin: 0 auto 12px;
}
.rank__slider__type2 .icon {
display: table;
padding-left: 40px;
position: relative;
}
.rank__slider__type2 .icon img {
image-rendering: -webkit-optimize-contrast;
position: absolute;
bottom: 0;
left: 0;
width: 32px;
}
.rank__slider__type2 figure {
padding-top: 100%;
position: relative;
width: 100%;
}
.rank__slider__type2 figure img {
image-rendering: -webkit-optimize-contrast;
object-fit: cover;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
}
.rank__slider__type2 .name {
font-size: 15px;
line-height: 1.6;
margin: 10px 0 0;
}
.rank__slider__type2 .swiper-button-next::after,
.rank__slider__type2 .swiper-button-prev::after {
content: '';
}
.rank__slider__type2 .swiper-button-next,
.rank__slider__type2 .swiper-button-prev {
background: url("https://ec.excellent.ne.jp/wp/wp-content/themes/exce/slider/img/slider_arrow-1.png") no-repeat center / cover; /* 矢印アイコン */
image-rendering: -webkit-optimize-contrast;
}
.rank__slider__type2 .swiper-button-next {
transform: rotate(180deg);
}
@media screen and (max-width: 800px) {
.ranking__place__type1 .num {
font-size: 2.6vw;
margin: 0 auto 1.5vw;
}
.ranking__place__type1 .icon {
padding-left: 4.6vw;
}
.ranking__place__type1 .icon img {
width: 3.6vw;
}
.rank__slider__type2 .name {
font-size: 1.8vw;
margin: 1vw 0 0;
}
.rank__slider__type2 .swiper-button-next,
.rank__slider__type2 .swiper-button-prev {
height: 6vw;
width: 3vw;
}
}
@media screen and (max-width: 540px) {
.ranking__place__type1 .num {
font-size: 7vw;
margin: 0 auto 3vw;
}
.ranking__place__type1 .icon {
padding-left: 13vw;
}
.ranking__place__type1 .icon img {
width: 10vw;
}
.rank__slider__type2 .name {
font-size: 3.6vw;
margin: 2vw 0 0;
}
}
HTML
<section id="rank__slider__type2" class="rank__slider__type2"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <article> <p class="num icon"><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/icon-crown-1.png">No.1</p> <figure> <a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/03/thumb-dammy-image5.jpg"></a> </figure> <p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすと</a></p> </article> </div> <div class="swiper-slide"> <article> <p class="num icon"><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/icon-crown-2.png">No.2</p> <figure> <a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/03/thumb-dammy-image5.jpg"></a> </figure> <p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすと</a></p> </article> </div> <div class="swiper-slide"> <article> <p class="num icon"><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/icon-crown-3.png">No.3</p> <figure> <a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/03/thumb-dammy-image5.jpg"></a> </figure> <p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすと</a></p> </article> </div> <div class="swiper-slide"> <article> <p class="num">No.4</p> <figure> <a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/03/thumb-dammy-image5.jpg"></a> </figure> <p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすと</a></p> </article> </div> <div class="swiper-slide"> <article> <p class="num">No.5</p> <figure> <a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/03/thumb-dammy-image5.jpg"></a> </figure> <p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすと</a></p> </article> </div> <div class="swiper-slide"> <article> <p class="num">No.6</p> <figure> <a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/03/thumb-dammy-image5.jpg"></a> </figure> <p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすと</a></p> </article> </div> <div class="swiper-slide"> <article> <p class="num">No.7</p> <figure> <a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/03/thumb-dammy-image5.jpg"></a> </figure> <p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすと</a></p> </article> </div> <div class="swiper-slide"> <article> <p class="num">No.8</p> <figure> <a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/03/thumb-dammy-image5.jpg"></a> </figure> <p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすと</a></p> </article> </div> <div class="swiper-slide"> <article> <p class="num">No.9</p> <figure> <a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/03/thumb-dammy-image5.jpg"></a> </figure> <p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすと</a></p> </article> </div> <div class="swiper-slide"> <article> <p class="num">No.10</p> <figure> <a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/03/thumb-dammy-image5.jpg"></a> </figure> <p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすと</a></p> </article> </div> </div> <!-- ナビゲーションボタン --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </section>
JavaScript
<script>
var mySwiper = new Swiper ('#rank__slider__type2 .swiper-container', { loop: true, // 最後のスライドまで到達した場合、最初に戻らずに続けてスライド可能にするか。 speed: 600, // スライドが切り替わるトランジション時間(ミリ秒)。 slidesPerView: 2, // 何枚のスライドを表示するか spaceBetween: 10, // スライド間の余白サイズ(ピクセル) direction: 'horizontal', // スライド方向。 'horizontal'(水平) か 'vertical'(垂直)。effectオプションが 'slide' 以外は無効。 effect: 'slide', // "slide", "fade"(フェード), "cube"(キューブ回転), "coverflow"(カバーフロー) または "flip"(平面回転) // スライダーの自動再生 // autoplay: true のみなら既定値での自動再生 autoplay: { delay: 3000, // スライドが切り替わるまでの表示時間(ミリ秒) stopOnLast: false, // 最後のスライドまで表示されたら自動再生を中止するか disableOnInteraction: true // ユーザーのスワイプ操作を検出したら自動再生を中止するか }, breakpoints: { 800: { slidesPerView: 5, spaceBetween: 20, }, 540: { slidesPerView: 4, } }, // ページネーションを表示する場合 pagination: { el: '.swiper-pagination', // ページネーションを表示するセレクタ }, // 前後スライドへのナビゲーションを表示する場合 navigation: { nextEl: '.swiper-button-next', // 次のスライドボタンのセレクタ prevEl: '.swiper-button-prev', // 前のスライドボタンのセレクタ }, // スクロールバーを表示する場合 scrollbar: { el: '.swiper-scrollbar', // スクロールバーを表示するセレクタ } });
</script>
