T122

css/index.css

@@ -32,26 +32,30 @@ div#contents_area_top div#showcase {
 
 div#contents_area_top p.headline_area {
  /*0423 追記 */
- width: 967px;
- margin-left: auto;
+ width: 800px;
+ margin-left: 15%;
  margin-right: auto;
  margin-bottom: -30px;
  position: relative;
  bottom: 60px;
  text-align: left;
+ z-index: 9;
+}
+.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
+ bottom: 20px !important;
 }
-
 div#contents_area_top p.headline_area a {
  background: url(../images/news_area/icon_new.gif) no-repeat left top;
  padding-left: 45px;
  display: block;
  font-weight: bold;
+ width: 60%;
 }
 
 div#main_area {
  width: 967px;
  /*margin: 20px auto 0 auto;20190225*/
- margin: 0 auto 0 auto;
+ margin: 15px auto 0 auto;
  text-align: left;
 }
 

index.html

@@ -12,10 +12,13 @@
  <!--各ページ共通項目 -->
  <script type="text/javascript" src="shared/js/commonparts.js?v=2"></script>
  <script type="text/javascript" src="shared/js/jquery.js"></script>
+ <script type="text/javascript" src="shared/swiper/swiper-bundle.min.js"></script>
  <script type="text/javascript" src="shared/js/common.js"></script>
+ <script type="text/javascript" src="shared/js/slider.js"></script>
  <link rel="stylesheet" href="shared/css/reset.css" type="text/css" media="all">
  <link rel="stylesheet" href="shared/css/fontdefault.css" type="text/css" media="all">
  <link rel="stylesheet" href="shared/css/common.css" type="text/css" media="all">
+ <link rel="stylesheet" href="shared/swiper/swiper-bundle.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/index.css?v=20220629" type="text/css" media="all">
  <script type="text/javascript">
   //<![CDATA[
@@ -99,18 +102,37 @@
   </div>
   <div id="contents_area_top">
    <div id="showcase">
+    <!-- swiper -->
+    <div class="swiper">
+     <div class="swiper-wrapper"><!--dir="rtl"-->
+      <div class="swiper-slide swiper-slide1">
+       <img src="/images/showcase01.jpg" alt="" />
+      </div>
+      <div class="swiper-slide swiper-slide2">
+       <img src="/images/mizuno.png" alt="" />
+      </div>
+      <div class="swiper-slide swiper-slide3">
+       <img src="/images/ecohome.png" alt="" />
+      </div>
+      <div class="swiper-slide swiper-slide4">
+       <img src="/images/japantoilet.png" alt="" />
+      </div>
+
+     </div>
+      <div class="swiper-pagination"></div>
+      <div class="swiper-button-prev"></div>
+      <div class="swiper-button-next"></div>
+
+    </div>
 
    </div>
-    <noscript>
-     <p>当サイトはJavaScriptをonにしてご覧ください。</p>
-    </noscript>
+   <noscript>
+    <p>当サイトはJavaScriptをonにしてご覧ください。</p>
+   </noscript>
    <p class="headline_area"><a href="https://www.sanitary-net.com/news/news1508">新型コロナウイルスなどのトイレでの感染対策に関連するQ＆Aを追加しました。</a></p>
 
    <div id="main_area" class="clearfix">
-    <p id="bnr_area">
-     <a href="https://sanitary-net-annex.com/contest/" target="_brank"><img src="/shared/images/mv_pc.png" width="353" height="107" width="353" height="107" alt="水のある暮らし" /></a>
-     <a href="https://www.sanitary-net.com/news/news1899"><img src="/shared/images/ecohome.png" width="353" height="107" alt="子育てエコホーム支援事業" /></a>
-    </p>
+    
     <div class="left">
      <div style="overflow: hidden; margin-bottom: 20px;">
       <div class="box_left">
@@ -196,7 +218,9 @@
      <p><a href="https://ondankataisaku.env.go.jp/coolchoice/" target="_blank"><img src="https://www.sanitary-net.com/cms/wp-content/uploads/2018/11/bnr_coolchoice_top.jpg" alt="（一社）日本レストルーム工業会は「COOL CHOICE」に賛同しています" width="725" height="89" /></a></p>
     </div>
     <div class="right">
-     <p><a href="/episode-cp/"><img src="images/banner/222_80.png" alt="温水洗浄便座出荷台数1億台達成について" width="222" height="80" /></a></p>
+     <p><a href="https://sanitary-net-annex.com/contest/" target="_brank"><img src="/shared/images/mv_pc.png" width="222" height="80" alt="水のある暮らし" /></a></p>
+     <p><a href="https://www.sanitary-net.com/news/news1899"><img src="/shared/images/ecohome.png" width="222" height="80" alt="子育てエコホーム支援事業" /></a></p>
+     <p><a href="/episode-cp/"><img src="images/banner/222_80.png" alt="温水洗浄便座出荷台数1億台達成について" /></a></p>
      <p><a href="/trend/pictogram/pictogram01.html"><img src="images/banner/banner_pictgram.jpg" alt="トイレ操作系標準ピクトグラム" width="222" height="80" /></a></p>
      <p><a href="/trend/study.html"><img src="images/banner/banner_interview.png" alt="専門医に訊く（女性のための）温水洗浄便座の適切な使い方" width="222" height="80" /></a></p>
      <p><a href="/news/news1633"><img src="images/banner/banner_cyushouzei.gif" alt="中小企業税制改正に伴う対応" width="222" height="80" /></a></p>
@@ -356,6 +380,8 @@
    -->
   </script>
  </div>
+
+
 </body>
 
 </html>

shared/js/slider.js

+window.onload = function () {
+ const swiper = new Swiper(".swiper", {
+  loop: true,
+  speed: 2000,
+  autoplay: {
+   delay: 3000,
+   disableOnInteraction: false
+  },
+  effect: 'fade',
+  fadeEffect: {
+   crossFade: true
+  },
+  pagination: {
+   el: ".swiper-pagination",
+   clickable: true,
+  },
+  navigation: {
+   nextEl: ".swiper-button-next",
+   prevEl: ".swiper-button-prev",
+  },
+ });
+}

shared/js/slider2.js

+window.onload = function () {
+ const swiper = new Swiper(".swiper", {
+  loop: true,
+  speed: 2000,
+  autoplay: {
+   delay: 3000,
+   disableOnInteraction: false
+  },
+  pagination: {
+   el: ".swiper-pagination",
+   clickable: true,
+  },
+  navigation: {
+   nextEl: ".swiper-button-next",
+   prevEl: ".swiper-button-prev",
+  },
+ });
+}