حصريا اضافة سلايد شو احترافي لبلوجر

<script>

   $(document).ready(function(){

      $(&#39;.slider&#39;).slider({full_width: true});

    });

      

// Pause slider

$(&#39;.slider&#39;).slider(&#39;pause&#39;);

// Start slider

$(&#39;.slider&#39;).slider(&#39;start&#39;);

// Next slide

$(&#39;.slider&#39;).slider(&#39;next&#39;);

// Previous slide

$(&#39;.slider&#39;).slider(&#39;prev&#39;);

    

</script>

<style>

.slider .indicators .indicator-item.active {

    background-color: #2196F3;

    width: 15px;

    height: 15px;

    margin: 0;

}

  </style>

<style>

.slider .indicators .indicator-item {

    display: inline-block;

    width: 10px;

    height: 10px;

    margin: 2.3px 5px;

    text-indent: -999px;

    cursor: pointer;

    background-color: #000\9;

    background-color: #fff;

    border-radius: 10px;

}

  </style>

<style>

.slider .indicators {

    position: absolute;

    text-align: center;

    left: 0;

    right: 0;

    bottom: 55px;

    margin: 0;

    z-index: 9;

}

  </style>

<style>

/* slider */

.slider-wrapper {

    text-align: center;

    font-size: 20px;

    margin-bottom: -20px;

    background: #f0f0f0;

    padding-left: 2%;

}.owl-controls{ position:absolute;  right:25px;  top:11px}

.owl-nav &gt;div {

float: right;display: inline-block;width: 32px;height: 30px;text-align: center;border-radius: 6px;color: #fa4a31;margin-right: 5px;line-height: 29px;cursor: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQuO1ZtPhEz2d6ruUeilELS9zhimxhPjnATFZbgBUXN2NDEMUONW2JVnbiMkMvlwg0A5SZYhoMLJdLd9ML6xLT4yAaVwJFmPqjaAvckbukaKWErXxhy2S5zZv01S0oPx-oeWv9qAovPkq3/s33-Ic42/handcu10.png&quot;), auto;background: #FFF;font-weight: bold;font-size: 26px;}

.owl-nav &gt;div:hover {

    color: #FFF;

    background: #3D4A60;

    transition: 0.3s;

}

.slider-wrapper .section {

    margin: 0px;

}

.slider-wrapper .widget {

    margin: 0px;

}

.mag-content{ position:absolute;  bottom:0;  z-index:99999;  padding:20px;  display:block;  background-image:-webkit-linear-gradient(transparent,rgba(0,0,0,0.83));  background-image:-moz-linear-gradient(transparent,rgba(0,0,0,0.83));  background-image:linear-gradient(transparent,rgba(0,0,0,0.83));  width:100%;  overflow:hidden; transition:0.2s;  vertical-align:middle;  text-align:center}

ul#recn-b li{ height:215px;  position:relative;  overflow:hidden}

.recent-author:before{ content:&quot;\f007&quot;;  font-family:fontawesome;  margin-left:5px;  display:inline-block}

.recent-meta &gt;span{ font-size:15px; color:#ddd; display: none;}

h3.mag-title a:hover{    background: rgba(51, 184, 244, 0.65);

    text-shadow: 0px 2px 0px rgb(0, 0, 0);

    padding: 10px;

    transition: 0.4s;}

h3.mag-title a{     color: #fff;

    font-weight: 900;

    font-size: 16px;

    text-align: center;

    border-radius: 5PX;

    text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.75);}

.mag-thumb a{ display:block;  width:100%;  height:215px;  overflow:hidden}

</style>

<div class='slider'>

<ul class='slides'>

<li>

<img src='https://b.top4top.net/p_5312fa711.png'/>

<!-- random image -->

<div class='caption center-align'>

<h3 style='           font-size: 50px;           font-weight: bold;           text-shadow: 1px 3px 0px rgba(0, 0, 0, 0.29);          '> مدونة بروتك </h3>

<h5 class='light grey-text text-lighten-3' style='font-family: ; color: #f7465b !important; '>كل ما تحتاجه هنا</h5>

</div>

</li>

<li>

<img src='https://e.top4top.net/p_531gqwpm1.jpg'/>

<!-- random image -->

<div class='caption left-align'>

<h3 style='           font-size: 50px;           font-weight: bold;           text-shadow: 1px 3px 0px rgba(0, 0, 0, 0.29); color:#2196f3 !important;   '>نحن نقدم لكم كل ما يخص بلوجر</h3>

<h5 class='light grey-text text-lighten-3' style='   font-family: ;   color: #fffff !important; '>من قوالب واضافات وغيرهم</h5>

</div>

</li>

<li>

<img src='https://a.top4top.net/p_531eiv2y1.jpg'/>

<!-- random image -->

<div class='caption right-align'>

<h3 style='          font-size: 50px;          font-weight: bold;           text-shadow: 1px 3px 0px rgba(0, 0, 0, 0.29);    color: #FFC107;'>ونوفر مستلزمات الفوتوشوب</h3>

<h5 class='light grey-text text-lighten-3' style='  font-family: ;    color: #fffff !important; '>مثل الخطوط والاغلفة والتصميمات و العديد من الشروحات</h5>

</div>

</li>

<li>

<img src='https://d.top4top.net/p_531ozvb71.jpg'/>

<!-- random image -->

<div class='caption center-align'>

<h3 style='font-size: 50px; font-weight: bold;color: #f7465b; text-shadow: 1px 3px 0px rgba(0, 0, 0, 0.29); '>بالاضافة لشروحاتنا المصورة والمكتوبة</h3>

<h5 class='light grey-text text-lighten-3' style='   font-family: ;   color: #ffffff !important; '>انشاء الله ستجد ما تحتاج</h5>

</div>

</li>

</ul>