Иногда нужен простой слайдер БЕЗ jQuery, который бы просто пролистывал слайды, без всяких «наворотов», кучи мусорных функций и макаронакода. Именно такой слайдер представлен на данной странице.
DEMO
JS:
//Micro slider
const d=document;//для удобства document сделаем d
function s(e){return d.querySelector(e)}//функция выбора одного элемента
function a(e){return d.querySelectorAll(e)}//функция выбора всех элементов
const obs={};//объект для слайдера
obs.sld=s(".micro-slider");//div со слайдами
obs.sldAll=a(".micro-slider .micro-slider-slide");//все слайды
obs.btnC=d.createElement("button");//создаем кнопку «следующий»
obs.btnC.innerHTML=`<span class="pa p0"></span>`;//добавим стрелочку >
obs.btnC.classList.add("micro-slider-btn","pa","z2");//добавим классы
s(".micro-slider-main").appendChild(obs.btnC);//встроим кнопку в HTML
s(".micro-slider .micro-slider-slide").dataset.active=1;//сделаем первый слайд как бы активным
obs.btnC.addEventListener("click",()=>{//прослушивание нажатия на кнопку
obs.w=parseInt(getComputedStyle(s(".micro-slider .micro-slider-slide"), null).width.replace("px", ""));//узнаем ширину каждого слайда
obs.active=null;//создадим переменную для того, чтобы определять активный слайд
obs.sldAll.forEach((e,l)=>{//перебор всех слайдов
if(e.dataset&&e.dataset.active==1)obs.active=l;//узнаем какой слайд сейчас активный
e.dataset.active=0;//предыдущий активный слайд сбрасываем
});
if(obs.active+1==obs.sldAll.length)obs.active=-1;//если мы сейчас на последнем слайде, то делаем как бы активным первый
obs.sldAll[obs.active+1].dataset.active=1;//установим активный сейчас слайд
obs.sld.setAttribute("style",`transform:translateX(-${obs.w*(obs.active+1)}px)`);//перемещаем слайды
});
delete (bgo);//удаляем объект в надежде освободить оперативную память устройства
// \ Micro slider
CSS:
/*Test page*/
body{font:1rem/1.25rem -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans}
section{max-width: 666px;margin:0 auto}
.img{position:relative;overflow:hidden;displaye:flex;justify-content:center;align-items:center;width:230px;height:160px;background:dimgrey;border-radius:3px}
.img:after,.img:before{content:'';position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);width:35px;height:35px;border-radius:50%;background:#333}
.img:after{z-index:1;width:65px;height:75px;background:rebeccapurple;clip-path:polygon(50% 0,0 100%,100% 100%);top:80%}
/*\Test page*/
/*Needed for the script / Необходимо для отображения слайдера*/
.pr{position:relative}
.pa,.p0{position:absolute}
.z2{z-index:2}
.p0{top:0;right:0;left:0;bottom:0}
.fx{display:flex}
.ovh{overflow:hidden}
.an{transition:all .35s}
.micro-slider-slide{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.micro-slider .micro-slider-slide{min-width:100%;padding:.5rem .5rem .76rem 0;box-sizing:border-box}
.micro-slider-btn{position:absolute;z-index:2;top:auto;right:10px;bottom:0;padding:0;transform:translateY(-50%);background:linear-gradient(135deg,rgb(71,17,35)0%,rgba(71,17,35,0)70%),linear-gradient(25deg,rgb(151,11,215)10%,rgba(151,11,215,0)80%),linear-gradient(315deg,rgb(83,12,69)15%,rgba(83,12,69,0)80%),linear-gradient(245deg,rgb(10,115,210)100%,rgba(10,115,210,0)70%);border:0;outline:0;min-width:40px;width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 5px rgba(150,50,183,.47);transition:box-shadow linear 1s;
}
/*If You needed / если хотите, можете использовать данные стили, они не важны для слайдера*/
.micro-slider-slide h3{grid-column-start:2;grid-column-end:4;grid-row-start:1;grid-row-end:1}
.micro-slider-slide button.stBtn{grid-column-start:2;grid-column-end:4;grid-row-start:2;grid-row-end:2}
.img{grid-row-start:1;grid-row-end:3}
.micro-slider-btn:focus{box-shadow:0 0 0 7px #d929dc}
.micro-slider-btn span{top:50%;left:50%;width:13px;height:13px;border-radius:0 0 3px 0;box-shadow:2px 2px #fff;transform:translate(-70%,-50%)rotate(-45deg)}
/*\If You needed*/
/*\Needed for the script*/
HTML:
<div class="micro-slider-main ovh">
<div class="fx an micro-slider">
<div class=micro-slider-slide>
<div class="img"></div>
<h3><a href="#" rel="nofollow">Article 1</a></h3>
<button class="bcS tu stBtn" onclick="location.href='#'">Read More</button>
</div>
<div class=micro-slider-slide>
<div class="img"></div>
<h3><a href="#" rel="nofollow">Article 2</a></h3>
<button class="bcS tu stBtn" onclick="location.href='#'">Read More</button>
</div>
<div class=micro-slider-slide>
<div class="img"></div>
<h3><a href="#" rel="nofollow">Article 3</a></h3>
<button class="bcS tu stBtn" onclick="location.href='#'">Read More</button>
</div>
<div class=micro-slider-slide>
<div class="img"></div>
<h3><a href="#" rel="nofollow">Article 4</a></h3>
<button class="bcS tu stBtn" onclick="location.href='#'">Read More</button>
</div>
</div>
</div>
Важно соблюдать структуру HTML разметки. Слайдер умеет просто пролистывать слайды в одну сторону — кнопкой. Внутри каждого слайда может быть абсолютно любое содержимое. От текста, до видео или картинок...
