Material Slider Manga Reader menggunakan HTML,CSS dan Swiperjs

Material Slider Manga Reader
Get Started > Details
  • Details
  • Install

Deskripsi.

Slider ini merupakan request dari Seseorang dan material ini berbentuk mentahan jadi harus disesuaikan lagi terutama pada CSSnya.

Cara meng-install.

  • Pasang Swiper js dan Swiper Css dan letakan di atas </head> 

    <!-- Link Swiper's CSS -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css' rel='stylesheet'>
<!-- Swiper JS -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js'></script>

  • Setelah itu, salin kode ini dan letakan di dalam <b:skin><![CDATA[...]]></b:skin> jika menggunakan Blogger 

    .slider_Manga_Reader{}
.slider_Manga_Reader .box_item{position:relative;overflow:hidden;background:#20152d;padding-bottom:35%}
.slider_Manga_Reader .box_item .bg_item{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;opacity:.4}
.slider_Manga_Reader .box_item .bg_item img{position:absolute;object-fit:cover;width:120%;height:120%;top:-10%;left:-10%;opacity:1;filter:blur(8px)}
.slider_Manga_Reader .box_item .poster_item{position:absolute;top:-130px;left:650px;width:400px;transform:scale(1.2)}
.swiper-fade .swiper-slide-active .poster_item{top:-100px;transform:scale(1)}
.slider_Manga_Reader .box_item .poster_item a{display:inline-block;transform:rotate(15deg);border:20px solid #fff;box-shadow:0 30px 30px rgba(0,0,0,.2);width:100%;padding-bottom:148%;position:relative;overflow:hidden;background:#eee}
.slider_Manga_Reader .box_item .poster_item img{position:absolute;width:100%;height:100%;object-fit:cover;top:0;left:0;right:0;bottom:0}
.slider_Manga_Reader .box_item .content_item{max-width:600px;width:100%;position:absolute;top:50%;transform:translateY(-50%);left:30px;z-index:3;color:#fff;padding:0 30px}
.slider_Manga_Reader .box_item .content_item .content_item_chapter{font-size:18px;line-height:1.3em;font-weight:600;margin-bottom:5px}
.slider_Manga_Reader .box_item .content_item .content_item_title{font-size:32px;line-height:1.3;font-weight:600;margin-bottom:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.slider_Manga_Reader .box_item .content_item .content_item_title a{color:#fff}
.slider_Manga_Reader .box_item .content_item .content_item_details{font-size:1em;display:block;font-weight:400;margin-bottom:30px}
.slider_Manga_Reader .box_item .content_item .content_item_details > *{margin-bottom:1em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.slider_Manga_Reader .box_item .content_item .content_item_details .content_item_details_genre span{display:inline-block;margin:0 3px 6px 0;border:1px solid rgba(255,255,255,.5);padding:.3rem .5rem;line-height:1;border-radius:.2rem;font-size:.8em}
.slider_Manga_Reader .box_item .content_item .content_item_buttons > *{display:inline-block;background:#fff;color:#111;font-weight:500;font-size:14px;line-height:40px;padding:0 20px;border-radius:4px}
.slider_Manga_Reader .box_item .content_item .content_item_buttons .content_item_buttons_read{background:#ffd702}
.boox_bt{position:absolute;bottom:40px;z-index:1;right:40px}
.swiper-button{display:flex;align-items:center;justify-content:center;background:#fff;color:#111;width:40px;height:40px;line-height:40px;border-radius:50%;font-size:16px;text-align:center;margin:0 5px;float:right;cursor:pointer}
.swiper-button svg{display:block;width:20px;height:20px}

@media only screen and (max-width: 900px) {
  .slider_Manga_Reader .box_item .content_item .content_item_chapter,.slider_Manga_Reader .box_item .content_item .content_item_details .content_item_details_genre{display:none}
  .slider_Manga_Reader .box_item .content_item{max-width:460px}
  .slider_Manga_Reader .box_item .poster_item{left:460px;transform:scale(1);top:-130px}
  .swiper-fade .swiper-slide-active .poster_item{transform:scale(1);top:-130px}
  .boox_bt{display:none}
}
@media only screen and (max-width: 768px) {
  .slider_Manga_Reader .box_item .poster_item{left:400px}
  .slider_Manga_Reader .box_item .content_item{max-width:400px}
  .slider_Manga_Reader .box_item .content_item .content_item_details{display:none}
}
@media only screen and (max-width: 540px) {
  .slider_Manga_Reader .box_item{padding-bottom:50%}
  .slider_Manga_Reader .box_item .content_item .content_item_title{font-size:18px;margin-bottom:.75rem}
  .slider_Manga_Reader .box_item .content_item .content_item_buttons > *{margin-top:5px;min-width:83px;line-height:30px;padding:0 10px;font-size:12px;text-align:center}
  .slider_Manga_Reader .box_item .poster_item a{border:10px solid #fff}
  .slider_Manga_Reader .box_item .content_item{max-width:250px;left:0}
  .slider_Manga_Reader .box_item .poster_item{width:210px;right:auto;left:250px;top:-35px!important;transform:scale(1)}
  .swiper-fade .swiper-slide-active .poster_item{top:-35px!important;transform:scale(1)}
}
@media only screen and (max-width: 320px) {
  .slider_Manga_Reader .box_item .poster_item{left:160px}
  .slider_Manga_Reader .box_item .content_item{max-width:200px}
}
  • Untuk kode HTML 
    <div class="swiper slider_Manga_Reader">
<div class="swiper-wrapper">
  <!-- Slides -->
  <div class="swiper-slide">
    <div class="box_item">
      <a href="#" class="bg_item">
        <img alt="#" height="787" width="500" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZHmViUObjAwPGznyGMzUe6FUnm5Q7ZFP4Q1D_JN74NDEZkxeRyX0zyn0My_6IqgWmM_w7epYcRoyPVRFv6aDiBraMFjiliYniyGjVF9Kv6_oieaYII9WZLSkWZKyyROmvVE0-l1tQeirATNTbIrbDqb49Ve4l4bPRxGHlYob1jlCShmdJb0ha9Y7WGg8/s1600/0044656ee05ca233329d179ac98801a9.jpg"/>
      </a>
      <div class="poster_item">
        <a href="#">
          <img alt="#" height="787" width="500" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZHmViUObjAwPGznyGMzUe6FUnm5Q7ZFP4Q1D_JN74NDEZkxeRyX0zyn0My_6IqgWmM_w7epYcRoyPVRFv6aDiBraMFjiliYniyGjVF9Kv6_oieaYII9WZLSkWZKyyROmvVE0-l1tQeirATNTbIrbDqb49Ve4l4bPRxGHlYob1jlCShmdJb0ha9Y7WGg8/s1600/0044656ee05ca233329d179ac98801a9.jpg"/>
        </a>
      </div>
      <div class="content_item">
        <div class="content_item_chapter">Chapter: 103 [EN]</div>
        <div class="content_item_title">
          <a title="Dragon Ball Super" href="#">Dragon Ball Super</a>
        </div>
        <div class="content_item_details">
          <div class="content_item_details_des">Reuniting the franchise's iconic characters, follows the aftermath of Goku's fierce battle with Majin Buu as he attempts to maintain earth's fragile peace.  (Source: AniDB)</div>
          <div class="content_item_details_genre">
            <span>Action</span><span>Comedy</span><span>Martial Arts</span><span>Shounen</span><span>Super Power</span>
          </div>
        </div>
        <div class="content_item_buttons">
          <a href="#" class="content_item_buttons_read">Read Now</a>
          <a href="#" class="content_item_buttons_view">View Info</a>
        </div>
      </div>
    </div>
  </div>
  <div class="swiper-slide">
    <div class="box_item">
      <a href="#" class="bg_item">
        <img alt="#" height="787" width="500" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5tSdDGT_qmq4WKiq_xq6lIGe1IILBpt6t-ltsv1NifheNtNiT3p9VZ0So1DDm5YHIgzC32UtYXgJ0CwLTVxw42sDr6iv33ICdcMpDv3nsXU-pP5KBgfAHqMTQREddM4na3XJ0m7E0zmih8g1-__wfv1y5QyWe4SPzQEEVRrpMk8TRUBDdSNe3kPLk3lY/s1600/2b81acfc5ad30cc046274d672bd643eb.jpg"/>
      </a>
      <div class="poster_item">
        <a href="#">
          <img alt="#" height="787" width="500" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5tSdDGT_qmq4WKiq_xq6lIGe1IILBpt6t-ltsv1NifheNtNiT3p9VZ0So1DDm5YHIgzC32UtYXgJ0CwLTVxw42sDr6iv33ICdcMpDv3nsXU-pP5KBgfAHqMTQREddM4na3XJ0m7E0zmih8g1-__wfv1y5QyWe4SPzQEEVRrpMk8TRUBDdSNe3kPLk3lY/s1600/2b81acfc5ad30cc046274d672bd643eb.jpg"/>
        </a>
      </div>
      <div class="content_item">
        <div class="content_item_chapter">Chapter: 103 [EN]</div>
        <div class="content_item_title">
          <a title="Blue Exorcist" href="#">Blue Exorcist</a>
        </div>
        <div class="content_item_details">
          <div class="content_item_details_des">After a fight with his foster father Shirou Fujimoto, Rin Okumura's life is transformed overnight when Rin is revealed to be the son of the demon lord Satan, king of the demonic realm of Gehenna. Soon...</div>
          <div class="content_item_details_genre">
            <span>Action</span><span>Comedy</span><span>Martial Arts</span><span>Shounen</span><span>Super Power</span>
          </div>
        </div>
        <div class="content_item_buttons">
          <a href="#" class="content_item_buttons_read">Read Now</a>
          <a href="#" class="content_item_buttons_view">View Info</a>
        </div>
      </div>
    </div>
  </div>
  <div class="swiper-slide">
    <div class="box_item">
      <a href="#" class="bg_item">
        <img alt="#" height="787" width="500" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUtvg9e04FP3dZlg9xUuC3NofgGeY8U-YGuuubymmxMSg64WEerDnBapf1BvynnkA3Ev5RroUNUShw-GXcb9oNUIU_unx0hbXzRCfBBpSThx3xG_YnzG6lCa7kx1efNsXLf_ci5PeXFXPdQvj18FQ4rNiS0j7Fesce5Ml1aZe-_g1s8rj6grUqvMevxRQ/s1600/71157caa0d251504b2999f9ceb45fc33.jpg"/>
      </a>
      <div class="poster_item">
        <a href="#">
          <img alt="#" height="787" width="500" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUtvg9e04FP3dZlg9xUuC3NofgGeY8U-YGuuubymmxMSg64WEerDnBapf1BvynnkA3Ev5RroUNUShw-GXcb9oNUIU_unx0hbXzRCfBBpSThx3xG_YnzG6lCa7kx1efNsXLf_ci5PeXFXPdQvj18FQ4rNiS0j7Fesce5Ml1aZe-_g1s8rj6grUqvMevxRQ/s1600/71157caa0d251504b2999f9ceb45fc33.jpg"/>
        </a>
      </div>
      <div class="content_item">
        <div class="content_item_chapter">Chapter: 103 [EN]</div>
        <div class="content_item_title">
          <a title="Dragon Ball Super" href="#">Komi Can't Communicate</a>
        </div>
        <div class="content_item_details">
          <div class="content_item_details_des">It's Shouko Komi's first day at the prestigious Itan Private High School, and she has already risen to the status of the school's Madonna. With long black hair and a tall, graceful appearance, she...</div>
          <div class="content_item_details_genre">
            <span>Action</span><span>Comedy</span><span>Martial Arts</span><span>Shounen</span><span>Super Power</span>
          </div>
        </div>
        <div class="content_item_buttons">
          <a href="#" class="content_item_buttons_read">Read Now</a>
          <a href="#" class="content_item_buttons_view">View Info</a>
        </div>
      </div>
    </div>
  </div>
  <div class="swiper-slide">
    <div class="box_item">
      <a href="#" class="bg_item">
        <img alt="#" height="787" width="500" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLmaduYckqYGZV8y6dGLWuL4frf4xflt_NkY9StTg_GWbFg960vAesFoysAlzpLOuqIXyQ_1CLAr-48QxGetPm4c1_F-X1byaM70VfKq7AQfp5S17704-OgAuox2SRj6rs3fIa0HVZQncZ06_cQj-7lP0eDiMeOnx5e2BfG-1MY599UNLjTMKjjN2ysOk/s1600/77ef441119b58b0e7549337543083dbe.jpg"/>
      </a>
      <div class="poster_item">
        <a href="#">
          <img alt="#" height="787" width="500" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLmaduYckqYGZV8y6dGLWuL4frf4xflt_NkY9StTg_GWbFg960vAesFoysAlzpLOuqIXyQ_1CLAr-48QxGetPm4c1_F-X1byaM70VfKq7AQfp5S17704-OgAuox2SRj6rs3fIa0HVZQncZ06_cQj-7lP0eDiMeOnx5e2BfG-1MY599UNLjTMKjjN2ysOk/s1600/77ef441119b58b0e7549337543083dbe.jpg"/>
        </a>
      </div>
      <div class="content_item">
        <div class="content_item_chapter">Chapter: 103 [EN]</div>
        <div class="content_item_title">
          <a title="Dragon Ball Super" href="#">One-Punch Man</a>
        </div>
        <div class="content_item_details">
          <div class="content_item_details_des">After rigorously training for three years, the ordinary Saitama has gained immense strength which allows him to take out anyone and anything with just one punch. He decides to put his new skill to...</div>
          <div class="content_item_details_genre">
            <span>Action</span><span>Comedy</span><span>Martial Arts</span><span>Shounen</span><span>Super Power</span>
          </div>
        </div>
        <div class="content_item_buttons">
          <a href="#" class="content_item_buttons_read">Read Now</a>
          <a href="#" class="content_item_buttons_view">View Info</a>
        </div>
      </div>
    </div>
  </div>
  <!-- End Post -->

</div>
<div class="boox_bt">
  <div class="swiper-button swiper-bt-prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg></div>
  <div class="swiper-button swiper-bt-next"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg></div>
</div>
</div>
  • Dan yang terakhir pasang kode javascript ini 
    var swiper = new Swiper(".slider_Manga_Reader", {
  effect: "fade",
  navigation: {
    nextEl: ".swiper-bt-next",
    prevEl: ".swiper-bt-prev",
  },
  loop: true,
  lazy: true,
});
  • Jika ingin menambahkan fungsi bisa baca Dokumentasi dari https://swiperjs.com
  • Letakkan di atas </body>
Referensi :
https://mangareader.to/home
https://swiperjs.com/
https://fontawesome.com/

Comments

  1. AdminMay 03, 2024

    not working bro

    ReplyDelete
    Replies
    1. YukineMay 03, 2024

      https://codepen.io/Berkas-Kita/full/GRLebjY

      Delete
  2. AdminMay 03, 2024

    can it automatically fetch content ?

    ReplyDelete
    Replies
    1. YukineMay 03, 2024

      Of course you can, but this is only raw material so it has to be processed again.

      Delete
  3. Baca komikMay 05, 2024

    Min bisa ga di buat pake blogger script dayat untuk seriesnya, bukan manual gitu

    ReplyDelete
  4. AdminMay 09, 2024

    can you please create a raw slider for anime also ?

    ReplyDelete