swiperを使った投稿記事のループ処理をしたいです。
今のhtmlの状態は画像と文章をのせるには十分ですが、この状態を保ちながら
PHPで投稿記事をループさせようとすると、うまくいきません。
PC画面では今のHTMLのように3つだけ表示して、レスポンシブにすると両脇のものが
消えて真ん中にある記事だけを表示させたいです。
以下イメージです。
宜しくお願い致します。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!--Swiper--> 9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"> 10 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> 11<!-- Bootstrap core JS--> 12 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 13 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script> 14 15 </head> 16 <body> 17 <!-- Slider main container --> 18 <div class="swiper-container"> 19 <!-- Additional required wrapper --> 20 <div class="swiper-wrapper"> 21 <!-- Slides --> 22 <div class="swiper-slide" style="linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%"> 23 <img src="https://picsum.photos/id/1041/650/400" alt=""> 24 <p>aaaa</p> 25 <p>bbbbb</p> 26 27 </div> 28 <div class="swiper-slide"> 29 <img src="https://picsum.photos/id/1042/650/400" alt=""> 30 <p>aaaa</p> 31 <p>bbbbb</p> 32 </div> 33 <div class="swiper-slide"> 34 <img src="https://picsum.photos/id/1043/650/400" alt=""> 35 <p>aaaa</p> 36 <p>bbbbb</p> 37 </div> 38 </div> 39 <!-- If we need pagination --> 40 <div class="swiper-pagination"></div> 41 42 <!-- If we need navigation buttons --> 43 <div class="swiper-button-prev swipe-sign"></div> 44 <div class="swiper-button-next swipe-sign"></div> 45 </div> 46 47 <style> 48 .swiper-button-prev{ 49 position: absolute; 50 display: inline-block; 51 padding: 0 0 0 16px; 52 color: #000; 53 vertical-align: middle; 54 text-decoration: none; 55 font-size: 50px; 56 width: 48px; 57 } 58 59 .swiper-button-prev::before{ 60 position: absolute; 61 top: 0; 62 bottom: 0; 63 left: 0; 64 margin: auto; 65 content: ""; 66 vertical-align: middle; 67 box-sizing: border-box; 68 width: 150px; 69 height: 220px; 70 border: 1px solid #191919; 71 opacity: 0.6; 72 /* -webkit-border-radius: 25%; */ 73 /* border-radius: 25%; */ 74 background-color: #191919; 75 } 76 77 .swiper-button-prev::after{ 78 position: absolute; 79 top: 0; 80 bottom: 0; 81 left: 0; 82 right: 0; 83 margin: auto; 84 content: ""; 85 vertical-align: middle; 86 /* left: 5px; */ 87 box-sizing: border-box; 88 width: 100px; 89 height: 100px; 90 border: 100px solid transparent; 91 border-left: transparent; 92 border-right: 90px solid #fff; 93 } 94 95 .swiper-button-next{ 96 position: absolute; 97 display: inline-block; 98 padding: 0 0 0 16px; 99 color: #000; 100 vertical-align: middle; 101 text-decoration: none; 102 font-size: 50px; 103 width: 48px; 104 } 105 106 .swiper-button-next::before{ 107 position: absolute; 108 top: 0; 109 bottom: 0; 110 right: 0; 111 margin: auto; 112 content: ""; 113 vertical-align: middle; 114 box-sizing: border-box; 115 width: 150px; 116 height: 220px; 117 border: 1px solid #191919; 118 opacity: 0.6; 119 /* -webkit-border-radius: 25%; */ 120 /* border-radius: 25%; */ 121 background-color: #191919; 122 } 123 124 .swiper-button-next::after{ 125 position: absolute; 126 top: 0; 127 bottom: 0; 128 right: 0; 129 margin: auto; 130 content: ""; 131 vertical-align: middle; 132 /* left: 5px; */ 133 box-sizing: border-box; 134 width: 100px; 135 height: 100px; 136 border: 100px solid transparent; 137 border-right: transparent; 138 border-left: 90px solid #fff; 139 } 140 141 </style> 142 143 <script> 144 var mySwiper = new Swiper ('.swiper-container', { 145 loop: true, 146 slidesPerView: 2, 147 spaceBetween: 5, 148 centeredSlides : true, 149 pagination: '.swiper-pagination', 150 nextButton: '.swiper-button-next', 151 prevButton: '.swiper-button-prev', 152 breakpoints: { 153 767: { 154 slidesPerView: 1, 155 spaceBetween: 0 156 } 157 } 158 }) 159 </script> 160 </body> 161</html> 162 163
php
1<div class="container-fluid"> 2 <div class="row py-3"> 3 <div class="col-md-4 col-12"> 4 <div class="bg-white py-3"> 5 <!--サムネイル--> 6 <div class="pb-3"> 7 <?php if ( has_post_thumbnail() ) : ?> 8 <?php the_post_thumbnail(); ?> 9 <?php else : ?> 10 <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/assets/img/no-image.png" alt=""> 11 <?php endif; ?> 12 </div> 13 <!--記事タイトル--> 14 <h2 class="h4 px-3 pb-3"><?php the_title(); ?></h2> 15 <p><?php the_excerpt(); ?></p> 16 <!----> 17 <div class="text-center"> 18 <p><?php the_date('Y.m.d'); ?></p> 19 </div> 20 </div> 21 </div> 22 </div> 23 </div> 24
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。