I am trying to use the Flickity library to create a horizontal history timeline carousel. I have the basics working with data attributes, but am stuck on implementing data-nav and data-nav-title functionality. This functionality would be used to sync the .carousel-cell in the .carousel-nav with the associated .carousel-cell in the .main-carousel.
For example, the .carousel-nav .carousel-cell 1984-1988 would remain visible in the carousel until all of the associated 1984-1988 slides have been clicked/tapped/scrolled through by the user.
The following code sample details how the structure is currently set.
I have tried using "asNavFor": ".carousel-nav" and "asNavFor": ".main-carousel" in the respective DIVs with no success. I have also tried removing title from the data-nav-title attribute, but that did not work either.
Any suggestions or tips are greatly appreciated.
.carousel-container {
max-width: 1040px;
margin: 0 auto;
background-color: #f7f7f7;
overflow: hidden;
}
.carousel-nav .carousel-cell {
display: inline-block;
width: 100%;
height: 60px;
}
.carousel-nav .carousel-cell.is-selected {
font-weight: bold;
color: #A4475B;
}
.carousel-nav .end-year {
position: absolute;
top: 0;
right: 0;
}
.main-carousel .carousel-cell {
width: 100%;
}
.carousel-card p {
width: 50%;
min-width: 400px;
margin: 0 10px 0 0;
padding: 0;
background-color: #f7f7f7;
}<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<div class="carousel-container">
<div class="carousel-nav flickity-enabled" tabindex="0" data-flickity='{"asNavFor": ".main-carousel", "pageDots": false, "prevNextButtons": false, "draggable": false, "contain": true}'>
<div class="carousel-cell" data-nav="1984-1988">
<span class="start-year">1984</span>
<span class="end-year">1988</span>
</div>
<div class="carousel-cell" data-nav="1989-1992">
<span class="start-year">1989</span>
<span class="end-year">1992</span>
</div>
<div class="carousel-cell" data-nav="1993-1999">
<span class="start-year">1993</span>
<span class="end-year">1999</span>
</div>
<div class="carousel-cell" data-nav="2000-2002">
<span class="start-year">2000</span>
<span class="end-year">2002</span>
</div>
<div class="carousel-cell" data-nav="2003-2005">
<span class="start-year">2003</span>
<span class="end-year">2005</span>
</div>
<div class="carousel-cell" data-nav="2006-2012">
<span class="start-year">2006</span>
<span class="end-year">2012</span>
</div>
<div class="carousel-cell" data-nav="2013-2020">
<span class="start-year">2013</span>
<span class="end-year">2020</span>
</div>
</div>
<div class="main-carousel flickity-enabled is-draggable" data-flickity='{"pageDots": false}'>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>Medicine River Wildlife Centre (MRWC) began in the basement and barn of a rental property with no thought of a long-term plan. The vision was that a few wild animals might come to the Red Deer SPCA each year and MRWC could help to care for them
in the founder’s (Carol Kelly) rented home.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>Wildlife Rehabilitation was a relatively new concept in Alberta and although MRWC had many supporters, there were others who questioned it, criticized the efforts, and some were outright against it. Fundraising was exceedingly difficult. Very
few people wanted to give to something they didn’t understand. The facility, vehicle, labour and many supplies came from Carol and her family. The children’s playroom became an intensive care room and the barn served as a flight area.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>The first year saw 14 patients, admitted mostly through Red Deer Department of Fish and Wildlife (F & W).</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>For the first 2 years, MRWC was not allowed to advertise as a "wildlife" hospital but had to call themselves an “animal” hospital.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>By the third year, MRWC was given permission to call themselves a wildlife hospital. The Red Deer Advocate did a one-page article on the Centre and the patient load increased to 284 the following year.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>Carol contacted numerous organizations and people to help increase her knowledge and create a network, including Calgary Zoo, F & W biologists, Morris Flewwelling, Kerry Wood Nature Centre, Coaldale Birds of Prey Centre, and many more. She
joined two international wildlife rehabilitation organizations and began attending conferences.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>She joined two international wildlife rehabilitation organizations and began attending conferences.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1989-1992">
<div class="carousel-card">
<p>1989-1992</p>
<p>In 1989 a Banff Park Warden offered to sell the current home quarter to MRWC for $50,000. With the help of Morris Flewwelling, three co-signers were found who helped secure a $15,000 loan as a down payment. The landowner carried the balance as
a mortgage and the Centre began to build a permanent facility.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1989-1992">
<div class="carousel-card">
<p>1989-1992</p>
<p>In 1989 a Banff Park Warden offered to sell the current home quarter to MRWC for $50,000. With the help of Morris Flewwelling, three co-signers were found who helped secure a $15,000 loan as a down payment. The landowner carried the balance as
a mortgage and the Centre began to build a permanent facility.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1993-1999">
<div class="carousel-card">
<p>1993-1999</p>
<p>A four section, large raptor cage was built with donated labour and materials for recovering birds of prey. This cage took some months to build as it utilized with mostly donated time and labour.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1993-1999">
<div class="carousel-card">
<p>1993-1999</p>
<p>A four section, large raptor cage was built with donated labour and materials for recovering birds of prey. This cage took some months to build as it utilized with mostly donated time and labour.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2000-2002">
<div class="carousel-card">
<p>2000-2002</p>
<p>MRWC entered a dark time in its growth when the bank’s head office began a foreclosure. Daily phone calls continually pressured the Centre staff for the money.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2000-2002">
<div class="carousel-card">
<p>2000-2002</p>
<p>MRWC entered a dark time in its growth when the bank’s head office began a foreclosure. Daily phone calls continually pressured the Centre staff for the money.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2003-2005">
<div class="carousel-card">
<p>2003-2005</p>
<p>Through a great deal of hard work and a growing number of supporters, the debt was brought down from $443,000 to $150,000.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2003-2005">
<div class="carousel-card">
<p>2003-2005</p>
<p>Through a great deal of hard work and a growing number of supporters, the debt was brought down from $443,000 to $150,000.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2006-2012">
<div class="carousel-card">
<p>2006-2012</p>
<p>Things took a new turn for the Centre when the idea of unpaid staff was introduced in 2006. Accepting International volunteers as summer staff increased the workforce while reducing operational cost. There was a steep learning curve to develop
protocols to guide and teach 15 young people each summer, but the benefits outweighed the work.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2006-2012">
<div class="carousel-card">
<p>2006-2012</p>
<p>Things took a new turn for the Centre when the idea of unpaid staff was introduced in 2006. Accepting International volunteers as summer staff increased the workforce while reducing operational cost. There was a steep learning curve to develop
protocols to guide and teach 15 young people each summer, but the benefits outweighed the work.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2013-2020">
<div class="carousel-card">
<p>2013-2020</p>
<p>The City of Red Deer voted to provide MRWC with an annual payment of $25,000 for the work done to help injured wildlife, assist with wildlife conflict and provide education to the city.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2013-2020">
<div class="carousel-card">
<p>2013-2020</p>
<p>The City of Red Deer voted to provide MRWC with an annual payment of $25,000 for the work done to help injured wildlife, assist with wildlife conflict and provide education to the city.</p>
</div>
</div>
</div>
</div>