القائمة الرئيسية

الصفحات

بواسطة سومر للبرمجة افضل اعمال السلايدر شو تصميم المواقع | The best slider show for web desgin | Html and css

 The best slider show for web desgin | Html and css

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء Slider desgin الابداعي باستخدام cssو من دون js . لقد قمت سابقًا بمشاركة العديد من المدونات حول وضع سلايدر لكن هذا نوع مختلف عن الباقي حان الوقت لاجل استخدامه بشكل منفرد وتعلم كيفية وضعه بحركة متلاشية لتعطي لمسه جميلة ، بخاصية ال transfrom-style

وضع سلايد شو دائما ياتي في واجهة مستخدم داخل صفحة ويب تحتوي على صور كثيرة في موقع الويب. عادةً ما يتم عرض هذا المحرك في موقع الويب من اجل الانتقال بسهوله عن بين الصور
اليوم في هذه المدونة ، سأشارك معك هذا البرنامج (Slider desgin ). سلايد شو غير مستجيب لاجهزة الهواتف. على المحمولة ، نقوم هذا بضبط عرض ارتفاعها تلقائيًا وفقًا لعرض ارتفاع الجهاز. استخدم خاصية CSS Flex وmedia لجعل ذلك متوافقا قم باستخدام هذه الخاصية من اجل التوافق مع الهواتف النقالة
إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل عن هذا البرنامج ( Slider desgin)

فيديو تعليمي لانشاء Slider desgin


كما رأيت في الفيديو ، فإن سلايدر شو هذا تكون بطريقة جميلة. إذا كنت مبتدئًا في تصميم الويب ، فقد ساعدك هذا البرنامج التعليمي على فهم الرموز والمفاهيم الأساسية وراء إنشاء التصميم ذلك
إذا كنت تحب هذا البرنامج ( slider ) وتريد الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الكود المصدري لهذا البرنامج. للحصول على رموز المصدر ، تحتاج فقط إلى التمرير لأسفل. يمكنك استخدام هذا البرنامج في مشاريعك ومواقعك. إذا كنت تعرف html ,cssتمامًا ، فيمكنك بسهولة جعل التمرير الابداعي هذا عمليًا بإضافة بعض الاكواد الخاصه بهما

قد يعجبك هذا :

كما هو الحال دائمًا ، قبل مشاركة أكواد هذا البرنامج ( slider degin). دعنا نتحدث قليلاً عن العلامات والرموز الرئيسية لهذا البرنامج. في البداية ، في ملف HTML ، قمت بإنشاء علامة <div>.بأسم الفئة "slider" كما تعلم ، يتم استخدام علامة <div> بشكل كبير لإنشاء التقسيم الاول. ,وذلك من غيرbootstrap ثم أنشأت <div> بداخله ثم بعد ذلك انشأت ".dp-wrap".
وقسمنا الموضوع قسمين اربع اقسام يكون هو الواجهه الامامية التي ستاخذ الصورة وباقي الاقسام نفس الشيء بعملية تكرار الdiv لاربع مرات لاربع صور
في ملف CSS ، قمت أولاً بإعطاء لون خلفية للتمرير الابداعي ثم باستخدام الخاصية المرنة ، قمت بوضع العنصر في الوسط . ثم قمت بالتصميم الأساسي للتقسيم وعناصر اخرى أعطيت اللون وحجم الخط والحشو وما إلى ذلك. وبالمثل ، بعد ذلك ، قمت بتصميم مربع البحث. ثم قمت بعد ذلك بالتوجه الى بقية العلامات لاجل التنسيق الصحيح
الآن ، لجعل التقسيمة مع التمرير الابداعي ، استخدمت خاصية transfrom. باستخدام هذه الخاصية ، يمكنك ان تعطي عرض التحريك عرض معين. ، قمت بتحريك واعطاء ايضا درجة معينة في التحريك في اليسارو وضعت عناصر وايضا يجب ان تضع حجم الايقونة اذا كنت تحب تكبيرها يمكن ذلك بخاصية font-size
لإنشاء هذا البرنامج (شريط البحث). أولاً ، تحتاج إلى إنشاء ملف، أحدهما ملف HTML . يمكنك أيضًا تنزيل ملفات التعليمات البرمجية المصدر من خلال الرابط المحدد. انقر هنا لتنزيل ملفات التعليمات البرمجية المصدر.

Html file

>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider with csstitle>
<style>
* {
box-sizing: border-box;
}
.slider {
width: 300px;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.slides::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: black;
border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 300px;
height: 300px;
margin-right: 50px;
border-radius: 10px;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 0 0.5rem 0;
position: relative;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #000;
}
/* Don't need button navigation */
@supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
html, body {
height: 100%;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, #74ABE2, #5563DE);
font-family: 'Ropa Sans', sans-serif;
}
style>
head>
<body>
<div class="slider">
<a href="#slide-1">1a>
<a href="#slide-2">2a>
<a href="#slide-3">3a>
<a href="#slide-4">4a>
<a href="#slide-5">5a>
<div class="slides">
<div id="slide-1">
<img src="1.jpg" alt="">
div>
<div id="slide-2">
<img src="2.jpg" alt="">
div>
<div id="slide-3">
<img src="3.jpg" alt="">
div>
<div id="slide-4">
<img src="4.jpg" alt="">
div>
<div id="slide-5">
<img src="5.jpg" alt="">
div>
div>
div>
body>
html>

هل اعجبك الموضوع :

تعليقات