Swiperを使って
スライドショー入れてみましたが
なぜかスライドが枠からずれてしまいます。
Styleタグ内みましたが
どこを調整すればいいのか見当つかないので
ヒントやキーワードだけでもいいので、
教えてください。
こちらのサイトのヘッダーにあるスライドは成功しましたが、
ページ記事内のスライド(立体効果がある)はエラーになります。
ズレてしまいます↓↓
https://jpthing.blogspot.jp/2018/03/blog-post.html
コードはこちらになります。
HTMLコード内では<HTML>と<Style><Javascript>の順ではいってます。
HTML
1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" /> 2 3 4 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> 5<!-- Slider main container --> 6<div class="sample sample02"> 7 <div class="swiper-container"> 8 <div class="swiper-wrapper"> 9 <div class="swiper-slide"> 10 <div class="sample02-inner"> 11 <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、<br class="u-d-n u-d-i-md" />うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p> 12 </div> 13 </div> 14 15 <div class="swiper-slide"> 16 <div class="sample02-inner"> 17 <p>またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。</p> 18 </div> 19 </div> 20 21 <div class="swiper-slide"> 22 <div class="sample02-inner"> 23 <p>では、わたくしはいつかの小さなみだしをつけながら、<br class="u-d-n u-d-i-md" />しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p> 24 </div> 25 </div> 26 </div> 27 28 <div class="swiper-button-prev"> 29 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 27 44"> 30 <path class="c-arrow c-arrow-prev" d="M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z" /> 31 </path></svg> 32 </div> 33 <div class="swiper-button-next"> 34 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 27 44"> 35 <path class="c-arrow c-arrow-next" d="M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z" /> 36 </path></svg> 37 </div> 38 39 <div class="swiper-pagination"></div> 40 </div> 41</div> 42<style> 43.sample02 .swiper-wrapper { 44 align-items: stretch; 45} 46 47.sample02 .swiper-slide { 48 display: flex; 49 justify-content: center; 50 align-items: center; 51 height: auto; 52 padding-bottom: 25px; 53} 54 55.sample02 .sample02-inner { 56 display: flex; 57 justify-content: center; 58 align-items: center; 59 width: 100%; 60} 61 62.sample02 .swiper-button-prev, 63.sample02 .swiper-button-next { 64 display: none; 65 width: 20px; 66 height: 32.58px; 67 fill: #666; 68 stroke: none; 69 stroke-width: 0; 70 background-image: none; 71 z-index: 10000; 72} 73 74.sample02 .swiper-container-horizontal > .swiper-pagination-bullets { 75 bottom: 0; 76} 77 78.sample02 .swiper-pagination-bullet-active { 79 background: #666; 80} 81 82@media (min-width: 768px) { 83 .sample02 .swiper-slide { 84 padding: 50px; 85 } 86 87 .sample02 .swiper-button-prev, 88 .sample02 .swiper-button-next { 89 display: block; 90 } 91 92 .sample02 .swiper-container-horizontal > .swiper-pagination-bullets { 93 bottom: 10px; 94 } 95} 96</style> 97<script> 98window.addEventListener('DOMContentLoaded', function() { 99 var swiper = new Swiper('.sample02 .swiper-container', { 100 pagination: '.swiper-pagination', 101 paginationClickable: true, 102 nextButton: '.swiper-button-next', 103 prevButton: '.swiper-button-prev', 104 loop: true, 105 speed: 500, 106 autoplay: 3000, 107 spaceBetween: 0, 108 effect: 'coverflow' 109 }); 110}, false); 111</script>
回答1件
あなたの回答
tips
プレビュー