I am using Slick Slider JS to build out a history timeline. Each date range navigation item is connected to multiple slides using a data-group attribute. I am needing to adapt my code to transition the timeline__nav ul left or right using the previous and next buttons when the first slide with a matching data-group attribute slides into view.
My existing code is in the snippet below.
$('.timeline__slider').slick({
infinite: false,
arrows: false,
dots: false,
autoplay: false,
speed: 800,
cssEase: 'linear',
slidesToShow: 2,
slidesToScroll: 2,
responsive: [{
breakpoint: 800,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
var timeLineItem = $('.timeline__nav li').css("width");
var left = $('.timeline__nav li').offset().left;
$('.js-previous-slide').click(function() {
$('.timeline__slider').slick('slickPrev');
// If the first timeline__item in data-group and it matches the
// timeline__nav item's data-group attribute, animate left.
$('.timeline__nav ul').animate({
'left': '+=' + timeLineItem
}, 150, function() {});
});
$('.js-next-slide').click(function() {
$('.timeline__slider').slick('slickNext');
// If the first timeline__item in data-group and it matches the
// timeline__nav item's data-group attribute, animate right.
$('.timeline__nav ul').animate({
'left': '-=' + timeLineItem
}, 150, function() {});
});
$('.timeline__slider').on('afterChange', function(event, slick, currentSlide, nextSlide) {
if (currentSlide === 0) {
$('.js-previous-slide').prop('disabled', true);
$('.js-previous-slide').addClass('is-disabled');
} else {
$('.js-previous-slide').prop('disabled', false);
$('.js-previous-slide').removeClass('is-disabled');
}
if (slick.slideCount === currentSlide + 1) {
$('.js-next-slide').prop('disabled', true);
$('.js-next-slide').addClass('is-disabled');
} else {
$('.js-next-slide').prop('disabled', false);
$('.js-next-slide').removeClass('is-disabled');
}
$('.timeline__nav li.is-active').removeClass('is-active');
$('.slick-current .timeline__item').each(function() {
$('.timeline__nav li[data-group="' + $(this).attr('data-group') + '"').addClass('is-active');
});
});body {
font: normal 1rem/1 "Open Sans", sans-serif;
color: #4d4d4d;
}
.section {
margin: 0 1.25rem;
padding: 6rem 0;
position: relative;
background-color: #f7f7f7;
-webkit-clip-path: polygon(0 6%, 1640px 0, 1640px 100%, 0 100%);
clip-path: polygon(0 6%, 1640px 0, 1640px 100%, 0 100%);
}
.timeline {
max-width: 1300px;
margin: 0 auto;
overflow: hidden;
}
.timeline__nav {
margin-bottom: 40px;
overflow: hidden;
border: 1px solid red;
}
.timeline__nav ul {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
margin: 0;
padding: 0 1rem;
position: relative;
overflow-x: auto;
transition-duration: 1s;
transition-property: transform;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
-ms-overflow-style: none;
scrollbar-width: none;
list-style: none;
}
/* .timeline__nav ul::after {
content: "";
width: 1rem;
height: 1rem;
position: absolute;
top: 9px;
right: 0;
z-index: 2;
background-color: #c2c2c2;
border-radius: 50%;
} */
.timeline__nav li {
flex: 0 0 auto;
position: relative;
transition: transform 150ms ease-in-out;
}
@media screen and (min-width: 1000px) {
.timeline__nav li {
flex: 1 0 auto;
}
}
.timeline__nav li::before {
content: "";
width: 1rem;
height: 1rem;
position: absolute;
top: 9px;
left: 0;
z-index: 2;
background-color: #A4475B;
border-radius: 50%;
transition: transform 100ms ease-in-out;
pointer-events: none;
}
.timeline__nav li.is-active::before {
background-color: #89102A;
transform: scale(1.4);
}
.timeline__nav li::after {
content: "";
width: 100%;
height: 3px;
position: absolute;
top: 1rem;
left: 0;
z-index: 1;
background-color: #C2C2C2;
pointer-events: none;
}
.timeline__nav li:last-child::after {
background-color: transparent;
}
.timeline__nav a {
display: inline-block;
padding: 2.5rem 2.5rem 0 0;
top: 0;
position: relative;
transform: none;
transition: color 100ms ease-in-out;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
line-height: 1.4;
color: #A4475B;
}
@media screen and (min-width: 1000px) {
.timeline__nav a {
padding: 2.5rem 0 0;
}
}
.timeline__nav li.is-active a {
color: #89102A;
}
.timeline__slider {
padding: 0 1rem;
}
.timeline__item-inner {
padding-right: 5rem;
}
h2 {
padding: 2rem 0;
text-align: center;
font-weight: 700;
font-size: 1.625rem;
line-height: 1.7;
}
p {
font-size: 1.1875rem;
line-height: 1.7;
}
.timeline__controls {
padding: 0 1rem;
}<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
<!--Timeline-->
<section class="section">
<div class="timeline">
<h2>Our History</h2>
<nav class="timeline__nav">
<ul>
<li class="item is-active" data-group="group1">
<a href="#">1984 to 1988</a>
</li>
<li class="item" data-group="group2">
<a href="#">1989 to 1992</a>
</li>
<li class="item" data-group="group3">
<a href="#">1993 to 1999</a>
</li>
<li class="item" data-group="group4">
<a href="#">2000 to 2002</a>
</li>
<li class="item" data-group="group5">
<a href="#">2003 to 2005</a>
</li>
<li class="item" data-group="group6">
<a href="#">2006 to 2012</a>
</li>
<li class="item" data-group="group7">
<a href="#">2013 to 2020</a>
</li>
<li class="item" data-group="group8">
<a href="#">2021 to 2023</a>
</li>
</ul>
</nav>
<div class="timeline__slider">
<!--Timeline item-->
<div class="timeline__item" data-group="group1">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1984 to 1988</h3>
<p>
<strong>The Early Years</strong>
</p>
<p>Sample content.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item" data-group="group1">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1984 to 1988</h3>
<p>Sample content.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item" data-group="group1">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1984 to 1988</h3>
<p>Sample content.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item" data-group="group1">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1984 to 1988</h3>
<p>Sample content.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item" data-group="group1">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1984 to 1988</h3>
<p>Sample content.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item" data-group="group1">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1984 to 1988</h3>
<p>Sample content.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1984 to 1988 -->
<!--Timeline item-->
<div class="timeline__item" data-group="group2">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1989 to 1992</h3>
<p>Sample content.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item" data-group="group2">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1989 to 1992</h3>
<p>Sample content.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item" data-group="group2">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1989 to 1992</h3>
<p>In 1990, a grant for $175,000 was received from the federal government to build a facility, thanks to a Board member who introduced MRWC to the concept of funding applications. The 5,000 square foot facility was built with home-grade materials,
and no blueprints or contractors. It was well ahead of most wildlife rehabilitation centres at that time and seemed far too big to ever fill. Little did we realize what was coming.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1989 to 1992 -->
<!--Timeline item-->
<div class="timeline__item" data-group="group3">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>A 4-section, large raptor cage was built over several months for recovering birds of prey with donated labour and materials.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item" data-group="group3">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>A nature trail and observation tower overlooking the wetland were constructed, once again, with donated materials and labour.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item" data-group="group3">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>About this time, Carol assisted in the formation of the Alberta Wildlife Rehabilitators Association (AWRA).</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item" data-group="group3">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>Requests for services began to come from many areas such as schools, organizations, members of the public, correctional institutions, foster care, and social services. MRWC kept saying “yes” to all these requests, stretching the resources and
energy much too far.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item" data-group="group3">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>Funding didn't come as fast as the requests for services did, so soon debt began to build. MRWC had a banker who, when asked how to find ways to meet budget, would just approve a bigger loan.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item" data-group="group3">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item" data-group="group4">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item" data-group="group4">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item" data-group="group5">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item" data-group="group5">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item" data-group="group6">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item" data-group="group6">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item" data-group="group7">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item" data-group="group7">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item" data-group="group8">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item" data-group="group8">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
</div>
<div class="timeline__controls">
<button class="previous js-previous-slide is-disabled" disabled="">Previous</button>
<button class="next js-next-slide">Next</button>
</div>
</div>
</section>Advertisement
Answer
Dynamic Timeline Slick Slider
Here you go. It’s nice and scalable with dynamic grouping and auto-disabled nav (when no slides correlate to the date range).
Basically, I stripped away all the data-group attributes and instead went for a dynamic approach. At initialization, the navigation is iterated and data-group attr’s are applied. Then the date range is parsed and all slides evaluated to see if the date listed fits into the range. I saw that we could do a direct match (1989 to 1992 for example), but this way you could have subsets like a slide that was from 1989 to 1990 or 1990-1991 and it would still match that date range.
I also tidied up your functions a little and added in a disabled option for navigation that had no correlating date range slides.
This can be easily extended in case you have slides with just one date (1994) or a date range that spans 2 different sets (1990-2010).
$('.timeline__slider').slick({
infinite: false,
arrows: false,
dots: false,
autoplay: false,
speed: 800,
cssEase: 'ease-in-out',
slidesToShow: 2,
slidesToScroll: 2,
responsive: [{
breakpoint: 800,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
$('.js-previous-slide').on("click", () => moveSlide(-1));
$('.js-next-slide').on("click", () => moveSlide(1));
function moveSlide(inc) {
if (inc > 0) $('.timeline__slider').slick('slickNext');
else $('.timeline__slider').slick('slickPrev');
}
$('.timeline__slider').on('afterChange', function(event, slick, currentSlide, nextSlide) {
$('.js-previous-slide')
.prop('disabled', currentSlide === 0)
.addClass(() => currentSlide === 0 && 'is-disabled' || '')
.removeClass(() => currentSlide !== 0 && 'is-disabled' || '')
let isLastSlide = slick.slideCount === currentSlide + 1;
$('.js-next-slide')
.prop('disabled', isLastSlide)
.addClass(() => isLastSlide && 'is-disabled' || '')
.removeClass(() => !isLastSlide && 'is-disabled' || '')
$('.timeline__nav li.is-active').removeClass('is-active');
$('.timeline__nav li[data-group="' + $('.slick-current').data('group') + '"').addClass('is-active');
//console.log($('.timeline__nav ul').css('transform'))
let xAdjust = (($('.slick-current').data('group')-1) * 100);
$('.timeline__nav ul').css('transform',`translateX(-${xAdjust}px)`)
});
// set up the timeline items with their groups
let groupNum = 1;
$('nav.timeline__nav li').each(function() {
let [from, to] = $(this).text().trim().split('to');
from = +from.trim();
to = +to.trim();
$(this).attr('data-group', groupNum);
let dataGroup = groupNum;
found = false
$('.slick-slide').each(function() {
let [ifrom, ito] = $(this).find('h3.year').text().trim().split('to');
ifrom = +ifrom.trim();
ito = +ito.trim();
if (ifrom >= from && ito <= to) {
$(this).attr('data-group', dataGroup);
found = true
}
})
if (!found) {
$(this).addClass('disabled')
}
groupNum++;
})
// set up the click listener
$('nav.timeline__nav li').click(function() {
let match = $('.slick-slide[data-group=' + $(this).data('group') + ']')
let slidenum = $('.slick-slide').index(match);
if (slidenum >= 0) $('.timeline__slider').slick('slickGoTo', slidenum);
// console.log('slidenum', slidenum, 'datag',$(this).data('group'));
})body {
font: normal 1rem/1 "Open Sans", sans-serif;
color: #4d4d4d;
}
.section {
margin: 0 1.25rem;
padding: 6rem 0;
position: relative;
background-color: #f7f7f7;
-webkit-clip-path: polygon(0 6%, 1640px 0, 1640px 100%, 0 100%);
clip-path: polygon(0 6%, 1640px 0, 1640px 100%, 0 100%);
}
.timeline {
max-width: 1300px;
margin: 0 auto;
overflow: hidden;
}
.timeline__nav {
margin-bottom: 40px;
overflow: hidden;
/* border: 1px solid red;*/
}
.timeline__nav ul {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
margin: 0;
padding: 0 1rem;
position: relative;
overflow-x: hidden;
transition-duration: 1s;
transition-property: transform;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
-ms-overflow-style: none;
scrollbar-width: none;
list-style: none;
}
/* .timeline__nav ul::after {
content: "";
width: 1rem;
height: 1rem;
position: absolute;
top: 9px;
right: 0;
z-index: 2;
background-color: #c2c2c2;
border-radius: 50%;
} */
.timeline__nav li {
flex: 0 0 auto;
position: relative;
transition: transform 150ms ease-in-out;
cursor: pointer;
}
@media screen and (min-width: 1000px) {
.timeline__nav li {
flex: 1 0 auto;
}
}
.timeline__nav li::before {
content: "";
width: 1rem;
height: 1rem;
position: absolute;
top: 9px;
left: 0;
z-index: 2;
background-color: #A4475B;
border-radius: 50%;
transition: transform 100ms ease-in-out;
pointer-events: none;
}
.timeline__nav li.is-active::before {
background-color: #89102A;
transform: scale(1.4);
}
.timeline__nav li::after {
content: "";
width: 100%;
height: 3px;
position: absolute;
top: 1rem;
left: 0;
z-index: 1;
background-color: #C2C2C2;
pointer-events: none;
}
.timeline__nav li:last-child::after {
background-color: transparent;
}
.timeline__nav a {
display: inline-block;
padding: 2.5rem 2.5rem 0 0;
top: 0;
position: relative;
transform: none;
transition: color 100ms ease-in-out;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
line-height: 1.4;
color: #A4475B;
}
.timeline__nav li.disabled {
opacity: .3;
}
.timeline__nav li.disabled a {
cursor: arrow;
}
@media screen and (min-width: 1000px) {
.timeline__nav a {
padding: 2.5rem 0 0;
}
}
.timeline__nav li.is-active a {
color: #89102A;
}
.timeline__slider {
padding: 0 1rem;
}
.timeline__item-inner {
padding-right: 5rem;
}
h2 {
padding: 2rem 0;
text-align: center;
font-weight: 700;
font-size: 1.625rem;
line-height: 1.7;
}
p {
font-size: 1.1875rem;
line-height: 1.7;
}
.timeline__controls {
padding: 0 1rem;
}<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
<!--Timeline-->
<section class="section">
<div class="timeline">
<h2>Our History</h2>
<nav class="timeline__nav">
<ul>
<li class="item is-active">
<a href="javascript:void(0)">1984 to 1988</a>
</li>
<li class="item">
<a href="javascript:void(0)">1989 to 1992</a>
</li>
<li class="item">
<a href="javascript:void(0)">1993 to 1999</a>
</li>
<li class="item">
<a href="javascript:void(0)">2000 to 2002</a>
</li>
<li class="item">
<a href="javascript:void(0)">2003 to 2005</a>
</li>
<li class="item">
<a href="javascript:void(0)">2006 to 2012</a>
</li>
<li class="item">
<a href="javascript:void(0)">2013 to 2020</a>
</li>
<li class="item">
<a href="javascript:void(0)">2021 to 2023</a>
</li>
</ul>
</nav>
<div class="timeline__slider">
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1984 to 1988</h3>
<p>
<strong>The Early Years</strong>
</p>
<p>Sample content.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1984 to 1988</h3>
<p>Sample content.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1984 to 1988</h3>
<p>Sample content.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1984 to 1988</h3>
<p>Sample content.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1984 to 1988</h3>
<p>Sample content.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1984 to 1988</h3>
<p>Sample content.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1984 to 1988 -->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1989 to 1992</h3>
<p>Sample content.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1989 to 1992</h3>
<p>Sample content.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1989 to 1992</h3>
<p>In 1990, a grant for $175,000 was received from the federal government to build a facility, thanks to a Board member who introduced MRWC to the concept of funding applications. The 5,000 square foot facility was built with home-grade materials,
and no blueprints or contractors. It was well ahead of most wildlife rehabilitation centres at that time and seemed far too big to ever fill. Little did we realize what was coming.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1989 to 1992 -->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>A 4-section, large raptor cage was built over several months for recovering birds of prey with donated labour and materials.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>A nature trail and observation tower overlooking the wetland were constructed, once again, with donated materials and labour.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>About this time, Carol assisted in the formation of the Alberta Wildlife Rehabilitators Association (AWRA).</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>Requests for services began to come from many areas such as schools, organizations, members of the public, correctional institutions, foster care, and social services. MRWC kept saying “yes” to all these requests, stretching the resources and
energy much too far.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>Funding didn't come as fast as the requests for services did, so soon debt began to build. MRWC had a banker who, when asked how to find ways to meet budget, would just approve a bigger loan.</p>
</div>
</div>
<!--/Timeline item-->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
<!--Timeline item-->
<div class="timeline__item">
<div class="timeline__image">
</div>
<div class="timeline__item-inner">
<h3 class="year">1993 to 1999</h3>
<p>In 1995, a full time Education Coordinator was hired, and the formal on-site and off-site programs increased.</p>
</div>
</div>
<!--/Timeline item-->
<!-- End 1993 to 1999 -->
</div>
<div class="timeline__controls">
<button class="previous js-previous-slide is-disabled" disabled="">Previous</button>
<button class="next js-next-slide">Next</button>
</div>
</div>
</section>