دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۲
  • مرداد

جلسه ۲۶ : پلاگین Carousel در Bootstrap 3

  • دسته‌بندی‌ها :
جلسه ۲۶ : پلاگین Carousel در Bootstrap 3
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند. امروزه در اغلب وب سایت ها، مخصوصا فروشگاههای اینترنتی و وب سایت های خبری از یک طراحی اسلاید شو برای نمایش محصولات ، اخبار و … در ابتدای صفحه ی اصلی وب سایت، استفاده می شود. این طرح اسلاید شو که در یک سیکل زمانی تعیین شده تصاویری مشخص شده را نمایش می دهد. برای ایجاد جذابیت و طراحی کاربر پسند، بسیار مفید و کارآمد است، فریم ورک bootstrap نیز از یک پلاگین با نام carousel برای ایجاد طراحی های اسلاید شو ، استفاده می کند. در ادامه ی مباحث برای آشنایی با پلاگین carousel در bootstrap 3 با ما همراه باشید.

      پلاگین carousel در bootstrap 3

      پلاگین carousel یک کمپوننت در فریم ورک bootstrap است. که برای ایجاد یک اسلاید شو، استفاده می شود.

       

      پلاگین Carousel در Bootstrap 3

      پلاگین carousel در bootstrap 3

       

      نکته: پلاگین carousel در bootstrap 3 در مرورگرهای Internet Explorer 9 و قدیمی تر، پشتیبانی نمی شوند.(چون پلاگین carousel از افکت ها و انیمیشن های css3 استفاده می کند).

      چگونگی ایجاد پلاگین carousel در bootstrap 3

      مثال زیر چگونگی ایجاد یک پلاگین carousel پایه را در bootstrap 3 بخوبی نشان می دهد:

      مثال : 

      شرح مثال فوق:

      عنصر <div> والد:

      عنصر carousel از یک id(که در این مثال: id="myCarousel" می باشد) برای کنترل توایع استفاده می کند.

      کلاس class="carousel" مشخص می کند که عنصر <div> شامل یک carousel است.

      کلاس .slide نیز انیمیشن ها و افکت های css را که حالت نمایش آیتم های اسلاید را کنترل می کنند، را شامل می شود.

      ویژگی data-ride="carousel" به bootstrap اعلام می کند که بلافاصله بعد از بارگزاری صفحه وب، اسلایدها را اجرا کند.

      بخش “Indicators”:

      indicator ها نقطه های کوچک پایین هر اسلاید هستند که تعداد اسلاید ها و اینکه کدام اسلاید اجرا شده را نشان می دهند.

      indicator ها در یک لیست مرتب شده با کلاس .carousel-indicators قرار می گیرند.

      صفت data-target به id پلاگین carousel متصل می شود.

      صفت data-slide-to زمانیکه روی نقطه های پایین اسلاید کلیک کنید، اسلاید بعدی را برای نمایش مشخص می کند.

      بخش “Wrapper for slides”

      اسلایدها در یک عنصر <div> با کلاس .carousel-inner تعریف می شوند.

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

      کلاس .active باید به یکی از آیتم های carousel اضافه شود، در غیر این صورت carousel نمایش داده نمی شود.

      بخش “Left and right controls”

      این بخش کدی را برای افزودن دو button راست و چپ به carousel اضافه می کند. برای اینکه کاربر بتواند بصورت دستی اسلایدهای قبلی و بعدی را مشاهده کند.

      صفت data-slide کلامات کلیدی "prev" و"next"  را می پذیرد. که موقعیت اسلاید جاری را نسبت به اسلاید قبلی و بعدی مشخص می کند.

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

      افزودن <div class="carousel-caption"> به هر کدام از کدهای <div class="item"> یک عنوان برای هر اسلاید ایجاد می کند.

      مثال:

      مثال : 

      کلام آخر

      ایجاد یک اسلایدشو با پلاگین carousel در صفحه اصلی وب سایت، می تواند گزینه ی بسیار مناسبی برای نمایش و معرفی محصولات مهم و کلیدی وب سایت به همراه ویژگی های آنها، باشد. امیدواریم که مباحث آشنایی با پلاگین carousel در bootstrap 3 مورد توجه و رضایت شما قرار گرفته باشد.

       

      QR:  جلسه ۲۶ : پلاگین Carousel در Bootstrap 3
      به اشتراک بگذارید