react-tech-slider/dist/index.js

Reusable React component slider for showcasing brands

import e from"react";const t=({brandsList:t,borderWidth:r=1,borderColor:d="#7c05d8",backgroundColor:i="#00000033",iconWidth:s,isPlay:a=!0,pauseOnHoverActive:o=!1,durationMs:n=3e4})=>e.createElement("div",{className:`wrapper ${a?"":"wrapper-paused"} ${o?"wrapper-paused-hover":""}`,style:{"--amount-brands":t.length,"--transition-slider-duration":n/1e3+"s",borderTop:`${r}px solid ${d}`,borderBottom:`${r}px solid ${d}`,backgroundColor:`${i}`}},t.map((({id:t,name:r,img:d,width:i,height:a,style:o,className:n},l)=>e.createElement("div",{key:t,className:`item item${t}`,style:{"--item":l+1}},e.createElement("img",{src:d,alt:`${r}-icon`,className:`brand-slider ${n??""}`,style:{...i||s?{width:`${i??s}rem`}:{},...a?{height:`${a}rem`}:{},...o},loading:"lazy"})))));if("undefined"!=typeof document){if(!document.querySelector('link[href*="react-tech-slider/dist/index.css"]')){const e=document.createElement("link");e.rel="stylesheet",e.href="https://unpkg.com/react-tech-slider@latest/dist/index.css",document.head.appendChild(e)}}export{t as Slider};