آموزش طراحی وب – پلاگین time line js

با سلام

امروز میخوایم پلاگین جدیدی رو معرفی کنیم Time line js شاید تا حالا همچین پلاگینی ندیده باشید. ولی مطئنا به کارتون میاد. این پلاگین خیلی راحته و کار یک اسلایدر رو براتون انجام میده با اضافه کردن چند تا کد کوتاه به پروژه تون. کاربردی و پر استفاده هم است .

استفاده

1- کافیه این دو تا کد جی کوئری رو تو قسمت Head پروژتون اضافه کنین .

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="dist/js/timeline.min.js"></script>

2- و بعد اینا هم این کد سی اس اس رو اضافه کنین .

<link rel="stylesheet" href="dist/css/timeline.min.css" />

3- حالا هم این کد های html رو به پروژتون اضافه کنید و به دلخواه خودتون بعدا بهش چیزی اضافه ی کم کنین

<div class="timeline-container timeline-theme-1">
  <div class="timeline js-timeline">
    <div data-time="2017">
      your content or markup
    </div>
    <div data-time="2016">
      your content or markup
    </div>
    <div data-time="2015">
      your content or markup
    </div>
    <div data-time="2014">
      your content or markup
    </div>
    <div data-time="2013">
      your content or markup
    </div>
  </div>
</div>

4- و در گام آخر هم این کد رو بعد از   body اضافه کنید .

See the Pen QPpPrj by amir (@webquery) on CodePen.

همین بود و تمام حالا خیلی راحت یک پلاگین خوب و بدون نیاز به کد نویسی پیچیده در اختیار دارید

امید وارم این جلسه براتون مفید واقع شده باشه موفق باشید

این هم گزینه های اختیاری دیگر برای اضافه کردن به پلاگین

Name Default Type Info
autoplay false truefalse Enables Autoplay
autoplaySpeed 3000 int(ms) Autoplay Speed in milliseconds
mode 'horizontal' 'horizontal''vertical' Determines the structure of the slider.
itemClass 'timeline-item' 'class-name' Timeline item class value. Makes it easy to customize.
dotsClass 'timeline-dots' 'class-name' The container class value for timeline dates.
startItem 'first' 'first''last''number' It determines which content will be active at startup.
dotsPosition 'bottom' 'bottom''top''left''right' Sets the location of the timeline dates. Top and bottom are only used in horizontal position. Also left and right are only used vertical position.
activeClass 'slide-active' 'class-name' Timeline items and dates active class
prevClass 'slide-prev' 'class-name' Timeline items and dates prev class
nextClass 'slide-next' 'class-name' Timeline items and dates next class
pauseOnHover true truefalse Pause Autoplay On Hover
pauseOnDotsHover false truefalse Pause Autoplay when a dot is hovered

منبع : ilkeryilmaz.github.io

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *