سلايدر صور خفيف وسهل الإستخدام

 السلايدرات بشكل عام لا تعتبر من التقنيات الخفيفه , لكن هذا السلايدر خفيف جداً يمكنك أن تستخدمه بدون أى قلق والفيصل في الحجم سيكون الصور التي ستضيفها لكن برمجياته في ذاتها خفيفة

<style>
#imageslider{width:100%;margin:0 auto 20px;background-color:#fff;height:500px;overflow:hidden;position:relative;}
@keyframes imageslider-key-next{0%{left:100%;}100%{left:0;}}
@keyframes imageslider-key-left{0%{left:0;}100%{left:-100%;}}
@keyframes imageslider-key-previous{0%{left:-100%;}100%{left:0;}}
@keyframes imageslider-key-right{0%{left:0;}100%{left:100%;}}
#imageslider > div,#imageslider li{list-style:none;margin:unset;padding:unset;}
#imageslider li::before,#imageslider li::after{display:none;}
#imageslider > div > div{position:absolute;left:100%;top:0;width:100%;height:100%;visibility:hidden;animation-timing-function:ease-in-out;animation-fill-mode:forwards;}
#imageslider > div > div.active{visibility:visible;left:0;}
#imageslider > div > div.left{animation-name:imageslider-key-left;}
#imageslider > div > div.next{animation-name:imageslider-key-next;}
#imageslider > div > div.right{animation-name:imageslider-key-right;}
#imageslider > div > div.previous{animation-name:imageslider-key-previous;}
#imageslider > div > div a{margin:0!important;padding:0!important;display:block;width:100%;height:100%;}
#imageslider > div > div img{display:block;height:100% !important;width:100% !important;max-width:100% !important;}
#imageslider > div > div b{position:absolute;bottom:0;font-weight:normal;color:#fff;padding:180px 10px 30px;box-sizing:border-box;width:100%;text-align:center;background:rgba(0,0,0,0) linear-gradient(to top,#000 0,rgba(0,0,0,0) 100%) repeat scroll 0 0;font-size:120%;}
#imageslider button{position:absolute;top:calc(50% - 24px);border:0;background-color:#fff;opacity:.7;width:48px;cursor:pointer;height:48px;line-height:48px;font-size:24px;border-radius:100%;transition:all .4s ease;color:#000;}
#imageslider button:hover{opacity:1;}
.BTlef{left:10px;}
.BTRig{right:10px;}
@media screen and (max-width : 600px) {#imageslider{height:300px;}}
@media screen and (max-width : 400px) {#imageslider{height:260px;}} 
</style>


<div id="imageslider">
<div>


<!--بداية صورة-->
<div>
<a href="#" target="_blank">
<img src="*">
<b>العنوان الظاهر على الصورة</b>
</a>
</div>
<!--نهاية صورة-->


</div>

<button class="BTlef">❯</button>
<button class="BTRig">❮</button>
</div>


<script type="text/javascript">
//<![CDATA[
function imagesliders(o){"use strict";var time=o.time||500,autoTime=o.autoTime||5e3,selector=o.selector,width_height=o.width_height||100/70,imagesliders=document.querySelectorAll(selector),i;function css(elm,prop,val){elm.style[prop]=val;prop=prop[0].toUpperCase()+prop.slice(1);elm.style["webkit"+prop]=elm.style["moz"+prop]=elm.style["ms"+prop]=elm.style["o"+prop]=val}function anonimFunc(imageslider){var buttonLeft=imageslider.children[2],buttonRight=imageslider.children[1],ul=imageslider.children[0],li=ul.children,activeIndex=0,isAnimate=false,i,s;ul.style.paddingTop=100/width_height+"%";for(i=0;i<li.length;i+=1){css(li[i],"animationDuration",time+"ms")}li[activeIndex].classList.add("active");function left(){if(isAnimate){return}clearTimeout(s);isAnimate=true;var nextIndex=activeIndex<li.length-1?activeIndex+1:0;li[nextIndex].classList.add("next");li[activeIndex].classList.add("left");li[nextIndex].classList.add("active");setTimeout(function(){li[activeIndex].classList.remove("active");li[activeIndex].classList.remove("left");li[nextIndex].classList.remove("next");li[nextIndex].classList.add("active");activeIndex=nextIndex;isAnimate=false;s=setTimeout(left,autoTime)},time)}function right(){if(isAnimate){return}clearTimeout(s);isAnimate=true;var nextIndex=activeIndex>0?activeIndex-1:li.length-1;li[nextIndex].classList.add("previous");li[activeIndex].classList.add("right");li[nextIndex].classList.add("active");setTimeout(function(){li[activeIndex].classList.remove("active");li[activeIndex].classList.remove("right");li[nextIndex].classList.remove("previous");li[nextIndex].classList.add("active");activeIndex=nextIndex;isAnimate=false;s=setTimeout(right,autoTime)},time)}buttonLeft.addEventListener("click",left);buttonRight.addEventListener("click",right);s=setTimeout(right,autoTime)}for(i=0;i<imagesliders.length;i+=1){anonimFunc(imagesliders[i])}}
var imagesliders=new imagesliders({selector:"#imageslider",time:500,autoTime:3000,width_height:350/250});
//]]>
</script>

شرح الإستخدام

كرر كود الصورة من البداية الى النهاية كل تكرار يساوي صورة جديدة

رمز # هو الرابط المراد فتحه عند الضغط على الصورة

رمز * رابط الصورة

وعدل العنوان بما تريد 

• 💢
• معاينة

قالب مختصر

قالب واجهة

قالب شعاع

❯ ❮