{"id":782,"date":"2014-10-23T10:25:51","date_gmt":"2014-10-23T10:25:51","guid":{"rendered":"http:\/\/stopdesign.cn\/codecanyon\/vc-extensions\/?page_id=782"},"modified":"2015-04-05T06:48:00","modified_gmt":"2015-04-05T06:48:00","slug":"draggable-timeline","status":"publish","type":"page","link":"https:\/\/stopdesign.cn\/demo\/draggable-timeline\/","title":{"rendered":"Draggable Timeline"},"content":{"rendered":"

[vc_row full_width=”stretch_row” css=”.vc_custom_1428216562870{margin-top: -56px !important;padding-top: 100px !important;padding-bottom: 100px !important;background-color: #f5f7fa !important;}”][vc_column width=”1\/1″][vc_row_inner][vc_column_inner width=”1\/2″][vc_column_text]<\/p>\n

Timeline with Icon<\/span><\/h2>\n

Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl. Integer a egestas mauris. Nam id diam blandit, condimentum dolor ut, euismod arcu. Aliquam erat volutpat.<\/p>\n

Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl. Integer a egestas mauris. Nam id diam blandit, condimentum dolor ut, euismod arcu. Aliquam erat volutpat.[\/vc_column_text][vc_empty_space height=”32px”][\/vc_column_inner][vc_column_inner width=”1\/2″]

Hello title 1<\/div>
Hi title 2<\/div>
Designer<\/div>
2013<\/div>
Yet another title<\/div><\/div>
\n

Hello timeline content 1.
\nYou have to wrap each timeline block in a div with class timeline-content<\/strong>. Something like:
\nSo you can put anything in it, like a image or video.<\/p>\n\n<\/div>

\n

Hello timeline 2, you can customize the dragging bar color, slideshow, icons, icon color, timeline content etc in the backend.
\nLong content will trigger the scrollbar automatically.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n<\/div>

Hello timeline 3\n<\/div>
You can choose to display the timeline label with Font Awesome icon, image or text only.
\nVisit my profile<\/a> for more works.\n<\/div>
Hello timeline 5\n

<\/div><\/div><\/div><\/div><\/div><\/div>

<\/span><\/div>1998<\/span><\/div>
<\/span><\/div>1999<\/span><\/div>
<\/span><\/div>2002<\/span><\/div>
<\/span><\/div>2013<\/span><\/div>
<\/span><\/div>2014<\/span><\/div><\/div><\/div><\/div>[\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1428216606073{margin-top: -48px !important;padding-top: 100px !important;padding-bottom: 100px !important;background-color: rgba(160,212,104,0.66) !important;*background-color: rgb(160,212,104) !important;}”][vc_column width=”1\/1″][vc_row_inner][vc_column_inner width=”1\/2″]
Hello title 1<\/div>
Hi title 2<\/div>
Designer<\/div>
2013<\/div>
Hi no.5<\/div><\/div>
\n

Hello timeline content 1.
\nYou have to wrap each timeline block in a div with class timeline-content<\/strong>. Something like:
\nSo you can put anything in it, like a image or video.<\/p>\n\n<\/div>

\n

Hello timeline 2, you can customize the dragging bar color, slideshow, icons, icon color, timeline content etc in the backend.
\nLong content will trigger the scrollbar automatically.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n<\/div>

Hello timeline 3\n<\/div>
You can choose to display the timeline label with Font Awesome icon, image or text only.
\nVisit my profile<\/a> for more works.\n<\/div>
Hello timeline 5\n

<\/div><\/div><\/div><\/div>

\n <\/span>\n <\/span>\n <\/span>\n <\/span>\n <\/div><\/div><\/div>
Aug 1998<\/span><\/div>
1999<\/span><\/div>
Oct 2002 <\/span><\/div>
2013<\/span><\/div>
2014<\/span><\/div><\/div><\/div><\/div>[\/vc_column_inner][vc_column_inner width=”1\/2″][vc_column_text]<\/p>\n

Text Label\u00a0with Auto Slide<\/span><\/h2>\n

Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl. Integer a egestas mauris. Nam id diam blandit, condimentum dolor ut, euismod arcu. Aliquam erat volutpat.<\/p>\n

Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl. Integer a egestas mauris. Nam id diam blandit, condimentum dolor ut, euismod arcu. Aliquam erat volutpat.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1428215505447{margin-top: -48px !important;padding-top: 100px !important;padding-bottom: 100px !important;background-color: #ccd1d9 !important;}”][vc_column width=”1\/1″]

Hello title 1<\/div>
Hi title 2<\/div>
Designer<\/div>
Feb 2014<\/div><\/div>
\n

Hello timeline content 1.
\nYou have to wrap each timeline block in a div with class timeline-content<\/strong>.
\nSo you can put anything in it, like a image or video.\"tumblr_n98smdYLPh1qfirfao1_1280\"<\/a><\/p>\n\n<\/div>

\n

Hello timeline 2, you can customize the dragging bar color, slideshow, icons, icon color, timeline content etc in the backend.
\nLong content will trigger the scrollbar automatically.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n<\/div>

Hello timeline 3\"3336545581_1575e468bb_b_d\"<\/a>\n<\/div>
You can choose to display the timeline label with Font Awesome icon, image or text only.
\nVisit my profile<\/a> for more works.\n

<\/div><\/div><\/div><\/div>

\n <\/span>\n <\/span>\n <\/span>\n <\/span>\n <\/div><\/div><\/div>
<\/span><\/div>Debra Riley<\/span><\/div>
<\/span><\/div>Default label<\/span><\/div>
<\/span><\/div>Designer<\/span><\/div>
<\/span><\/div>2014<\/span><\/div><\/div><\/div><\/div>[\/vc_column][\/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1428215245774{padding-top: 100px !important;padding-bottom: 100px !important;}”][vc_column width=”1\/1″]
Image with label demo<\/div>
Hi title 2<\/div>
Designer<\/div>
2014<\/div>
Another title<\/div><\/div>
\n

Hello timeline content 1.
\nYou have to wrap each timeline block in a div with class timeline-content<\/strong>. Something like:
\nSo you can put anything in it, like a image or video.<\/p>\n\n<\/div>

\n

Hello timeline 2, you can customize the dragging bar color, slideshow, icons, icon color, timeline content etc in the backend.
\nLong content will trigger the scrollbar automatically.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n<\/div>

Hello timeline 3\n<\/div>
You can choose to display the timeline label with Font Awesome icon, image or text only.
\nVisit my profile<\/a> for more works.\n<\/div>
Hello timeline 5\n

<\/div><\/div><\/div><\/div>

\n <\/span>\n <\/span>\n <\/span>\n <\/span>\n <\/div><\/div><\/div>
\"\"<\/div>Debra Riley<\/span><\/div>
\"\"<\/div>Default label<\/span><\/div>
\"\"<\/div>Designer<\/span><\/div>
\"\"<\/div>2014<\/span><\/div>
\"\"<\/div>Another label<\/span><\/div><\/div><\/div><\/div>[\/vc_column][\/vc_row][vc_row full_width=”stretch_row_content_no_spaces” css=”.vc_custom_1428216696432{padding-top: 100px !important;padding-bottom: 100px !important;background-color: rgba(172,146,236,0.65) !important;*background-color: rgb(172,146,236) !important;}”][vc_column width=”1\/1″]
Hello title 1<\/div>
Hi title 2<\/div>
Designer<\/div>
2014<\/div>
Another title<\/div><\/div>
\n

Hello timeline content 1.
\nYou have to wrap each timeline block in a div with class timeline-content<\/strong>. Something like:
\nSo you can put anything in it, like a image or video.<\/p>\n\n<\/div>

\n

Hello timeline 2, you can customize the dragging bar color, slideshow, icons, icon color, timeline content etc in the backend.
\nLong content will trigger the scrollbar automatically.
\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n\n<\/div>

Hello timeline 3\n<\/div>
You can choose to display the timeline label with Font Awesome icon, image or text only.
\nVisit my profile<\/a> for more works.\n<\/div>
Hello timeline 5\n

<\/div><\/div><\/div><\/div><\/div><\/div>

\"\"<\/div>Debra Riley<\/span><\/div>
\"\"<\/div>Default label<\/span><\/div>
\"\"<\/div>Designer<\/span><\/div>
\"\"<\/div>2014<\/span><\/div>
\"\"<\/div>Another label<\/span><\/div><\/div><\/div><\/div>[\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][vc_column_text]Features:<\/strong><\/p>\n
    \n
  • Timeline label support Font Awesome icon, image or plain text only.<\/li>\n
  • Icon and image can be in square, round or circle shape.<\/li>\n
  • Auto play slideshow for the timeline.<\/li>\n
  • Auto scrollbar support for the long content in the timeline window.<\/li>\n
  • Retina ready.<\/li>\n
  • Optional bar color, timeline window color style, label font color.<\/li>\n
  • Optional drag button.<\/li>\n
  • Optional timeline title, timeline content.<\/li>\n<\/ul>\n

    [\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"

    [vc_row full_width=”stretch_row” css=”.vc_custom_1428216562870{margin-top: -56px !important;padding-top: 100px !important;padding-bottom: 100px !important;background-color: #f5f7fa !important;}”][vc_column width=”1\/1″][vc_row_inner][vc_column_inner width=”1\/2″][vc_column_text] Timeline with Icon Sed eleifend, lacus nec bibendum pulvinar, nibh mauris vehicula augue, sit amet mattis ligula lorem eu nisl. Integer a egestas mauris. Nam id diam blandit, condimentum dolor ut, euismod arcu. Aliquam erat volutpat. Sed eleifend, lacus nec bibendum pulvinar, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/782"}],"collection":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/comments?post=782"}],"version-history":[{"count":7,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/782\/revisions"}],"predecessor-version":[{"id":1740,"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/pages\/782\/revisions\/1740"}],"wp:attachment":[{"href":"https:\/\/stopdesign.cn\/demo\/wp-json\/wp\/v2\/media?parent=782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}