السلام عليكم.. اسال عن كيفية صنع سلايد شو بطريقة تحريك الصور جانبا لا بتغيير الخلفية ,
اي سيكون هناك عدة صور في كونتاينر معين والصورة الاولىتتحرك نحوو اليسار بطريقة ما فتنزلق مكانها الصورة الثانية منن اليمين .
اذا امكن انشائه بطريقتي الانيميشن والسيت-اننترفل
فارغب بالطريقتين .
شكرا جزيلاً
دعنا نأخذ مثال عن طريقة عمل ذلك بالبداية ننشأ كود ال html
<div class="slideshow-container"> <div class="mySlides fade moveRight"> <img src="slide1.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="slide2.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="slide3.jpg" style="width:100%"> </div> </div>
يمكنك تغيير اسم الصورة حسب اسم الصورة الموجودة لديك
والان دعني اكتب لك كود ال css وساعطيك تعليقات امام الكود تشرح لك كل كود ماهي وظيفته
/* تعريف تسلسل الحركة */
@keyframes fade {
0% {
opacity: 0; /* الصورة شفافة في البداية */
transform: translateX(-100%); /* تحريك الصورة يسارًا خارج الشاشة */
}
25% {
opacity: 1; /* الصورة تظهر بالكامل بعد ربع المدة */
transform: translateX(0); /* الصورة في مكانها الطبيعي */
}
75% {
opacity: 1; /* الصورة مرئية دون تغيير */
transform: translateX(0); /* الصورة في مكانها الطبيعي */
}
100% {
opacity: 0; /* الصورة تصبح شفافة بشكل تدريجي */
transform: translateX(100%); /* تحريك الصورة يمينًا خارج الشاشة */
}
}
/* تحديد خصائص العرض والارتفاع للسلايد شو */
.slideshow-container {
position: relative;
width: 100%;
height: 600px; /* هنا تقوم بتحديد الارتفاع الذي تريده للسلايد شو */
overflow: hidden;
}
/* تعيين خصائص الصورة والتأثير عليها */
.mySlides {
position: absolute; /* تحديد مكان الصورة بالنسبة للعنصر الأب */
width: 100%;
height: 100%;
opacity: 0; /* الصورة شفافة في البداية */
}
/* تحديد تأثير التحرك والظهور لكل صورة */
.mySlides:nth-child(1) {
animation: fade 9s 0s infinite; /* تأثير الحركة للصورة الأولى */
}
.mySlides:nth-child(2) {
animation: fade 9s 3s infinite; /* تأثير الحركة للصورة الثانية بعد 3 ثواني */
}
.mySlides:nth-child(3) {
animation: fade 9s 6s infinite; /* تأثير الحركة للصورة الثالثة بعد 6 ثواني */
}
الان اصبح لديك سلايد شو متحرك كما تريد بامكانك التغيير داخل خصائص ال css حسب رغبتك ك ارتفاع الصور ومدة تحريكها والطريقة
وبالتوفيق لك ...
سبق وتم شرح ذلك بالتفصيل هنا من خلال أكواد CSS, HTML, JS:
وإذا أردت تسهيل الأمر، فيمكنك استخدام مكتبات متخصصة في ذلك مثل مكتبة Swiper وهي الأشهر.
أيضًا يوجد مكتبات أخرى:
ولكل مكتبة ميزات مختلفة وتأثيرات حركية مميزة، لذا اختر المناسب للسلايدر الخاص بتصميمك.
يجب قراءة التوثيق الرسمي الخاص بها وهو بالإنجليزية ابحث باسم المكتبة على جوجل وسيظهر لك الموقع الرسمي ثم توجه إلى DOCS.
أو ابحث على اليوتيوب باسم المكتبة مثل شرح swiper وستجد شروحات بالعربية.
حسنا، يمكنك استخدام مكتبة مثل jQuery أو Swiper.js لإنشاء سلايد شو بسهولة أكبر، فهي مشهورة، فمثلا Swiper.js، هي مكتبة شهيرة وسهلة الاستخدام لإنشاء عروض تقديمية وسلايد شوهات بشكل احترافي.
في البداية يجب أن تقوم بتضمين المكتبة في صفحتك عبر رابط مباشر أو استخدام npm أو CDN. يمكنك القيام بذلك كالتالي:
<!-- إضافة روابط Swiper CSS --> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> <!-- إضافة روابط Swiper JS --> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
ثم، يمكنك استخدامها لإنشاء السلايد شو كما يلي:
<!-- هنا نضع العناصر التي نريد عرضها -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="slide1.jpg" alt=""></div>
<div class="swiper-slide"><img src="slide2.jpg" alt=""></div>
<div class="swiper-slide"><img src="slide3.jpg" alt=""></div>
</div>
</div>
<!-- تكوين السلايد شو باستخدام Swiper.js -->
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
وهنا يتم تحديد الصور داخل `swiper-wrapper` ويتم تكوين السلايد شو باستخدام :
`new Swiper('.swiper-container', { options })`.
يمكنك التعديل على العديد من الخيارات كإضافة تأثيرات معينة، والتحكم في السلايد شو عبر الأزرار وغيرها.
التعليقات