ads

Random Post Slider // Dragable + Wheels + SlideShow

Gambar
Pasang Style di atas tag </head>
Style.css : 
<b:if cond='data:view.isHomepage'>
<style>
#left-button{position: absolute;top: 50%;left: 0;transform: translate(0,-50%);background: #300cb0f0;border-radius: 0 8px 8px 0;padding: 8px;cursor: pointer;}
#right-button{position: absolute;top: 50%;right: 0;transform: translate(0,-50%);background: #300cb0f0;border-radius: 8px 0 0 8px;padding: 8px;cursor: pointer;}
#right-button svg,#left-button svg{stroke: white;width: 36px;height: 36px;position:relative;top:3px;}
#right-button,#left-button{display:none;}
#pxcSlide:hover #right-button,#pxcSlide:hover #left-button{display:block;}
.itemSlider {min-width: 210px;height: 100%;}
.dataItem img {width: 100%;height: 315px;border-radius: inherit;object-fit: cover;transition: transform .5s ease;}
.dataItem img,.dataItem a{-webkit-user-drag: none;-ms-user-drag: none;-moz-user-drag: none;user-drag: none;user-select: none;}
.dataItem {position: relative;}
.num {position: absolute;top: 0;left: 8px;background: #25008a;color: white;padding: 8px 10px;border-radius: 0 0 8px 8px;font-weight: 600;font-size: 16px;}
#slides {display: flex;overflow: hidden;scroll-behavior:smooth;gap: 10px;}
.active{cursor:grab;}
.ItemsTitle{font-weight:800;font-size:14px;padding: 8px;background:#0000008c;color:white;}
.dataItem div:not(.ItemsTitle):nth-child(1) {display: flex;align-items: center;overflow: hidden;border-radius: 8px;}
.itemSlider:hover .dataItem img {transform: scale(1.5);}
.itemSlider .dataItem a {position: absolute;bottom: 0;width:100%;}
@media screen and (max-width:720px){#slides{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}.itemSlider{scroll-snap-align:center}}

</style>
</b:if>
Pasang Slider di atas tag </body>.
Slider.Js : 
<b:if cond='data:view.isHomepage'>
<script>
$.ajax({
url: location.protocol + '//' + location.hostname +'/feeds/posts/default?orderby=published&alt=json-in-script&max-results=150',
type: 'get',
dataType: 'jsonp',
success: function(json) {
let target = [],
num = 1;
for(var i = 0;i<json.feed.entry.length;i++){
var key = {};
feeds = json.feed.entry[parseInt(Math.random() * json.feed.entry.length)];
key['title'] = feeds.title.$t;
for(var e = 0;e<feeds.link.length;e++){
key['href'] = feeds.link[e].href;
}
var imgs,
c = feeds.content.$t,
d=c.indexOf("<img"),
e=c.indexOf('src="',d),
f=c.indexOf('"',e+5),
g=c.substr(e+5,f-e-5);
imgs=-1!=d&&-1!=e&&-1!=f&&""!=g?g:"https://images.bizlaw.id/gbr_artikel/images-2_294.webp";
  
key['img'] = feeds.media$thumbnail != null ? feeds.media$thumbnail.url.replace(/s72-c/,'s500').replace(/s72-w400-h210-c/,'s500') : imgs;
target[i] = key;
}

var dupe = target.filter((tag, index, array) => array.findIndex(t => t.title == tag.title) == index);

for(var o=0;o<10;o++){
      $('#slides').append('<div class="itemSlider"><div class="dataItem"><div><img loading="lazy" src="'+dupe[o].img+'"  ondragstart="event.preventDefault();"/><div class="num">'+num+++'</div></div><a href="'+dupe[o].href+'"><div class="ItemsTitle">'+dupe[o].title+'</div></a></div></div>');
     }
},
error: function() {$('#slides').html('<strong>Error Getting Data!</strong>');}
});
const scrollContainer = document.getElementById("slides"),
  matchAuto = document.getElementById("pxcSlide");
function slideShow() {
    var container = $('.itemSlider').width(),
      matchWidth = scrollContainer.scrollLeft,
      widthMax = scrollContainer.scrollWidth;
  if((matchWidth+container)+700>=widthMax){
    scrollContainer.scrollLeft += -widthMax;
  }else{
    scrollContainer.scrollLeft += container;
  }
}
var slide = setInterval(slideShow, 2000);

matchAuto.addEventListener("mouseover", function(){ clearInterval(slide)});
matchAuto.addEventListener("touchstart", function(){ clearInterval(slide)});

matchAuto.addEventListener("mouseout", function(){ slide = setInterval(slideShow, 2000);});
matchAuto.addEventListener("touchend", function(){ slide = setInterval(slideShow, 2000);});
document.getElementById('right-button').addEventListener('click', function(e) {
  e.preventDefault();
  var container = $('.itemSlider').width(),
      matchWidth = scrollContainer.scrollLeft,
      widthMax = scrollContainer.scrollWidth;
  if((matchWidth+container)+700>=widthMax){
    scrollContainer.scrollLeft += -widthMax;
  }else{
    scrollContainer.scrollLeft += container;
  }
  });
document.getElementById('left-button').addEventListener('click', function(e) {
  e.preventDefault();
  var container = $('.itemSlider').width(),
      matchWidth = scrollContainer.scrollLeft,
      widthMax = scrollContainer.scrollWidth;
  if(matchWidth==0){
    scrollContainer.scrollLeft += widthMax;
  }else{
    scrollContainer.scrollLeft += -container;
  }
  });
if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){

scrollContainer.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;
});
let isDown = false;
let startX;
let scrollLeft;
const slider = document.querySelector('.slides');
const end = (e) => {
	isDown = false;
  slider.classList.remove('active');
}

const start = (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX || e.touches[0].pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;	
}

const move = (e) => {
	if(!isDown) return;
  e.preventDefault();
  const x = e.pageX || e.touches[0].pageX - slider.offsetLeft;
  const dist = (x - startX);
  slider.scrollLeft = scrollLeft - dist;
}

(() => {
	slider.addEventListener('mousedown', start);
	slider.addEventListener('touchstart', start);
  
	slider.addEventListener('mousemove', move);
	slider.addEventListener('touchmove', move);

	slider.addEventListener('mouseleave', end);
	slider.addEventListener('mouseup', end);
	slider.addEventListener('touchend', end);
})();
}
</script>
</b:if>
Slider.js [Updated FIX Issue Violets Malware By Blogger Bot Detector] : 
let limitSlider = 10;
$.ajax({
url: location.protocol + '//' + location.hostname +'/feeds/posts/default?orderby=published&alt=json-in-script&max-results=150',
dataType: 'jsonp',
success: function(json) {
let num = 0;
const key = {};
for(var i = 0;i<json.feed.entry.length;i++){
feeds = json.feed.entry[parseInt(Math.random() * json.feed.entry.length)];
if(key[feeds.id.$t] == null || key[feeds.id.$t] == ''){
if(num < limitSlider){
key[feeds.id.$t] = true;
const title = feeds.title.$t,
href = feeds.link[feeds.link.length - 1].href,
c = feeds.content.$t,
d=c.indexOf("<img"),
e=c.indexOf('src="',d),
f=c.indexOf('"',e+5),
g=c.substr(e+5,f-e-5),
imgs=-1!=d&&-1!=e&&-1!=f&&""!=g?g:"https://images.bizlaw.id/gbr_artikel/images-2_294.webp",
thumb = feeds.media$thumbnail != null ? feeds.media$thumbnail.url.replace(/s72-c/,'s500').replace(/s72-w400-h210-c/,'s500') : imgs;

$('#slides').append(`<div class="itemSlider"><div class="dataItem"><div><img loading="lazy" src="${thumb}"  ondragstart="event.preventDefault();"/><div class="num">${num += 1}</div></div><a href="${href}"><div class="ItemsTitle">${title}</div></a></div></div>`);
}
}}},
error: function() {$('#slides').html('<strong>Error Getting Data!</strong>');}
});

const scrollContainer = document.getElementById("slides"),
  matchAuto = document.getElementById("pxcSlide");
function slideShow() {
    var container = $('.itemSlider').width(),
      matchWidth = scrollContainer.scrollLeft,
      widthMax = scrollContainer.scrollWidth;
 document.getElementById('indicator').innerHTML = `matchWidth : ${matchWidth} // widthMax : ${widthMax} // container : ${$('.itemSlider').outerWidth()}`;
          document.getElementById('indicator2').innerHTML = `Total Matching If ${(matchWidth+container)+($('#pxcSlide').outerWidth()-container)} < ${widthMax} == ${(matchWidth+container)+($('#pxcSlide').outerWidth()-container)>=widthMax}`;
  if((matchWidth+container)+($('#pxcSlide').outerWidth()-container)>=widthMax){
    scrollContainer.scrollLeft += -widthMax;
  }else{
    scrollContainer.scrollLeft += container;
  }
}
var slide = setInterval(slideShow, 2000);

matchAuto.addEventListener("mouseover", function(){ clearInterval(slide)});
matchAuto.addEventListener("touchstart", function(){ clearInterval(slide)});

matchAuto.addEventListener("mouseout", function(){ slide = setInterval(slideShow, 2000);});
matchAuto.addEventListener("touchend", function(){ slide = setInterval(slideShow, 2000);});
document.getElementById('right-button').addEventListener('click', function(e) {
  e.preventDefault();
  var container = $('.itemSlider').width(),
      matchWidth = scrollContainer.scrollLeft,
      widthMax = scrollContainer.scrollWidth;
 document.getElementById('indicator').innerHTML = `matchWidth : ${matchWidth} // widthMax : ${widthMax} // container : ${container}`;
          document.getElementById('indicator2').innerHTML = `Total Matching If ${(matchWidth+container)+($('#pxcSlide').outerWidth()-container)} < ${widthMax} == ${(matchWidth+container)+($('#pxcSlide').outerWidth()-container)>=widthMax}`;
  if((matchWidth+container)+($('#pxcSlide').outerWidth()-container)>=widthMax){
    scrollContainer.scrollLeft += -widthMax;
  }else{
    scrollContainer.scrollLeft += container;
  }
  });
document.getElementById('left-button').addEventListener('click', function(e) {
  e.preventDefault();
  var container = $('.itemSlider').width(),
      matchWidth = scrollContainer.scrollLeft,
      widthMax = scrollContainer.scrollWidth;
  if(matchWidth==0){
    scrollContainer.scrollLeft += widthMax;
  }else{
    scrollContainer.scrollLeft += -container;
  }
  });
if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){

scrollContainer.addEventListener("wheel", (evt) => {
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;
});
let isDown = false;
let startX;
let scrollLeft;
const slider = document.querySelector('.slides');
const end = (e) => {
	isDown = false;
  slider.classList.remove('active');
}

const start = (e) => {
  isDown = true;
  slider.classList.add('active');
  startX = e.pageX || e.touches[0].pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;	
}

const move = (e) => {
	if(!isDown) return;
  e.preventDefault();
  const x = e.pageX || e.touches[0].pageX - slider.offsetLeft;
  const dist = (x - startX);
  slider.scrollLeft = scrollLeft - dist;
}

(() => {
	slider.addEventListener('mousedown', start);
	slider.addEventListener('touchstart', start);
  
	slider.addEventListener('mousemove', move);
	slider.addEventListener('touchmove', move);

	slider.addEventListener('mouseleave', end);
	slider.addEventListener('mouseup', end);
	slider.addEventListener('touchend', end);
})();
}
Pasang Markup Pemanggil di tempat yg diinginkan.
HTML Markup : 
<b:if cond='data:view.isHomepage'>
<div id='pxcSlide'>
<div id='slides' class='slides'></div>
<div id='left-button'><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-narrow-left" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="5" y1="12" x2="19" y2="12" /><line x1="5" y1="12" x2="9" y2="16" /><line x1="5" y1="12" x2="9" y2="8" />
</svg></div>
<div id='right-button'><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-narrow-right" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="5" y1="12" x2="19" y2="12" /><line x1="15" y1="16" x2="19" y2="12" /><line x1="15" y1="8" x2="19" y2="12" />
</svg></div>
</div>
</b:if>
Catatan : - ubah URL Gambar (Jika Post gada gambar) Cari di Slider.js url dibawah ini dan ganti dengan Url Image not Found Kalian. 
https://images.bizlaw.id/gbr_artikel/images-2_294.webp
- Mengatur Jumlah Slider Cari Script dibawah yg terdapat pada Slider.js,kalian Ubah angak "10" dengan jumlah yg ingin kalian tampilkan 
for(var o=0;o<10;o++){
      $('#slides').append('<div class="itemSlider"><div class="dataItem"><div><img loading="lazy" src="'+dupe[o].img+'"  ondragstart="event.preventDefault();"/><div class="num">'+num+++'</div></div><a href="'+dupe[o].href+'"><div class="ItemsTitle">'+dupe[o].title+'</div></a></div></div>');
     }
- Mengatur Kecepatan SlideShow.Kalian Cari script dibawah yg terdapat di Slider.js Ubah "2000" Menjadi suka2 kalian.Perlu di ingat ini Milidetik jadi 2000 = 2detik.ada 3 code kalian cari 1-1. 
var slide = setInterval(slideShow, 2000);
matchAuto.addEventListener("mouseout", function(){ slide = setInterval(slideShow, 2000);});
matchAuto.addEventListener("touchend", function(){ slide = setInterval(slideShow, 2000);});

Cara Menggunakan Source Code

CSS tempat nya di dalam tag <style> atau <b:skin>. Contoh: 

<style>
  /* CSS tempel di sini */
</style>
Javascript biasa nya di letakkan di atas tag </body> Contoh: 

<script type='text/javascript'>/*<![CDATA[*/
  //Tempel Disini Script nya.
/*]]>*/</script>
</body>
HTML terserah mau pasang di mana. mau di template atau postingan terserah.
0
Langganan: Posting Komentar (Atom)