أضافة سلايدر شو أحترافي شريحة واحدة متحرك لقوالب بلوجر

تركيب سلايدرشو أحترافي متحرك لقالب بلوجر

تركيب سلايدر شو لقوالب بلوجر

شرح أضافة الأكواد الخاصة بالسلايدر شو

<b:section class='homeslider' id='HomeSlider' maxwidgets='1' showaddelement='no'>
  <b:widget id='HTML18' locked='true' title='سلايدر المواضيع' type='HTML' version='2' visible='true'>
    <b:widget-settings>
      <b:widget-setting name='content'><![CDATA[<!-- mode:random -->]]></b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>

      <style>
        #imageslider{width:100%;margin:0 auto 20px;overflow:hidden;position:relative;direction:rtl}
        .slider-wrap{position:relative;width:100%;padding-top:56.25%;overflow:hidden}
        .slider-track{position:absolute;top:0;right:0;height:100%;display:flex;transition:transform .6s ease}
        .slide{min-width:100%;height:100%;position:relative}
        .slide img{width:100%;height:100%;object-fit:cover}
        .slide-info{position:absolute;bottom:0;width:100%;padding:70px 15px 20px;color:#fff;text-align:center;background:linear-gradient(to top,#000,transparent)}
        .post-label{position:absolute;top:25px;right:25px;background:#0066ff;color:#fff;padding:6px 16px;font-size:13px;font-weight:600;border-radius:4px;z-index:5;box-shadow:0 2px 6px rgba(0,0,0,.3);white-space:nowrap}
        #imageslider button{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:#fff;opacity:.75;font-size:20px;cursor:pointer;z-index:10}
        .prev{left:15px}
        .next{right:15px}
        #imageslider .slide img{transition:all .6s ease-in-out}
        #imageslider .slide:hover img{filter:brightness(80%);transform:scale(1.05)}
        .slide-info b{font-size:22px;line-height:36px}
        .meta{margin-top:16px;display:flex;justify-content:center;gap:15px;font-size:14px;opacity:.85}
        .meta span{display:flex;align-items:center;gap:5px}
      </style>

      <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <div id='imageslider'>
          <div class='slider-wrap'>
            <div class='slider-track'/>
          </div>
          <button class='next'>&#10094;</button>
          <button class='prev'>&#10095;</button>
        </div>
      </b:if>

<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function () {

  const MODE = "recent"; // recent | random
  const LIMIT = 10;
  const AUTO_TIME = 4000;

  fetch("/feeds/posts/default?alt=json&max-results=20")
    .then(res => res.json())
    .then(data => {

      let posts = data.feed.entry || [];
      const track = document.querySelector(".slider-track");
      if (!track || posts.length === 0) return;

      if (MODE === "random") posts.sort(() => 0.5 - Math.random());

      posts.slice(0, LIMIT).forEach(post => {

        const title = post.title.$t;
        const linkObj = post.link.find(l => l.rel === "alternate");
        const link = linkObj ? linkObj.href : "#";
        const content = post.content ? post.content.$t : "";
        const imgMatch = content.match(/<img.*?src="(.*?)"/i);
        let imgSrc = imgMatch ? imgMatch[1] : "https://via.placeholder.com/1600x900";
        imgSrc = imgSrc.replace(/\/s\d+-c/, "/s1600").split("?")[0];

        const label = post.category && post.category.length ? post.category[0].term : "عام";
        const author = post.author && post.author.length ? post.author[0].name.$t : "";
        const date = post.published ? new Date(post.published.$t).toLocaleDateString('ar',{year:'numeric',month:'long',day:'numeric'}) : "";

        const slide = document.createElement("div");
        slide.className = "slide";
        slide.innerHTML = `
          <a href="${link}">
            <span class="post-label">${label}</span>
            <img src="${imgSrc}" alt="${title}">
            <div class="slide-info">
              <b>${title}</b>
              <div class="meta">
                <span>${author}</span>
                <span>${date}</span>
              </div>
            </div>
          </a>
        `;
        track.appendChild(slide);
      });

      track.appendChild(track.children[0].cloneNode(true));
      initSlider();
    });

  function initSlider() {

    const slider = document.getElementById("imageslider");
    const track  = document.querySelector(".slider-track");
    const slides = document.querySelectorAll(".slide");
    const next   = document.querySelector(".next");
    const prev   = document.querySelector(".prev");

    let index = 0;
    let moving = false;
    let auto;

    function move(i) {
      if (moving) return;
      moving = true;
      track.style.transition = "transform .6s ease";
      track.style.transform = `translateX(${i * 100}%)`;

      setTimeout(() => {
        if (i === slides.length - 1) {
          track.style.transition = "none";
          index = 0;
          track.style.transform = "translateX(0)";
        }
        moving = false;
      }, 600);
    }

    function startAuto() {
      auto = setInterval(() => {
        index++;
        move(index);
      }, AUTO_TIME);
    }

    function stopAuto() {
      clearInterval(auto);
    }

    next.onclick = () => {
      stopAuto();
      index++;
      move(index);
      startAuto();
    };

    prev.onclick = () => {
      stopAuto();
      if (index === 0) {
        track.style.transition = "none";
        index = slides.length - 1;
        track.style.transform = `translateX(${index * 100}%)`;
      }
      setTimeout(() => {
        index--;
        move(index);
      }, 20);
      startAuto();
    };

    slider.addEventListener("mouseenter", stopAuto);
    slider.addEventListener("mouseleave", startAuto);

    startAuto();
  }

});
//]]>
</script>


    </b:includable>
  </b:widget>
</b:section>

التعديلات