{"id":46,"date":"2021-06-14T13:35:21","date_gmt":"2021-06-14T04:35:21","guid":{"rendered":"http:\/\/gaku-on.com\/?p=46"},"modified":"2021-06-14T14:04:46","modified_gmt":"2021-06-14T05:04:46","slug":"%e3%82%ab%e3%83%ab%e3%83%bc%e3%82%bb%e3%83%ab%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc","status":"publish","type":"post","link":"http:\/\/gaku-on.com\/?p=46","title":{"rendered":"\u30ab\u30eb\u30fc\u30bb\u30eb\u30b9\u30e9\u30a4\u30c0\u30fc"},"content":{"rendered":"\n

https:\/\/www.omakase.net\/blog\/2020\/11\/swiper.html<\/a><\/p>\n\n\n\n

HTML\u4ee5\u4e0b\u30b3\u30d4\u30da\n\n<div class=\"gazoubox\">\n\t\t <mainslide>\n   <div id=\"slide\">\n    <div class=\"swiper-container\">\n     <ul class=\"swiper-wrapper\">\n      <!-- \u30b9\u30e9\u30a4\u30c9\u3059\u308b\u753b\u50cf -->\n      <li class=\"swiper-slide\"><img src=\"<?php bloginfo('stylesheet_directory'); ?>\/img\/main1.jpg\" >\n      <\/li>\n   <li class=\"swiper-slide\"><img src=\"<?php bloginfo('stylesheet_directory'); ?>\/img\/main2.jpg\" width=\"821\" height=\"401\" alt=\"\"\/>\n      <\/li>\n\t\t  <li class=\"swiper-slide\"><img src=\"<?php bloginfo('stylesheet_directory'); ?>\/img\/main1.jpg\" width=\"821\" height=\"401\" alt=\"\"\/>\n      <\/li>\n\t\t  <li class=\"swiper-slide\"><img src=\"<?php bloginfo('stylesheet_directory'); ?>\/img\/main2.jpg\" width=\"821\" height=\"401\" alt=\"\"\/>\n      <\/li>\n      <!-- \/\u30b9\u30e9\u30a4\u30c9\u3059\u308b\u753b\u50cf -->\n     <\/ul>\n    <\/div>\n   <\/div>\n\t\t\t <script type=\"text\/javascript\">\n  var mySwiper = new Swiper ('.swiper-container', {\n   slidesPerView:2.31,\/\/\u753b\u50cf\u3092\u4f55\u679a\u8868\u793a\u3059\u308b\u304b\n   spaceBetween: 0,\/\/\u4f55\u30d4\u30af\u30bb\u30eb\u753b\u50cf\u306e\u9593\u9694\u3092\u3042\u3051\u308b\u304b\n   centeredSlides : true,\/\/\u898b\u5207\u3089\u305b\u305f\u3044\u5834\u5408\u30e1\u30a4\u30f3\u753b\u50cf\u3092\u30bb\u30f3\u30bf\u30fc\u306b\u3082\u3063\u3066\u304f\u308b\u304b\n   \/\/\u81ea\u52d5\u518d\u751f\u3059\u308b\u5834\u5408\n   autoplay: {\n   delay: 6000, \/\/3\u79d2\u5f8c\u306b\u6b21\u306e\u753b\u50cf\u306b\u4ee3\u308f\u308b\n   },\n   loop: true,\/\/\u6700\u5f8c\u306e\u753b\u50cf\u307e\u3067\u3044\u3063\u305f\u3089\u30eb\u30fc\u30d7\u3059\u308b\n   \/\/\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u3092\u3064\u3051\u308b\u5834\u5408\n   pagination: {\n    el: '.swiper-pagination',\n    type: 'bullets',\n    clickable: true,\n   },\n   \/\/\u5de6\u53f3\u306e\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3092\u3064\u3051\u308b\u5834\u5408\n   navigation: {\n    nextEl: '.swiper-button-next',\n    prevEl: '.swiper-button-prev',\n   }\n  });\n<\/script>\n  <\/mainslide>\n\t\t<\/div>\t<\/code><\/pre>\n\n\n\n
CSS\u3000\u4ee5\u4e0b\u30b3\u30d4\u30da

<\/p>\n\n\n\n
header{ top:0; z-index:100; }
mainslide{ width:100%; }
#slide{ margin:0 auto; }
.swiper-container{ witdh:100%; }
.swiper-slide-next,.swiper-slide-prev{ opacity: 0.5; }
.swiper-button-prev::before,.swiper-button-next::before {
font-size:32px;
color:#fff;
font-weight:900;
}
.swiper-button-prev::before { content: “\u2190”; }
.swiper-button-next::before { content: “\u2192”; }
li.swiper-slide{
list-style-type: none;margin:0;padding:0;max-width: 821px;\u3000\u2190\u6ce8\u610f\uff01\u753b\u50cf\u30b5\u30a4\u30ba\u3092\u5165\u308c\u3066\u304a\u3044\u305f\u65b9\u304c\u3088\u3044
}<\/p>\n","protected":false},"excerpt":{"rendered":"
https:\/\/www.omakase.net\/b…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,1],"tags":[],"class_list":["post-46","post","type-post","status-publish","format-standard","hentry","category-css","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=46"}],"version-history":[{"count":2,"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts\/46\/revisions"}],"predecessor-version":[{"id":48,"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts\/46\/revisions\/48"}],"wp:attachment":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=46"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=46"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}