مساحة اعلانية

موضوع عشوائي

آخر المواضيع

سلايدر لعرض التدوينات المميزة بتقنية جديدة

اضافات بلوجر
تعود لكم مدونة فلاما للمعلوميات بتدوينة جديدة نقدم لكم سلايدر يتم تركيبه بالسيد بار وتقوم وظيفته على ابراز مجموعة من التدوينات المميزة والتي لم تعد تظهر في الصفحة الرئيسية.
اضافات بلوجر

طريقة التركيب :

# توجه الى التخطيط ثم اضف اداة html/javascript (بالسايد بار)
# ضع كود التالي داخل الاداة
<style>
#sliderisw-wrap{
 width:100%;
 height:320px;
 position:relative;
 overflow:hidden;
}

#sliderisw-wrap ul#sliderisw{
 width:100%;
 height:100%;
 
 position:absolute;
 top:0;
 left:0;  
}

#sliderisw-wrap ul#sliderisw li{
 float:left;
 position:relative;
 width:365px;
 height:400px; 
height: 100%;
}

#sliderisw-wrap ul#sliderisw li > div{
 position:absolute;
 top:20px;
 right:35px; 
  text-align: right;
}

#sliderisw-wrap ul#sliderisw li > div h3{
 font-size:25px;
 text-transform:uppercase; 
background: transparent;
}

#sliderisw-wrap ul#sliderisw li > div span{
 font-family: "Droid Arabic Kufi", sans serif;
 font-size:16px;
}

#sliderisw-wrap ul#sliderisw li i{
 text-align:center;
 line-height:400px;
 display:block;
 width:100%;
 font-size:90px; 
}


/*btns*/
.btns{
 position:absolute;
 width:50px;
 height:60px;
 top:50%;
 margin-top:-25px;
 line-height:57px;
 text-align:center;
 cursor:pointer; 
 background:rgba(0,0,0,0.1);
 z-index:100;
 
 
 -webkit-user-select: none;  
 -moz-user-select: none; 
 -khtml-user-select: none; 
 -ms-user-select: none;
 
 -webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 -ms-transition: all 0.1s ease;
 transition: all 0.1s ease;
}

.btns:hover{
 background:rgba(0,0,0,0.3); 
}

#next{right:-50px; border-radius:7px 0px 0px 7px;}
#previous{left:-50px; border-radius:0px 7px 7px 7px;}
#counter{
 top: 30px; 
 left:35px; 
 width:auto;
 position:absolute;
  font-family: sans-serif;
    font-weight: bold;
}

#sliderisw-wrap.active #next{right:0px;}
#sliderisw-wrap.active #previous{left:0px;}


/*bar*/
#pagination-wrap{
 min-width:20px;
 margin-top:280px;
 margin-left: auto; 
 margin-right: auto;
 height:15px;
 position:relative;
 text-align:center;
}

#pagination-wrap ul {
 width:100%;
}

#pagination-wrap ul li{
 margin: 0 4px;
    padding: 0;
 display: inline-block;
 width:5px;
 height:5px;
 border-radius:50%;
 background:#fff;
 opacity:0.5;
 position:relative;
  top:0;
  
  
}

#pagination-wrap ul li.active{
  width:12px;
  height:12px;
  top:3px;
 opacity:1;
 box-shadow:rgba(0,0,0,0.1) 1px 1px 0px; 
}








/*ANIMATION*/
#sliderisw-wrap ul, #pagination-wrap ul li{
 -webkit-transition: all 0.3s cubic-bezier(1,.01,.32,1);
 -moz-transition: all 0.3s cubic-bezier(1,.01,.32,1);
 -o-transition: all 0.3s cubic-bezier(1,.01,.32,1);
 -ms-transition: all 0.3s cubic-bezier(1,.01,.32,1);
 transition: all 0.3s cubic-bezier(1,.01,.32,1); 
}

</style>
<div id="sliderisw-wrap">
    <ul id="sliderisw">
      <li data-color="#1abc9c"><img src="xxxxxxx.png" style="
    width: 100%;
    height: 100%;
    opacity: 0.2;
">
        <div>
          <h3>هذا النص مثال #1<h3>
          <span>القسم 1#</span>
</h3></h3>
        </div>
        <i class="fa fa-image"></i>
      </li>

      <li data-color="#3498db"><img src="xxxxxxx.png" style=" width: 100%; height: 100%; opacity: 0.2; ">
        <div>
          <h3>هذا النص مثال #2<h3>
          <span>القسم 2#</span>
</h3></h3>
        </div>
        <i class="fa fa-gears"></i>
      </li>

      <li data-color="#9b59b6"><img src="xxxxxxx.png" style=" width: 100%; height: 100%; opacity: 0.2; ">
        <div>
          <h3>هذا النص مثال #3<h3>
          <span>القسم 3#</span>
        </h3></h3>
        </div>
        <i class="fa fa-sliderisws"></i>
      </li>

      <li data-color="#34495e"><img src="xxxxxxx.png" style=" width: 100%; height: 100%; opacity: 0.2; ">
        <div>
          <h3>هذا النص مثال #4<h3>
          <span>القسم 4#</span>
        </h3></h3></div>
        <i class="fa fa-code"></i>
      </li>

      <li data-color="#e74c3c"><img src="xxxxxxx.png" style=" width: 100%; height: 100%; opacity: 0.2; ">
        <div>
          <h3>هذا النص مثال #5<h3>
          <span>القسم 5#</span>
</h3></h3>
        </div>
        <i class="fa fa-microphone-slash"></i>
      </li>

    </ul>

    <!--controls-->
    <div class="btns" id="next"><i class="fa fa-arrow-right"></i></div>
    <div class="btns" id="previous"><i class="fa fa-arrow-left"></i></div>
    <div id="counter"></div>

    <div id="pagination-wrap">
      <ul>
      </ul>
    </div>
    <!--controls-->

  </div>
<script type="text/javascript">
//current position
var pos = 0;
//number of slides
var totalSlides = $('#sliderisw-wrap ul li').length;
//get the slide width
var sliderWidth = $('#sliderisw-wrap').width();


$(document).ready(function(){
 
 
 /*****************
  BUILD THE SLIDER
 *****************/
 //set width to be 'x' times the number of slides
 $('#sliderisw-wrap ul#sliderisw').width(sliderWidth*totalSlides);
 
    //next slide  
 $('#next').click(function(){
  slideRight();
 });
 
 //previous slide
 $('#previous').click(function(){
  slideLeft();
 });
 
 
 
 /*************************
  //*> OPTIONAL SETTINGS
 ************************/
 //automatic slider
 var autoSlider = setInterval(slideLeft, 3000);
 
 //for each slide 
 $.each($('#sliderisw-wrap ul li'), function() { 
    //set its color
    var c = $(this).attr("data-color");
    $(this).css("background",c);
    
    //create a pagination
    var li = document.createElement('li');
    $('#pagination-wrap ul').append(li);    
 });
 
 //counter
 countSlides();
 
 //pagination
 pagination();
 
 //hide/show controls/btns when hover
 //pause automatic slide when hover
 $('#sliderisw-wrap').hover(
   function(){ $(this).addClass('active'); clearInterval(autoSlider); }, 
   function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); }
 );
 
 

});//DOCUMENT READY
 


/***********
 SLIDE LEFT
************/
function slideRight(){
 pos--;
 if(pos==-1){ pos = totalSlides-1; }
 $('#sliderisw-wrap ul#sliderisw').css('left', -(sliderWidth*pos));  
 
 //*> optional
 countSlides();
 pagination();
}


/************
 SLIDE RIGHT
*************/
function slideLeft(){
 pos++;
 if(pos==totalSlides){ pos = 0; }
 $('#sliderisw-wrap ul#sliderisw').css('left', -(sliderWidth*pos)); 
 
 //*> optional 
 countSlides();
 pagination();
}



 
/************************
 //*> OPTIONAL SETTINGS
************************/
function countSlides(){
 $('#counter').html(pos+1 + ' / ' + totalSlides);
}

function pagination(){
 $('#pagination-wrap ul li').removeClass('active');
 $('#pagination-wrap ul li:eq('+pos+')').addClass('active');
}
  
 
</script>

ثم قم بتغيير ما يلي :

  1. القسم 1, القسم 2, القسم 3... بتسمية التدوينة
  2. هذا النص مثال بعنوان التدوينة
  3. xxxxxxx.png برابط صورة التدوينة
اذا واجهت اي مشكلة ضعها بتعليق وسوف نقوم بالتواصل معلك من أجل حلها.

الكــاتــب

    • مشاركة

ليست هناك تعليقات:

جميع الحقوق محفوظة لــ فلاما للمعلوميات 2019 ©