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
  5. AdminJune 20, 2024

    hey min , i tried auto fetch script but it is not working . can you please help me with that ?

    Code : https://codepen.io/Jay-Tiwari-the-flexboxer/pen/gOJeOVG

    ReplyDelete
    Replies
    1. YukineJune 20, 2024

      First of all, have you mastered the basics of JavaScript? At first glance, I see that you haven't installed Swiper JS and Swiper CSS, have you read the Swiper Slider guide? because the html structure is not correct. on https://YOUR_BLOG_URL which blog did you go to? You use ?alt=rss to retrieve the data, I don't know how to implement it, I often use ?alt=json because it is the most commonly used.

      Delete
    2. AdminJune 22, 2024

      for the javascript , i am still learning it min also for the swiper js and css , i have installed them and also added my url for the blog but then also it didn't fetched the slides brooo ..... can you please help with the javascript for this one because i think i should go for ?alt=json one .

      Delete
    3. AdminJune 22, 2024

      please check this out min (updated)

      Delete
    4. Baca komikJune 22, 2024

      this is https://codepen.io/ulbyokmr-the-animator/pen/NWVYmPY
      Just save it in the widget content
      the result is like this
      https://yondkomik.blogspot.com/

      Delete
    5. AdminJune 22, 2024

      ohh thankss min ... also i want to know one more thing

      Delete
  6. AdminJune 22, 2024

    how to make them appear side by side ? https://ibb.co/nwbT2Rn

    ReplyDelete
    Replies
    1. YukineJune 24, 2024

      just apply it inside the html tag

      Delete