Timeliene JS：如何将结束日期定位到最右边？

Question

我在我的应用程序中使用带有JSON版本的Timeline JS。在这里，我使用＆＃39; start_at_end：true ＆＃39; - 选择最近的幻灯片作为第一张幻灯片。它运行正常，但我需要将开始 - 滑动指示器定位到最右侧而不是中心（默认样式）。

1）如何将起始滑块位置对齐？这是必需的设计：

2）在我的例子中，我还使用了＆＃34; endDate＆＃34;：＆＃34; 2025,2,23＆＃34; 。但是我仍然可以将滑块滚动到2040年。有没有办法限制滑块单独显示到endDate？

这是示例代码JSFiddle link

HTML代码：

<div id="my-timeline"></div>

JS代码：

$(document).ready(function () {
var slides = [
  {
    "startDate": "2012,5",
    "headline": "HL7 FHIR",
    "text": "<p>Fast Healthcare Interoperability Resources made its debut at 
     a 2012 HL7 WGM I attended in Vancouver; I have been involved with the 
     standard as a champion since then.<br><br>HL7 FHIR is an emerging 
     standard developed by HL7, based on HTTP-JSON and RESTful 
     principles./p>",
    "asset": {
        "media": "http://youtu.be/ygBmEqLC1G8",
        "credit": "HL7 International",
        "caption": ""
     }
  }, {
     "startDate": "2013,6",
     "headline": "PMIX View",
     "text": "<p>Around June, 2013, I started working on some Prescription 
     Drug Monitoring use cases from HHS, using Saxon-CE for client-side XML 
     and AngularJS for client-side JSON, NIEM and HL7 FHIR.<br><br>I called 
     this approach Angular-Saxon, and eventually settled on Angular as my 
     framework of choice.</p>"
  }, {
    "startDate": "2014,3",
    "headline": "University of Alberta RFP",
    "text": "<p>In March 2014, I was contacted by Dennis Hulme, Sierra 
    Edmonton, to help with bid/no-bid for a small RFP for a native 
    mobile questionnaire application. We ended up not bidding because 
    the RFP was small, but the idea for a standards-compliant 
    questionnaire app stuck with me, especially if it could retain the 
    look and feel of the original questionnaire.</p>"
  }, {
     "startDate": "2015",
     "headline": "In the next 5 years, changes will take place that 
     demonstrate some of the things that I am talking about today.</p>"
 }, {
    "startDate": "2016,1",
    "headline": "The Next 5 Years: Mobile",
    "text": "<p>Mobile devices become prevalent, providing information 
    access and identity assurance. Since these devices have a shorter 
    lifespan and automatic updates, browser fragmentation becomes less of an 
    issue.</p>",
    "asset": {
        "media": "http://pintos-salgado.com/wp-content/uploads/2010/02/ipad-
         02.jpg",
        "credit": "Glenn Fleishman",
        "caption": "CC NC-AT-SA"
    }
 }, {
    "startDate": "2017,6",
    "headline": "The Next 5 Years: Polyfill",
    "text": "<p>A polyfill is a small piece of code that fills in the gaps 
    between browser implementations. Over time, functionality moves from 
    polyfill libraries like JQuery and AngularJS into the modern browsers. 
    For instance, once Ajax and Query Selectors are consistently implemented 
    in the browser, why do you need these features in JQuery?<br><br>Server-
    side adaptation will move into application servers like WebSphere and 
    WebLogic, which in turn will move into the cloud.</p>"
}, {
    "startDate": "2018,4",
    "headline": "The Next 5 Years: Consonance",
    "text": "<p>XML, JSON, RDF, and HTML become virtually interchangeable. 
     You use whichever format makes the most sense for your business case.
    </p>",
    "asset": {
        "media": "http://youtu.be/0K_CAiVyqTQ",
        //"http://youtu.be/Oe6H4lVauGw", 
        "credit": "Jeni Tennison",
        "caption": "Jeni Tennison (ODI OBE), Keynote address at 
        XMLPrague 2012"
    }
}, {
    "startDate": "2019,2",
    "headline": "The Next 5 Years: Responsive Web",
    "text": "<p>Responsive Web Design allows a web or mobile application to 
    render cleanly on any screen size. There is no good reason why a web 
    application should not use RWD, using Bootstrap or a similar library 
    </p>"
}, {
    "startDate": "2019,8",
    "headline": "The Next 5 Years: Web Components",
    "text": "<p>Once the W3C Web Components specification (Mozilla Brick, 
    Google Paper and Polymer) is released in the modern browsers, the 
    Worldwide Web becomes a first class application platform, as opposed to 
    a document sharing platform.</p>",
    "asset": {
        "media": "http://youtu.be/kV0hgdMpH28",
        "credit": "Rob Dodson",
        "caption": "Rob Dodson, Chrome Dev Summit 2014"
    }
}, {
    "startDate": "2022",
    "headline": "AngularJS",
    "text": "<p>AngularJS is a JavaScript framework from Google that 
    supports MV*, templating, routing, dependency injection, data-binding 
    and client-side services. With custom directives, you can create your 
    own HTML tags, an idea which is borrowed from Web Components.</p>"
}, {
    "startDate": "2023",
    "headline": "jsFiddle and GitHub",
    "text": "<p>To make this work more portable, I have recently been moving 
    these demonstrators from IBM Worklight to GitHub and jsFiddle. This work 
    is ongoing, but suffice it to say that I love jsFiddle because it 
    exposes how few lines of code are required when you have proper library 
    support.</p>",
    "asset": {
        "media": "http://youtu.be/0fKg7e37bQE",
            "credit": "",
            "caption": ""
    }
}, {
    "startDate": "2025",
    "headline": "Rhizome Project",
    "text": "<p>Rhizome is a set of services and templates I have assembled 
    using AngularJS to support Mobile Health use cases. It stands for 
    <em>Resource-based Health Information Zone for Mobile Enterprise</em>. 
    <br><br>By design, this project is: Standards-based, Resource-based 
   (REST-enabled), and modular, with a strong emphasis on client-side 
   development, social and mobile use cases, and rich User Experience.</p>"
}]

var dataObject = {
    "timeline": {
        "headline": "Client-side Development",
            "type": "default",
            "text": "An Emerging Technologies Presentation<br>Find me on GitHub - @phollott",
            "startDate": "2015,2,23",
            "endDate": "2025,2,23",
            "date": slides
    }
};

createStoryJS({
    type: 'timeline',
    width: '100%',
    height: '600',
    source: dataObject,
    embed_id: 'my-timeline',
    start_zoom_adjust: 1,
    start_at_end : true
});
});