Slider libary swiper auto

Labels:
check Demo: Demo
Video Thumbnail
Tutorial 

<div class="widget-content relativeSlider">
<!-- Link Swiper's CSS -->
    <link href='https://cdn.jsdelivr.net/gh/MagicReincarnation/hosting-js-hirutshuji@main/All%20libary/swiperV11/swiper-bundle.min.css' rel='stylesheet'/>
<style>
	.relativeSlider{
    position: relative;
    height: max-content;}
    
        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            width: 100%;
            height: 35vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 10px;
        }

        @media (min-width: 1024px) {
            .swiper-slide {
                height: 50vh;
            }
        }
        .overlay11 {
            background: linear-gradient(0deg, #0a0a0a 4%, #0a0a0a33 40%);
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .summary-title {
            margin: 0;
        }

        .mini-content {
            display: flex;
            column-gap: 1rem;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            align-items: center;
        }

        .mini-content-box {}
        @media (min-width: 768px) {
            .mini-content-box {
                grid-column: span 2/span 2;
            }
        }

        .mini-img img {
            object-fit: cover;
            border-radius: 10px;
            height: 159px;
        }

.summary-content {
    width:100%;
    background: #0009;
    padding: 10px;
    border-radius: 5px;
    height: auto;
}
.summary-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.summary-content a{
    text-decoration: none;
    color: #fff;
    cursor: pointer;
}
.summary-genre {
    color: #fff;
}
.summary-text {
    color: #fff;
}   .summary-title {
                font-size: 1.2rem;
                line-height: 1.2rem;
                font-weight: 500;
            }

            .summary-genre {
                font-size: .6rem;
                font-weight: 400;
            }

            .summary-text {
                font-size: .8rem;
                margin: .5rem
                font-weight: 400;
            }
            
        @media (max-width: 840px) {
            .summary-title {
                font-size: 1.2rem;
                line-height: 1.2rem;
                font-weight: 500;
            }

            .summary-genre {
                font-size: .6rem;
                font-weight: 400;
            }

            .summary-text {
                font-size: .8rem;
                margin: .5rem
                font-weight: 400;
            }
        }

/* Styling for pagination */
        .swiper-pagination {
            position: absolute;
            bottom: 20px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .swiper-pagination .swiper-pagination-progressbar {
            background-color: red;
            height: 4px; /* Adjust height as needed */
            width: 70%; /* Adjust width as needed */
            border-radius: 10px;
        }
    </style>



    <div class="swiper-container swiper-initialized swiper-horizontal swiper-android swiper-backface-hidden">
        <div class="swiper-wrapper" id="swiper-wrapper-bb755a827056bbf4" aria-live="polite">                            
        </div>
        <!-- If you need pagination -->
        <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1" aria-current="true"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span></div>
    <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
    
    
    
<!-- Swiper JS -->
    <script src='https://cdn.jsdelivr.net/gh/MagicReincarnation/hosting-js-hirutshuji@main/All%20libary/swiperV11/swiper-bundle.min.js'/>
    <!-- Initialize Swiper.js -->
<script>
  function runSlider() {
 var swiper = new Swiper('.swiper-container', {
        slidesPerView: 'auto',
        spaceBetween: 30,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
    });
 }
</script>
    
    <script>
    var startIndex = 1;
    var maxResults = 150;
    var useTimeAgo = true;
    var maxLength = 200;
    var allowedLabels = ["Action", "Adventure", "Comedy", "Drama", "Fantasy", "Harem", "Isekai","Reincarnation"];
    var resolution = "mediumv1";
    //mediumv1,mediumv2,lowv1,lowv2,high
    
function runScriptPost() {
    var scpt = document.createElement("script");
    scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
    document.body.appendChild(scpt);
}

function processPostList12(root) {  
    var elmt = document.getElementById("swiper-wrapper-bb755a827056bbf4");
if (!elmt)
return;

    var feed = root.feed;
    if (feed.entry.length > 0) {
        for (var i = 0; i < feed.entry.length; i++) {
            var entry = feed.entry[i];
            var labels = entry.category.map(category => category.term);
            
            if (labels.includes("Series") && postLabel(labels)) {
                var title = entry.title.$t;
                var date = entry.published.$t;
                var summary = entry.summary.$t;
                var imageUrl = entry.media$thumbnail.url;
                
var filteredLabels = labels.filter(label => allowedLabels.includes(label));
var labelsString = filteredLabels.map(label => `<a href="/search/label/${label}?" title="${label}">${label}</a>`).join(", ");

if (summary.length > maxLength) {
    var lastSpaceIndex = summary.lastIndexOf(" ", maxLength);
    if (lastSpaceIndex !== -1) {
        summaryx = summary.substring(0, lastSpaceIndex) + "...";
    } else {
        summaryx = summary.substring(0, maxLength) + "...";
    }
}
 
             

var imageResolution = ImageResolution(resolution);

var imageUrlx = imageUrl.replace("/s72-c/", "/" + imageResolution + "-c/");

                
var formattedDate = formatDate(date);

var chapterLabel = LabelCh(labels);
                
                elmt.innerHTML += `<div class="swiper-slide" role="group" style="background-image: url('${imageUrlx}');">
<div class="overlay11">
<div class="mini-content">
<a href="${entry.link[4].href}" title="${title}" class="mini-content-box">
<div class="mini-img">
<img src="${imageUrlx}" alt="${title}" class="object-cover rounded shadow-lg"/>
                            </div>
                        </a>

<div class="summary-content">
<a href="${entry.link[4].href}" title="${title}">
<h2 class="summary-title">${title}</h2>
                            </a>
                            
<div class="summary-genre">
<p>Chapter: ${chapterLabel}</p>
<p>Date: ${formattedDate}</p>
<p>Labels: ${labelsString}</p>
</div>
<div class="summary-text">
<p class="text-200">${summaryx}</p>
</div>
                        </div>
                    </div>
                </div>
            </div>
`;
                  

           }
        }
          runSlider();         
/*if (feed.entry.length >= maxResults) {
            startIndex += maxResults;
            runScriptPost(); 
            runSlider();    
        }*/
        
    }
    
}
function postLabel(labels) {
    return labels.includes("Update");
}

function LabelCh(labels) {
    // Cari label Chapter regex angka
    var chapterLabel = labels.find(label => {
        var match = label.match(/^Chapter ([\d.,\-\/]+)$/);
        return match ? match[1] : null;
    });
    return chapterLabel ? chapterLabel.replace(/^Chapter /, '') : "Unknown";
}


function ImageResolution(resolution) {
    switch (resolution) {
        case "lowv1":
            return "s200";
        case "lowv2":
            return "s400";
        case "mediumv1":
            return "s800";
        case "mediumv2":
            return "s1600";
        case "high":
            return "s0";
        default:
            return "unknown";
    }
}



function formatDate(dateString) {
  var date = new Date(dateString);
  if (useTimeAgo) {
    return timeAgo(date);
  } else {
    return date.toLocaleDateString(); // Format day/month/year
  }
}

function timeAgo(date) {
  var now = new Date();
  var seconds = Math.floor((now - date) / 1000);

  var interval = Math.floor(seconds / 31536000);

  if (interval > 1) {
    return interval + " years ago";
  }
  interval = Math.floor(seconds / 2592000);
  if (interval > 1) {
    return interval + " months ago";
  }
  interval = Math.floor(seconds / 86400);
  if (interval > 1) {
    return interval + " days ago";
  }
  interval = Math.floor(seconds / 3600);
  if (interval > 1) {
    return interval + " hours ago";
  }
  interval = Math.floor(seconds / 60);
  if (interval > 1) {
    return interval + " minutes ago";
  }
  return Math.floor(seconds) + " seconds ago";
}


    runScriptPost();
</script>
</div>


<div class='widget-content relativeSlider'>
<!-- Link Swiper's CSS -->
    <link href='https://unpkg.com/swiper/swiper-bundle.min.css' rel='stylesheet'/>
    <style>
	.relativeSlider{
    position: relative;
    height: max-content;
    overflow: hidden;}
    
   .swiper-container {
            width: 100%;
            height: 100%;
     }

        .swiper-slide {
            width: 100%;
            height: 35vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 10px;
        }

        @media (min-width: 1024px) {
            .swiper-slide {
                height: 50vh;
            }
        }
        .overlay11 {
            background: linear-gradient(0deg, #0a0a0a 4%, #0a0a0a33 40%);
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .summary-title {
            margin: 0;
        }

        .mini-content {
            display: flex;
            column-gap: 1rem;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            align-items: center;
        }

        .mini-content-box {}
        @media (min-width: 768px) {
            .mini-content-box {
                grid-column: span 2/span 2;
            }
        }

        .mini-img img {
            object-fit: cover;
            border-radius: 10px;
            height: 159px;
        }
.summary-content a{
    text-decoration: none;
    color: #fff;
    cursor: pointer;
}
.summary-genre {
    color: #fff;
}
.summary-text {
    color: #fff;
}

.summary-content {
    width:100%;
    background: #0009;
    padding: 10px;
    border-radius: 5px;
    height: auto;
}
.summary-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
             .summary-title {
                font-size: 1.0rem;
                line-height: 1.0rem;
                font-weight: 500;
            }

            .summary-genre {
                font-size: 0.6rem;
                font-weight: 500;
                margin-top:20px;
            }

            .summary-text {
                font-size: 0.6rem;
                margin: .5rem
                font-weight: 400;
            }
            
        @media (max-width: 840px) {
            .summary-title {
                font-size: 1.0rem;
                line-height: 1.0rem;
                font-weight: 600;
            }

            .summary-genre {
                font-size: .6rem;
                font-weight: 600;
            }

            .summary-text {
                font-size: .6rem;
                margin: .5rem
                font-weight: 600;
            }
        }

/* Styling for pagination */
        .swiper-pagination {
            position: absolute;
            bottom: 20px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .swiper-pagination .swiper-pagination-progressbar {
            background-color: red;
            height: 4px; /* Adjust height as needed */
            width: 70%; /* Adjust width as needed */
            border-radius: 10px;
        }
    </style>



    <div class='swiper-container'>
        <div class='swiper-wrapper sliderProject'>                            
        </div>
<div class='swiper-pagination'/>
    </div>
    
    <!-- Swiper JS -->
    <script src='https://unpkg.com/swiper/swiper-bundle.min.js'/>
 <script>
      /*<![CDATA[*/
    var startIndex = 1;
    var maxResults = 12;
    var useTimeAgo = false;
    var maxLength = 100;
    var projectlabel = "Series";
    var LabelUtama = "Update";
    var allowedLabels = ["Ongoing", "Completed"];
    var resolution = "mediumv1";   //mediumv1,mediumv2,lowv1,lowv2,high
 

function runScriptPost() {
    var scpt = document.createElement("script");
    scpt.src = `/feeds/posts/summary/-/${projectlabel}?alt=json&callback=processPostList12&start-index=${startIndex}&max-results=${maxResults}`;
    document.body.appendChild(scpt);
}

function processPostList12(root) {  
  var elmt = document.querySelector(".sliderProject");
if (!elmt) 
return;

    var feed = root.feed;
if (feed.entry.length > 0) {
for (var i = 0; i < feed.entry.length; i++) {
     var entry = feed.entry[i];
     var labels = entry.category.map(category => category.term);
          
if (labels.includes(LabelUtama)) {
            
 var title = entry.title.$t;
                var date = entry.published.$t;
                var summary = entry.summary.$t;
                var imageUrl = entry.media$thumbnail.url;
                
var filteredLabels = labels.filter(label => allowedLabels.includes(label));
var labelsString = filteredLabels.map(label => `<a href="/search/label/${label}?" title="${label}">${label}</a>`).join(", ");

if (summary.length > maxLength) {
    var lastSpaceIndex = summary.lastIndexOf(" ", maxLength);
    if (lastSpaceIndex !== -1) {
        summaryx = summary.substring(0, lastSpaceIndex) + "...";
    } else {
        summaryx = summary.substring(0, maxLength) + "...";
    }
}
 
             

var imageResolution = ImageResolution(resolution);

var imageUrlx = imageUrl.replace("/s72-c/", "/" + imageResolution + "-c/");

                
var formattedDate = formatDate(date);

var chapterLabel = LabelCh(labels);
elmt.innerHTML += `<div class="swiper-slide" style="background-image: url('${imageUrlx}');">
<div class="overlay11">
<div class="mini-content">
<a href="${entry.link[4].href}" title="${title}" class="mini-content-box">
<div class="mini-img">
<img src="${imageUrlx}" alt="${title}" class="object-cover rounded shadow-lg"/>
                            </div>
                        </a>

<div class="summary-content">
<a href="${entry.link[4].href}" title="${title}">
<h2 class="summary-title">${title}</h2>
                            </a>
                            
<div class="summary-genre">
<p>Chapter: ${chapterLabel}</p>
<p>Release: ${formattedDate}</p>
<p>Labels: ${labelsString}</p>
</div>
<div class="summary-text">
<b class="text-200">Sinopsis:</b>
<p class="text-200">${summaryx}</p>
</div>
</div>
                    </div>
                </div>
            </div>`;
           }
        }   
     }
 }

function LabelCh(labels) {
    var chapterLabel = labels.find(label => {
        var match = label.match(/^Chapter ([\d.,\-\/]+)$/);
   return match ? match[1] : null;
    });
return chapterLabel ? chapterLabel.replace(/^Chapter /, '') : "";
}

function ImageResolution(resolution) {
    switch (resolution) {
        case "lowv1":
            return "s200";
        case "lowv2":
            return "s400";
        case "mediumv1":
            return "s800";
        case "mediumv2":
            return "s1600";
        case "high":
            return "s0";
        default:
            return "unknown";
    }
}



function formatDate(dateString) {
  var date = new Date(dateString);
  if (useTimeAgo) {
    return timeAgo(date);
  } else {
    return date.toLocaleDateString();   }
}

function timeAgo(date) {
  var now = new Date();
  var seconds = Math.floor((now - date) / 1000);

  var interval = Math.floor(seconds / 31536000);

  if (interval > 1) {
    return interval + " years ago";
  }
  interval = Math.floor(seconds / 2592000);
  if (interval > 1) {
    return interval + " months ago";
  }
  interval = Math.floor(seconds / 86400);
  if (interval > 1) {
    return interval + " days ago";
  }
  interval = Math.floor(seconds / 3600);
  if (interval > 1) {
    return interval + " hours ago";
  }
  interval = Math.floor(seconds / 60);
  if (interval > 1) {
    return interval + " minutes ago";
  }
  return Math.floor(seconds) + " seconds ago"; }

runScriptPost();
/*]]>*/
</script>
   
    <!-- Initialize Swiper.js -->
 <script>
 /*<![CDATA[*/
 function runSlider() {
 var swiper = new Swiper('.swiper-container', {
        slidesPerView: 'auto',
        spaceBetween: 30,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
    });
 } 
window.addEventListener("load", (event) => {
runSlider(); 
  console.log("page is fully loaded");
});
/*]]>*/
</script>
</div>

Support Jika kalian suka

Trakteer Mau kodenya!

bingung cara pasangnya?

tanya admin langsung, ke group/komen aja dibawah

Group Telegram

Posting Komentar:

2 Komentar

  1. #Question...
    Anonymous
    Anonim
    Member
    Bro the slider does not show up on my site when I copy and paste it into layout
    delete Balas
  2. #Reply... Anonim
    MAGIC Reincarnated
    MAGIC Reincarnated
    Admin
    I've added a video tutorial, don't put it directly in the layout.
    delete Balas
Tinggalkan komentar Jika suka dengan kontent ini
Masukkan URL Gambar (imgbb) / (im.ge) atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code