https://monroecollege.edu/themes/custom/monroe/pattern_lab/source/js/ourFamilyCarousel.js?tm6xbp

1(function ($) {
2  'use strict';
3
4  var self;
5  var breakpoint = window.matchMedia('(min-width: 768px)');
6
7  /**
8  * Main functionality should be in an 'init' function
9  */
10  var ourFamilyCarousel = function () {
11    self = $(this);
12    var $swiper = self.find('.swiper-container');
13
14    function swiperInit() {
15      self.swiper = new Swiper($swiper, {
16        pagination: {
17          el: $('.swiper-pagination', self),
18          type: 'bullets',
19          clickable: true,
20          bulletClass: 'swiper-pagination-customs',
21          bulletActiveClass: 'swiper-pagination-customs-active'
22        },
23        on: {
24          init: function () {
25            $('.swiper-slide:not(.swiper-slide-active)').attr('aria-hidden', true);
26            $('.swiper-slide-active').attr('aria-hidden', false);
27          },
28          slideChangeTransitionEnd: function () {
29            $('.swiper-slide-active:not(.swiper-slide-prev, .swiper-slide-next)').attr('aria-hidden', false);
30            $('.swiper-slide:not(.swiper-slide-active)').attr('aria-hidden', true);
31          }
32        }
33      });
34    }
35
36    var checkBreakpoint = function () {
37      if (breakpoint.matches) {
38        // true - Desktop - Disable swiping
39        if (self.swiper) {
40          self.swiper.destroy();
41        }
42      }
43      else {
44        // false - Mobile/Tablet - Lets swipe
45        swiperInit();
46      }
47    };
48
49    checkBreakpoint.apply(this);
50    breakpoint.addListener(checkBreakpoint.bind(this));
51  };
52
53  /**
54   * This is boilerplate: add a behavior to window.DP.behaviors
55   */
56  window.DP.behaviors.ourFamilyCarousel = {
57    attach: function (context) {
58      
59      $(once('ourFamilyCarousel', ".c--circles-with-images", context)).each(function () {
60        ourFamilyCarousel.apply(this);
61      });
62    }
63  };
64
65}(jQuery));