جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگانساخت اسلایدر در بوت‌استرپ ۴

ساخت اسلایدر در بوت‌استرپ ۴

17 مهر 1400
ارسال شده توسط همیار من
دوره های رایگان
457 بازدید
همیارمن

با استفاده از Carousel برای ساخت اسلایدر در بوت‌استرپ، می‌توانید تصاویری که در یک چرخه درحال چرخیدن هستند را به صورت منظم یا تصادفی برای کاربران نمایش دهید. این‌کار می‌تواند باعث جذب مخاطبان زیادی به وب‌سایت و انجام تبلیغات توسط وب‌سایت شما شود.

اسلایدر تصاویر (carousel) در بوت‌استرپ

در دنیای وب به چند تصویر که در کنارهم برای انتقال پیام، به‌صورت متحرک نمایش داده می‌شوند، اسلایدر می‌گویند. این تصاویر توسط شما انتخاب شده و اسلایدر، آن‌ها را با بازه‌های زمانی مشخص نمایش می‌دهد. اسلایدر یکی از تاثیرگذارترین نوع تبلیغات در وب‌سایت‌ها می‌باشد. به‌همین‌جهت باید در انتخاب عکس و محتوای آن نهایت دقت را داشته باشید. همچنین از اسلایدر علاوه بر جنبه تبلیغاتی به عنوان تصاویر معرفی محصولات و خدمات نیز استفاده می‌شود.

در یک صفحه‌ی وب می‌توان به کمک تگ‌ها HTML نیز تعدادی تصویر قرار داد و به کمک CSS به آن‌ها سبک متفاوت بخشید. اگر بخواهید این تصاویر به صورت یک اسلایدر همراه با افکت‌های مختلف در صفحه نمایش داده شوند، می‌توانید به کمک زبان جاوا اسکریپت، آلبوم تصاویر را به یک اسلایدر پویا تبدیل کنید.

همچنین در Bootstrap4 به‌راحتی با استفاده از Carousel و دیگر کلاس‌هایی که این فریمورک در اختیار شما قرار می‌دهد، می‌توانید اسلایدرهای جذاب بسازید. در مثال زیر یک اسلایدر پایه در بوت‌استرپ نشان داده شده است:

با استفاده از کد زیر می‌توانید یک اسلایدر ساده طراحی کنید:

1
2
3
4
5
6
7
8
9
10
<div id="demo" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="myhamyar.jpg" alt="Los Angeles" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src="myhamyar2.jpg" alt="Chicago" width="1100" height="500">
    </div>
  </div>
</div>

 

محتوای هر اسلاید در یک عنصر <div> با کلاس .item تعریف می شود. این محتوا می‌تواند متن و یا تصویر باشد. کلاس active باید به یکی از اسلایدها اضافه شود. در غیر این صورت کروسل مرئی و قابل مشاهده نخواهد بود.

همچنین می‌توانید با اضافه کردن کلاس Indicator،‌ نقطه‌های کوچکی در پایین صفحه اسلایدر ایجاد کنید. این نقطه‌ها نشان می‌دهند چند اسلاید دیگر در کروسل وجود دارد و در حال حاضر در کدام اسلاید هستید.

استفاده از کلاس‌های مختلف در اسلایدر

به‌طور کلی برای ساخت اسلایدر از کلاس Carousel استفاده می‌شود. برای اضافه کردن المان‌های مختلف به اسلایدرهای یک وب‌سایت می‌توانید از کلاس‌های زیر استفاده کنید:

.carousel-indicators برای اضافه کردن نقاط کوچک در زیر عکس برای نمایش تعداد عکس‌ها و هدایت کردن آن‌ها استفاده می‌شود.
.carousel-item برای افزودن محتوای هر اسلاید به صورت اختصاصی استفاده می‌شود.
.carousel-control-prev برای افزودن فلش برگشت به عقب، از این کلاس استفاده می‌شود.
.carousel-control-next برای افزودن فلش هدایت به جلو، از این کلاس استفاده می‌شود.

افزودن زیرنویس به اسلایدر

بوت‌استرپ ۴ قابیلیتی را اضافه کرده است که با استفاده از آن می‌توانید توضیحاتی را در زیر تصاویر ثبت کنید. برای ایجاد این زیرنویس‌ها در هر اسلاید، عناصر داخل <div class = “carousel-caption”> را به <div class = “carousel-item”> اضافه کنید:

1
2
3
4
5
6
7
<div class="carousel-item">
  <img src="la.jpg" alt="Los Angeles">
  <div class="carousel-caption">
    <h3>Los Angeles</h3>
    <p>We had such a great time in LA!</p>
  </div>
</div>

بیشتر بخوانیم:

  • بهترین افزونه های اسلایدر وردپرس
  • آموزش افزونه Meta Slider و ساخت اسلایدرهای زیبا در وردپرس
  • دانلود رایگان افزونه اسلایدر رولوشن – Slider Revolution Responsive WordPress Plugin
  • آموزش کار با فایل Media Object در بوت‌استرپ 4
  • نحوه کار با شبه کلاس ها در CSS
اشتراک گذاری:
برچسب ها: Carouselآموزش وب سایتاسلایدربوتاسترپدوره رایگانساخت اسلایدرساخت اسلایدر با jqueryساخت اسلایدر با بوت استرپساخت اسلایدر با ویژوال کامپوزرساخت اسلایدر در htmlساخت اسلایدر دوربینساخت اسلایدر دیجی کالاساخت اسلایدر سایتساخت اسلایدر عکس در htmlساخت اسلایدر محصولات در وردپرسنحوه‌ی کار با قابلیت Carousel جهت ساخت اسلایدر در بوت‌استرپ ۴
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت
آموزش انیمیشن‌سازی با CSS
در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن
نحوه اضافه کردن کد PHP در وردپرس
اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...
دوره رایگان طراحی فروشگاه اینترنتی!
در حال آپدیت... امروزه شاهد سایت های فروشگاهی بسیاری هستیم. افراد بسیاری وجود دارند که...
آموزش ایجاد لیست کشویی وابسته به هم در HTML
در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)
ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید
یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت
DOM چیست و چه کاربردی دارد؟
DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت