Slick 滑块使用数据属性对带有幻灯片的导航项进行分组

Question

我正在使用 Slick Slider JS 构建历史时间线。每个日期范围导航项都使用data-group 属性连接到多张幻灯片。当具有匹配data-group 属性的第一张幻灯片滑入视图时，我需要调整我的代码以使用上一个和下一个按钮向左或向右转换timeline__nav ul。

我现有的代码在下面的sn-p中。

$('.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>

Answer 1

动态时间线滑动滑块

给你。 动态分组和自动禁用导航（当没有与日期范围相关的幻灯片时）很好且可扩展。

基本上，我剥离了所有数据组属性，转而采用动态方法。在初始化时，迭代导航并应用数据组属性。然后解析日期范围并评估所有幻灯片以查看列出的日期是否适合该范围。我看到我们可以进行直接匹配（例如 1989 年到 1992 年），但是这样你就可以有像幻灯片一样的子集，从 1989 年到 1990 年或 1990-1991 年，它仍然会匹配那个日期范围。

我还稍微整理了您的功能，并添加了一个禁用的导航选项，该选项没有相关的日期范围幻灯片。

如果您的幻灯片只有一个日期 (1994) 或跨越 2 个不同集合 (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>