آموزش ساخت اسلایدر با CSS
یکی از شاخص ترین المنت هایی که در زیبایی و کاربرپسند بودن سایت تاثیر بسزایی دارد اسلایدرها هستند . با استفاده از اسلایدرها در سایت میتوان مطالب بسیار زیادی را به نمایش درآورد بدون اینکه فضای اضافی در سایت اشغال شود.
برای ساخت اسلایدر در سایت روش های متنوعی وجود دارد مانند استفاده از JavaScript یا Jquery ، اگر میخواید با استفاده از جاوا اسکریپت یک اسلایدر رو ایجاد کنید آموزش ساخت اسلایدر در جاوا اسکریپت ببینید.
خب در این قسمت از آموزش ما میخوایم بریم که فقط و فقط با استفاده از CSS یک اسلایدر زیبا رو ایجاد کنیم . توصیه میشود ( دوره آموزشی طراحی سایت ) را نیز مشاهده کنید
ویژگی های دوره
- تعداد جلسات 2
- امتحانات 0
- مدت 21 دقیقه
- سطح مهارت تمام سطوح
- زبان فارسی
- دانشجویان 2050
- ارزیابی ها بله
-
Royroy
perfect
عالی مثل همیشه. واقعا ممنون.
-
jafar
عالی
واقعا عالی بود
-
alireza22
بسیار عالی بود
واقعا این آموزش خیلی کارآمد هست و من واقعا به این آموزش نیاز داشتم خیلی ممنون به خاطر توضیح دادن عالیتون.
-
mohsen-farajzadeh
سلام،بسیار گویا و روشن به زبان ساده توضیح دادن
سلام،بسیار گویا و روشن به زبان ساده توضیح دادن
49 دیدگاه
سلام و خسته نباشید خدمت استادمصطفی زاده عزیز و نحوه آموزش خیلی خوب و روان شما خیلی از اشکالاتم برطرف شد .
سلام و درود
ممنون از نظر ارزشمند شما
درود بر استاد گرامی
همه ی توضیحاتتون کامله فقط یه سوال داشتم
اینکه چجوری این اسلاید ها با موس جا به جا میشن و به بعدی وقبلی منتقل میشوند؟
سلام و درود
برای این مورد باید به جاوا اسکریپت مسلط باشید
سلام نمیشه به جای اینکه دایره باشه عددش رو نشون بده که یعنی مثلا اگه عکس سومی بود بزنه ۳ یا اگه دومی بود بزنه ۲
سلام
خیلی آموزش خوبی بود
فقط برای اینکه بگیم به هر زمان معین صفحه اسلایدر به یکی بعدی اش برود، باید چیکار کنیم؟
سلام سایتتونو تازه پیدا کردم
خیلی دوست دارم عضو شم تا از آموزشای خوبتون استفاده کنم
ولی عضویت سایت خطا میده و نمیتونم عضو شم
لطفا این مشکل رو برطرف کنید
سلام و درود
از طریق صفحه تماس با ما با واتساپ بنده در ارتباط باشید
موفق و پیروز باشید
سلام و خسته نباشید به شما استاد عزیز …
واقعا غالی بود
سلام ممنون از دوره خوبتون ی سوال داشتم میخواستم بدونم کد هایی که زدید رو داخل پوشه اموزش ها قرار میدید؟
سلام و درود
سورس کدها فقط برای پکیج های آموزشی قرار میگیرن
موفق و پیروز باشید
سلام
میشه با استفاده از css html یه اسلایدری درست کرد که هم انیمیشن داشته باشه (یعنی خود به خود اسلاید ها جابجا بشن) و هم navigation botton و کلیدهای next و prev داشته باشه اصلن همچین چیزی با css html امکانپذیر هست یا اینکه باید از جاوااسکریپت هم کمک بگیریم
لطفا راهنمایی کنید
سلام و درود
باید با جاوا اسکریپت انجام بدید
موفق و پیروز باشید
سلام وقت بخیر ممنون از آموزش خوب تان! واقعا همه آموزش های تان بسیار عالی هستن.
چطور میشه قسمتی pre و nxt رو تبدیل به کنیم و در ضمن فقط زمان نمایش داد بشه که موس روش قرار گرفت؟
به علاوه چطور می تونیم اندازه radio رو کوچکش کنیم ؟
ممنون میشم از راهنمایی تان.
سلام و درود
با تشکر از نظر ارزشمند شما
متاسفانه متوجه منظور شما نشدم
برای کوچک کردن radio از CSS استفاده کنید
موفق و پیروز باشید
درود بر شما آموزش خوب و روان و قابل فهمی بود.
سلام و درود
با تشکر از نظر ارزشمند شما
موفق و پیروز باشید
سلام وقت شما بخیر، ببخشید چطوری میشه اسلایدر گفته شده رو اتومات کرد، که بدون کلیک کردن کار کنه؟
سلام و درود
برای اینکار باید از زبان هایی مثل جاوا اسکریپت یا jQuery استفاده بشه که آموزش های این زبان ها هم در سایت موجود هست و میتونید مشاهده کنید
موفق و پیروز باشید
سلام ممنون از آموزشتون می خواستم ببینم چه طور میشه با وارد کردن موس اسلایدر متوقف و با خرج کردن موس اسلاید از دوباره پلی بشه
var timerSlider = setInterval(nextSlider, 3000);
mainBoxSlider.addEventListener(“mouseover”, function () { clearInterval(timerSlider) })
mainBoxSlider.addEventListener(“mousedown”, function () {setInterval(nextSlider, 3000)})
این کد ها رو نوشتم اما زمانی که موس خارج میشه اسلایدر قاطی میکنه ممنون میشم راهنمایی کنید
سلام و درود
مشکل در addEventListener دومی شماست ، به این شکل تغییرش بدید و امتحان کنید:
mainBoxSlider.addEventListener(“mouseleave”, function () { timerSlider = setInterval(nextSlider, 3000)}
موفق و پیروز باشید
رشته من طراحی و توسعه صفحات وب هستش .سال یازدهمم وفیلم های اموزشی شما بسیار عالیه و بادیدنشون خیلی جلو افتادم.
ممنونم .
سلام و دورد
با سپاس فراوان از نظر ارزشمند شما
خوشحالیم که دوره ها مورد توجه شما واقع شدن
با آرزوی موفقیت برای شما
موفق و پیروز باشید
سلام وقت بخیر
ممنون از آموزش خوب شما
من کدهای درس داده شده رو کپی کردم دقیقا
اما وقتی از قسمت checked کدها رو اضافه میکنم دیگه تغییر اسلایدرها انجام نمیشه.
چطور امکانش هست کدم رو براتون ارسال کنم و ایرادش مشخص بشه؟
ممنون از شما
سلام و درود
با تشکر از نظر ارزشمند شما
پیشنهاد میکنم در ابتدا یکبار دیگه با دقت دوره رو ببینید و دقیقا همراه با آموزش پیش برید چون در صورتی که کدهای شما با کدهای نوشته شده در آموزش یکسان باشه مطمئنا شما مشکلی نخواهید داشت و کد شما کار خواهد کرد
اگر باز هم مشکل داشتید از طریق آی دی تلگرامی که در قسمت تماس با ما قرار دادیم با ما در ارتباط باشید
موفق و پیروز باشید
با سلام
خسته نباشید و خیلی ممنون بابت آموزش هاتون.
من قسمت اول این آموزش رو دیدم ولی بعد از ثبت نام دوره و پاک کردن کش مرورگر هم موفق به دیدن قسمت دوم این آموزش نشدم.
میشه راهنمایی بفرمایید.
ممنون.
سلام و درود
با تشکر از نظر ارزشمند شما
درس دوم بررسی شده و مشکلی برای مشاهده نداره
لطفا شما از طریق آی دی تلگرامی که در قسمت تماس با ما قرار دادیم مشکلتون رو به ما ارجاع بدید تا بررسی کنیم
موفق و پیروز باشید
سلام خداقوت
آموزشهاتون واقعا عالین.
من ثبت نام رو انجام دادم ولی قسمت دوم طراحی اسلایدرcss رو نمیتونم دانلود کنم.
سلام و درود
با سپاس از نظر ارزشمند شما
درس مورد نظر بررسی شده و فاقد مشکل میباشد
لطفا کش مرورگر خود رو پاک کنید یا با استفاده از یک مرورگر دیگر امتحان کنید
موفق و پیروز باشید
راستی یادم رفت بگم هم سایت هم آموزش هاتون عالین و قابل فهم دمت گرم با قدرت ادامه بدین❤️
خیلی از نظر و دیدگاه ارزشمند شما سپاسگزاریم ، خوشحالیم که دوره ها مورد توجه شما همراه عزیز ما قرار گرفتن
سلام داداش چرا این فسمت مشکل داره بقیه قسمتا دانلودش اوکیه اما اینجا میگه وارد نشدید
سلام و درود
احتمالا توی دوره ثبت نام نکردید به همین دلیل این مشکل پیش میاد ، توی دوره ثبت نام کنید و بعد دوره رو مشاهده کنید
موفق و پیروز باشید
من لاگین هم کردم اما دسترسی دانلود اموزش دوم رو همچنان ندارم
سلام و درود
توی دوره ثبت نام انجام دادید؟
ثبت نام رایگن خرابه اصلاح کنید
سلام و درود
با عرض پوزش از شما ، مشکل برطرف شد
موفق و پیروز باشید
بینظیر بود
ای کاش تمام کلاس هایی که رفتم رو،نمیرفتم! و از آموزشهای شما استفاده میکردم…
عالی،حرفه ای،روان و قابل فهم بود.
سلام و درود
خیلی خوشحالیم که دوره های آموزشی مورد توجه شما همراه عزیز ما قرار گرفته
از اینکه با نظرات خودتون به ما انرژی میدید از شما بی نهایت سپاسگزاریم
موفق و پیروز باشید
باسلام ، خیلی ممنون از اموزشای خوبتون ، میخواستم بدونم اموزشی که در مورد ساخت اسلایدر بود فقط من کپی شما کد نویسی کردم اما موقع ای که میخوام اسلایدر رو رد کنم و به عکس بعدی بره نمیره میخواستم کمکم کنید در این مورد
سلام با تشکر از اموزش های خوبتون
من برای دیدن ویدئوی دوم مشکل دارم
ثبت نام دوره رو که میزنم مینویسه شما وارد شده اید
اما هیچی اتفاق خاصی نمیوفته
سلام و درود
خوشحالیم که آموزش ها مورد توجه شما عزیز قرار گرفته اند
روی ویدیوی دوم کلیک میکنید و هیچ اتفاقی نمیافته؟ از طرف ما مشکلی برای ثبت نام این دوره وجود نداره، شما اگر در دوره ثبت نام کردید روی درس دوم کلیک کنید و منتظر بمونید تا صفحه درس براتون باز بشه ، در صورتی که باز هم به مشکل برخوردید اطلاع بدید تا در اسرع وقت مشکل رو براتون مرتفع کنیم
موفق و پیروز باشید
سلام چطوری میشه خودش بره تصویر بعدی بعد چندثانیه نه با کلیک خودمون
سلام و درود
برای ساخت اسلایدر های اتوماتیک باید از زبان های برنامه نویسی مانند جاوا اسکریپت یا فریم ورک Jquery استفاده کنیم
در دوره های
آموزش جاوا اسکریپت از مقدماتی تا پیشرفته و
آموزش جی کوئری (jquery) از مقدماتی تا پیشرفته
شما با نحوه ساخت اینچنین اسلایدرها آشنا خواهید شد
موفق و پیروز باشید
چرا ویدیو دوم پلی نمیشه
سلام و درود
لطفا ابتدا در دوره ثبت نام کنید بعد میتونید قسمت بعدی دوره رو مشاهده کنید
موفق و پیروز باشید
مرسی از پاسخگوئیتون
موفق باشید
آقای مصطفی زاده سلام. بهت خسته نباشید میگم
ای کاش میگفتی که چطوری یه کپشنی هم زیر تصاویر به عنوان توضیح تصویر اضافه کنیم. مرسی
سلام و درود
قرار دادن یک متن بر روی تصاویر کار زیاد دشواری نیست ، شما میتونید زیر تصاویر مثلا یک تگ p قرار بدید و خاصیت position:absolute رو هم بهشون اختصاص بدید و طبق کدهایی که برای اسلاید کردن تصاویر نوشتیم میتونیم متن ها رو هم اسلاید کنیم…
سعی میکنیم در آینده یک آموزش هم برای ساخت اسلایدر با Jquery داشته باشیم که میتونیم یک اسلایدر به مراتب حرفه ای تر و دارای امکانات بیشتری رو ایجاد کنیم.
موفق و پیروز باشید