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

<style> 

#cnmuSSlid{width:100%;margin:0 auto 20px;background-color:#fff;height:500px;overflow:hidden;position:relative;}  

@keyframes cnmuSSlid-key-next{0%{left:100%;}100%{left:0;}}

@keyframes cnmuSSlid-key-left{0%{left:0;}100%{left:-100%;}}

@keyframes cnmuSSlid-key-previous{0%{left:-100%;}100%{left:0;}}

@keyframes cnmuSSlid-key-right{0%{left:0;}100%{left:100%;}}

#cnmuSSlid  ul,#cnmuSSlid li{list-style:none;margin:unset;padding:unset;}

#cnmuSSlid li::before,#cnmuSSlid li::after{display:none;}

#cnmuSSlid  ul  li{position:absolute;left:100%;top:0;width:100%;height:100%;visibility:hidden;animation-timing-function:ease-in-out;animation-fill-mode:forwards;}

#cnmuSSlid  ul  li.active{visibility:visible;left:0;}

#cnmuSSlid  ul  li.left{animation-name:cnmuSSlid-key-left;}

#cnmuSSlid  ul  li.next{animation-name:cnmuSSlid-key-next;}

#cnmuSSlid  ul  li.right{animation-name:cnmuSSlid-key-right;}

#cnmuSSlid  ul  li.previous{animation-name:cnmuSSlid-key-previous;}

#cnmuSSlid ul li a{margin:0!important;padding:0!important;display:block;width:100%;height:100%;}

#cnmuSSlid ul li img{display:block;height:100% !important;width:100% !important;max-width:100% !important;}

#cnmuSSlid ul li strong{position:absolute;bottom:0;font-weight:normal;color:#fff;padding:20px 10px;box-sizing:border-box;width:100%;text-align:center;background-color:rgba(0,0,0,.7);}

#cnmuSSlid 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;}

#cnmuSSlid  button:hover{opacity:1;}

.BTlef{left:10px;}

.BTRig{right:10px;}

@media screen and (max-width : 600px) {#cnmuSSlid{height:300px;}}  

@media screen and (max-width : 400px) {#cnmuSSlid{height:260px;}}    

</style>

<div id="cnmuSSlid">

<ul>

<li>

<a href="#">  

<img src="*">

<strong>العنوان الظاهر على الصورة</strong>  

</a>  

</li>

</ul>

  

<button class="BTlef">❯</button>

<button class="BTRig">❮</button>

</div>

<script type="text/javascript">

//<![CDATA[

function cnmuSSlids(o){"use strict";var time=o.time||500,autoTime=o.autoTime||5e3,selector=o.selector,width_height=o.width_height||100/70,cnmuSSlids=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(cnmuSSlid){var buttonLeft=cnmuSSlid.children[2],buttonRight=cnmuSSlid.children[1],ul=cnmuSSlid.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<cnmuSSlids.length;i+=1){anonimFunc(cnmuSSlids[i])}}

var cnmuSSlids=new cnmuSSlids({selector:"#cnmuSSlid",time:500,autoTime:3000,width_height:350/250});

//]]>

</script>

• شرح تركيب قالب بلوجر بشكل صحيح
• فهرس مواضيع احترافي مع زر إظهار المزيد
• هل الصور تؤثر بشكل سلبي على السيو ؟
• قالب سهل لمدونات بلوجر جديد محدث مجاني متعدد اللغات