سعر و مواصفات Huawei nova 8 5G مميزات و عيوب

طريقة اضافة سلايدر لعرض الصور فى المقالة

مرحبًا طريقة اضافة سلايدر لعرض الصور فى المقالة. يحتوي هذا شريط التمرير على ميزات مثل شريط التمرير بشكل عام ، إنه مجرد شريط خفيف للغاية ويستخدمفى معظم المواقع.

يمكن أن يكون شريط التمرير هذا خفيف الوزن لأنه يعتمد فقط على تأثير النقر على الزرين الأيسر والأيمن ويتحرك أيضًا مع طريقة التمرير ، وهذا هو السبب في أن شريط التمرير هذا يحتوي أيضًا على أداة تمرير في الأسفل لتسهيل اختيار الزائرين لاستخدام الزر أو التمرير.

خفيف ، لكن لا يزال مريحًا في وضع الاستجابة ، لأنه يمكن أن ينزلق إلى اليمين واليسار دون الحاجة إلى الضغط على مفاتيح الأسهم. يختلف حجم الصور التي يمكن تثبيتها أيضًا ، لا يهم الأفقي أو العمودي .

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

توجة الي المظهر ثم تحرير HTML وقم بالبحث عن /b:skin او /style وقم بوضع الكود فوقة اي قبلة

/* CSS Blanter Mini Slider */
.slide-wrap{margin:30px 0;overflow:hidden;position:relative}
.slide-wrap ul li a img{height:309px;width:100%}
.blanter-wrap{overflow:hidden;overflow-x:scroll;position:relative;width:100%;height:330px}
.slide-wrap ul{position:absolute;list-style:none;padding:0;margin:0}
.slide-wrap li{white-space:nowrap;list-style:none;padding:0;margin:0}
.slide-wrap iframe{width:100%;height:87%;background:#000}
.slide-wrap ul li a{cursor:auto;padding-right:0!important;margin-right:5px;display:inline-block;vertical-align:middle;position:relative;max-width:550px;height:355px;background-position:center;background-repeat:no-repeat;background-size:cover;-moz-background-size:cover;-webkit-background-size:cover}
.slide-wrap ul li a.youtube-iframe{width:550px}
.slide-wrap ul li a:last-child{margin-right:0}
a.right-b{right:0}
a.left-b svg,a.right-b svg{width:15px;margin:10px 0 0}
a.left-b,a.right-b{position:absolute;top:35%;width:40px;line-height:50px;height:50px;text-align:center;color:#fff;background:#000;opacity:.7;transition:all 0 ease-in-out}
a.left-b:hover,a.right-b:hover{opacity:1}
.blanter-wrap::-webkit-scrollbar{width:8px;height:8px;border-radius:10px}
.blanter-wrap::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:10px}
.blanter-wrap::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
.blanter-wrap::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out;border-radius:10px}

قم بالبحث عن/bodyوقم بوضع الكود فوقة اي قبلة

<script type='text/javascript'>
//<![CDATA[
// Scroll
$('a.right-b').click(function() {
  $('.blanter-wrap').animate({
    scrollLeft: "+=500px"
  }, "normal");
});
 $('a.left-b').click(function() {
  $('.blanter-wrap').animate({
    scrollLeft: "-=500px"
  }, "normal");
});
//]]>
</script>

والان فى كل مقالة تريد وضع الاصافة اضف الكود ثم قم بتغيير ما يلزم.

<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghH895V3mDDAG31fkzDODIFZ4zZnXJo_pdFRhIpgWeKmxMtzQ5IWdDDlRUBm363WVks6p6vdxL9jjk5-fD6vWcFGGEQKz1YC4Ba_-LyvCFopVXXkjahkalrdbpatEjNRxMGXEpw-7y2Oc/s1600/RoC2.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHKGRAvOlWYiaHhyphenhyphenzjxkjsipXPxNZjqoJYl5tpFcTJKsxni9QqM2NQKaqTYHyhFeg8DXsemPNLN_gKRB-_bjUD6VSKhlw-wg2_aeECaYRO5DLRGbhpeHEOgOPBsPhoEqpQNGnuRz65WfM/s1600/RoC3.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZZzBq-4nXTm6og_KQRQ2ublj1VS2rQy5YjghIscmSAFtJw7ee2cnUXjl6AmnRtrDXjjapOQmC7KKEuxxZ6ojGA6GUF4UEU9QOIucTV5NCZGMRtxTefEvbHxBvq2JzdmCtAVOcGULOhWE/s1600/RoC4.jpg" title="Judul Gambar" />
</a>
<a href="javascript:void(0)">
<img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1_4L-LSSfWCCvW94UHuXilI3WOLhzHgL0uo_JTMCmiFsm16zgpC963vCOYdmMU6fQoEmpZXXfrX7cV_NM43AyABnmfJtQTAAJWz7xXsTIYE9rcP7-8OfYbGyJEbea9vppQzH5uTy4jyI/s1600/RoC5.jpg" title="Judul Gambar" />
</a>
</li>
</ul>
</div>
<a class="left-b" href="javascript:void(0);">
<svg aria-hidden="true" data-prefix="fas" data-icon="angle-left" class="svg-inline--fa fa-angle-left fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path></svg></a>
<a class="right-b" href="javascript:void(0);">
<svg aria-hidden="true" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></a>
</div>