Carousel slides incorrectly when swiping or when clicking the slider controls (next/prev)

I’ve just finished building a carousel I’ve been working on that uses swipe/touch and also uses controls such as prev/next to control the carousel. Right now I’m having an issue regarding about the carousel behavior. Basically I’m trying to make it slide one by one. Here is a sample of the code I’ve been working on. Right now it seems to be sliding by 2 or 3 depending on how many carousel I’ve placed.

I’m also having an issue with regards to making it responsive also

function fCarousel() {
  // var activeSlide = 0;
  // $('.faculty-carousel').attr('data-slide', '0');

  var viewPortSize        = $(window).width(),
      facultyPanel = $('.faculty-carousel .faculty-items li'),
      profileCount = facultyPanel.length,
      activeSlide         = 0,
      carousel            = $('.faculty-carousel .faculty-items');

  $('.faculty-carousel').attr('data-slide', '0');

  //Set Panel Size based on viewport

  if (viewPortSize <= 1920 ) {
      var profilePanelSize = viewPortSize / 5
  }

  if (viewPortSize < 1024 ) {
      var profilePanelSize = viewPortSize / 4
  }

  if (viewPortSize < 768 ) {
      var profilePanelSize = viewPortSize / 3
  } 

  if (viewPortSize < 480 ) {
      var profilePanelSize = viewPortSize
  }

  carousel.outerWidth( profilePanelSize * profileCount );
  facultyPanel.outerWidth(profilePanelSize);
  carousel.css('transform', 'translateX(' + 0 + '% )');

  $('.prev').on('click', function(e) {
      event.stopPropagation();

    var carouselWrapper     = $(this).closest('.faculty-carousel'),
        facultyProfilePanel = carouselWrapper.find('.faculty-items li'),
        facultyProfileCount = facultyProfilePanel.length,
        viewPortSize        = $(window).width(),
        carousel = carouselWrapper.find('.faculty-items'),
        position            = 0,
        currentSlide        = parseInt(carouselWrapper.attr('data-slide'));

      // Check if data-slide attribute is greater than 0
      if (currentSlide > 0) {
          // Decremement current slide
          currentSlide--;
          // Assign CSS position to clicked slider
          var transformPercentage = -1 * currentSlide / facultyProfileCount * 100;
          carousel.css('transform', 'translateX(' + transformPercentage + '% )');
          // Update data-slide attribute
          carouselWrapper.attr('data-slide', currentSlide);
          activeSlide = currentSlide;
      }
  });

  $('.next').on('click', function(e) {
      event.stopPropagation();
      // store variable relevent to clicked slider

    var carouselWrapper     = $(this).closest('.faculty-carousel'),
        facultyProfilePanel = carouselWrapper.find('.faculty-items li'),
        facultyProfileCount = facultyProfilePanel.length,
        viewPortSize   = $(window).width(),
        carousel = carouselWrapper.find('.faculty-items'),
        position = 0,
        currentSlide = parseInt(carouselWrapper.attr('data-slide'));

      // Check if dataslide is less than the total slides
      if (currentSlide < facultyProfileCount - 1) {
          // Increment current slide
          currentSlide++;
          // Assign CSS position to clicked slider
          var transformPercentage = -1 * currentSlide / facultyProfileCount * 100;
          carousel.css('transform', 'translateX(' + transformPercentage + '% )');
          // Update data-slide attribute
          carouselWrapper.attr('data-slide', currentSlide);
          activeSlide = currentSlide;
      }
  })

    $('.faculty-carousel .faculty-items').each(function() {

        // create a simple instance
        // by default, it only adds horizontal recognizers

        var direction;
        var touchSlider = this;
        var mc = new Hammer.Manager(this),
            itemLength = $(this).find('li').length,
            count = 0,
            slide = $(this),
            timer;

        var sliderWrapper = slide,
            slideItems = sliderWrapper.find('li'),
            //slider = sliderWrapper.find('li'),
            totalPanels = slideItems.length,
            currentSlide = parseInt(sliderWrapper.attr('data-slide'));

        // mc.on("panleft panright", function(ev) {
        //   direction = ev.type;
        // });

        mc.add(new Hammer.Pan({
            threshold: 0,
            pointers: 0
        }))
        mc.on('pan', function(e) {
            var percentage = 100 / totalPanels * e.deltaX / window.innerWidth;
            var transformPercentage = percentage - 100 / totalPanels * activeSlide;
            touchSlider.style.transform = 'translateX( ' + transformPercentage + '% )';
            var sliderWrapper = $(e.target).closest('.faculty-carousel')


            if (e.isFinal) { // NEW: this only runs on event end

                var newSlide = activeSlide;
                if (percentage < 0)
                    newSlide = activeSlide + 1;
                else if (percentage > 0)
                    newSlide = activeSlide - 1;
                goToSlide(newSlide, sliderWrapper);
            }
        });


        var goToSlide = function(number, sliderWrapper) {
            if (number < 0)
                activeSlide = 0;
            else if (number > totalPanels - 1)
                activeSlide = totalPanels - 1
            else
                activeSlide = number;

            sliderWrapper.attr('data-slide', activeSlide);

            touchSlider.classList.add('slide-animation');
            var percentage = -(100 / totalPanels) * activeSlide;
            touchSlider.style.transform = 'translateX( ' + percentage + '% )';
            timer = setTimeout(function() {
                touchSlider.classList.remove('slide-animation');
            }, 400);

        };
    });

}

$(document).ready(function() {
  fCarousel();
})

$(window).on('resize', function(){
  fCarousel();
})
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.faculty-items li {
    height : 100px;
}
.faculty-items li:nth-child(odd) {
    background-color : grey;
}
.faculty-items li:nth-child(even) {
    background-color : aqua
}
.faculty-items {
    overflow   : hidden;
    position   : relative;
    right      : 0;
    display : flex;
    -webkit-transition: transform 0.3s linear;
}
.faculty-carousel .controls {
    display : block;
}
<!doctype html>
<html>
<head>
<title>Carousel</title>
<link rel="stylesheet" target="_blank" rel="nofollow" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
</head>
<body>
  <div class="faculty-carousel">
    <ul class="faculty-items">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>

    <div class="controls">
      <div class="prev">
        prev
      </div>

      <div class="next">
        next
      </div>
    </div>
  </div>


  <div class="faculty-carousel">
    <ul class="faculty-items">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>

    <div class="controls">
      <div class="prev">
        prev
      </div>

      <div class="next">
        next
      </div>
    </div>
  </div>

  <div class="faculty-carousel">
    <ul class="faculty-items">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>

    <div class="controls">
      <div class="prev">
        prev
      </div>

      <div class="next">
        next
      </div>
    </div>
  </div>
</body>
</html>

This might be a half-arsed answer but in a framework I’m working on called LapysJS, you can use the Carousel class on a container element that makes it a slide-show styled according to how you want it.

<!-- A Carousel that goes to the next slide every 1 -->
<div class="carousel" data-auto="right_1" data-buttons="true" data-indicators="true">
   <div style="background: #F00"> </div>
   <div style="background: #0F0"> </div>
   <div style="background: #00F"> </div>
</div>

Although this Carousel should be in the HTML code before the JavaScript framework runs.

The URL for the framework is here, if you’re feeling up to it you could also scrap the code and tear out the Carousel plug-in in it.
https://github.com/LapysNights/LapysJS