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();
})

/* / 
   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" href="style.css" />
<script src=".2.1/jquery.min.js"></script>
<script src=".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>

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" 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>

• javascript
• jquery
• css
• hammer.js

• 1 Why not just using an allready existing one instead of inventing the wheel again? Your slider looks alot like slick: kenwheeler.github.io/slick – Red Commented Sep 4, 2017 at 7:53
• @Red the purpose of this exercise is so that I could learn how to build UI components like sliders and carousel instead of using a third party resource. – clestcruz Commented Sep 4, 2017 at 8:17

7 Answers 7

Okay, my first answer here was done in a hurry but I believe I have a clear JavaScript representation of what most modern Carousels would function like, although the rest is up to you if you choose to use it.

Here is the JavaScript side of things well explained

// Index all Carousel
for (var i = 0; i < document.getElementsByClassName("carousel").length; i++) {
    // Create a container for all the slides
    document.getElementsByClassName("carousel")[i].innerHTML = (
        '<div class="slides-container">' +
            document.getElementsByClassName("carousel")[i].innerHTML +
        '</div>'
    );

    // If the Carousel is automated
    if (document.getElementsByClassName("carousel")[i].getAttribute("data-auto")) {
        // Remove all white-space in the Carousel's "data-auto" attribute.
        document.getElementsByClassName("carousel")[i].setAttribute("data-auto", document.getElementsByClassName("carousel")[i].getAttribute("data-auto").replace(/ /g, ""));

        // Set the Carousel direction
        document.getElementsByClassName("carousel")[i]._direction = String(document.getElementsByClassName("carousel")[i].getAttribute("data-auto").slice(0, document.getElementsByClassName("carousel")[i].getAttribute("data-auto").indexOf("_")));

        // Set the Carousel interval
        document.getElementsByClassName("carousel")[i]._interval = (parseFloat(document.getElementsByClassName("carousel")[i].getAttribute("data-auto").slice(document.getElementsByClassName("carousel")[i].getAttribute("data-auto").indexOf("_")).replace("_", "")) * 1000)
    };

    // Index all Carousel slides
    for (var j = 0; j < document.getElementsByClassName("carousel")[i].querySelector(".slides-container").children.length; j++)
        // Hide them
        document.getElementsByClassName("carousel")[i].querySelector(".slides-container").children[j].hidden = true;

        // Show the first one or the specified slide
        document.getElementsByClassName("carousel")[i].querySelector(".slides-container").children[(parseInt(document.getElementsByClassName("carousel")[i].getAttribute("data-active")) || 0)].hidden = false;

    // Carousel Next
    document.getElementsByClassName("carousel")[i]._next = function() {
        // Index all Carousel Slides
        for (var j = 0; j < this.querySelector(".slides-container").children.length; j++)
            // Show the next slide in the set
            if (this.querySelector(".slides-container").children[j].hidden == false) {
                this.querySelector(".slides-container").children[j].hidden = true;
                (this.querySelector(".slides-container").children[j].nextElementSibling || this.querySelector(".slides-container").children[0]).hidden = false;

                break
            }
    };

    // Carousel Previous
    document.getElementsByClassName("carousel")[i]._prev = function() {
        // Index all Carousel Slides
        for (var j = 0; j < this.querySelector(".slides-container").children.length; j++)
            // Show the previous slide in the set
            if (this.querySelector(".slides-container").children[j].hidden == false) {
                this.querySelector(".slides-container").children[j].hidden = true;
                (this.querySelector(".slides-container").children[j].previousElementSibling || this.querySelector(".slides-container").children[this.querySelector(".slides-container").children.length - 1]).hidden = false;

                break
            }
    };

    // Carousel Toggle
    document.getElementsByClassName("carousel")[i]._toggle = function(slideIndex) {
        // Index all Carousel Slides
        for (var j = 0; j < this.querySelector(".slides-container").children.length; j++)
            // Hide them
            this.querySelector(".slides-container").children[j].hidden = true;

        // Show the specified slide
        (this.querySelector(".slides-container").children[slideIndex] || document.createElement("div")).hidden = false
    };

    // If the Carousel Interval is a Number
    if (typeof document.getElementsByClassName("carousel")[i]._interval == "number") {
        // Index
        var index = i;

        // Set an interval to automate the Carousel
        setInterval(function() {
            // If the Carousel direction is right
            if (document.getElementsByClassName("carousel")[index]._direction == "right")
                document.getElementsByClassName("carousel")[index]._next();

            // If the Carousel direction is left
            else if (document.getElementsByClassName("carousel")[index]._direction == "left")
                document.getElementsByClassName("carousel")[index]._prev()
        }, document.getElementsByClassName("carousel")[i]._interval)
    }

    // If the Carousel has buttons
    if (document.getElementsByClassName("carousel")[i].hasAttribute("data-buttons"))
        // Make the Buttons Container
        document.getElementsByClassName("carousel")[i].innerHTML += (
            '<div class="buttons-container">' +
                '<button onclick="this.parentNode.parentNode._prev()"> Previous </button>' +
                '<button onclick="this.parentNode.parentNode._next()"> Next </button>' +
            '</div>'
        )

    // If the Carousel has indicators
    if (document.getElementsByClassName("carousel")[i].hasAttribute("data-indicators"))
        // Make the Indicators Container
        document.getElementsByClassName("carousel")[i].innerHTML += (
            '<div class="indicators-container">' +
                // Place as many checkboxes for as many slides there are
                (function() {
                    var indicators = "";

                    for (var k = 0; k < document.getElementsByClassName("carousel")[i].querySelector(".slides-container").children.length; k++)
                        indicators += (
                            '<input class="indicator-' + k + '" onclick="this.parentNode.parentNode._toggle(this.getAttribute(\'class\')[this.getAttribute(\'class\').length - 1])" type="checkbox">'
                        );

                    return indicators
                })() +
            '</div>'
        );

    // Add a click event to the Carousel
    document.getElementsByClassName("carousel")[i].addEventListener("click", function() {
        // Index all Carousel
        for (var j = 0; j < document.getElementsByClassName("carousel").length; j++)
            // If the Carousel indexed is not the target Carousel
            if (document.getElementsByClassName("carousel")[j] != this)
                // Blur it
                document.getElementsByClassName("carousel")[j].removeAttribute("data-focus");

            else
                // 'Focus' it
                document.getElementsByClassName("carousel")[j].setAttribute("data-focus", "")

        // If the mouse click is to the left of the carousel
        if (event.clientX < (this.getBoundingClientRect().left + (this.getBoundingClientRect().width / 2)))
            this._prev();

        // If the mouse click is to the right of the carousel
        else if ((event.clientX > (this.getBoundingClientRect().left + (this.getBoundingClientRect().width / 2))))
            this._next()
    })
};

// Attach an event to the <body>.
document.body.addEventListener("keydown", function() {
    switch (event.code) {
        // If the left arrow key is pressed
        case "ArrowLeft":
            document.querySelector(".carousel[data-focus")._prev();
            break;

        // If the right arrow key is pressed
        case "ArrowRight":
            document.querySelector(".carousel[data-focus")._next();
            break;
    }
})

in this section of the code for the Carousel, the .hidden property can be replaced with anything else but it gives a basic idea of how the slides pass on through the active and inactive states. as for the HTML part

<html>
    <body>
        <div class="carousel" data-active="1" data-auto="right_1" data-buttons data-indicators style="height: 300px">
            <div style="background: #F00; color: #FFF; font-size: 50px; height: 100%; line-height: 300px; text-align: center"> R </div>
            <div style="background: #0F0; color: #FFF; font-size: 50px; height: 100%; line-height: 300px; text-align: center"> G </div>
            <div style="background: #00F; color: #FFF; font-size: 50px; height: 100%; line-height: 300px; text-align: center"> B </div>
        </div>

        <!-- The JS script for the Carousel -->
        <script src="carousel.js"> </script>
    </body>
</html>

Everything has been simplified: the class of carousel to make a new Carousel, data-active attribute to state which slide is active (starts from 0), the data-auto attribute which specifies if the Carousel is automated or not (the right_ stands for the direction the automation and the _1 for how long the interval is), the data-buttons attribute if buttons are required, data-indicators if Carousel indicators are required and the slides as the children of the Carousel.

So yes, this is pretty much the HTML/JS code required for building a simple Carousel.

In case you're looking for anything exciting going on in the world of JavaScript, there is a library I'm working on that I think you might be interested in: https://github.com/LapysDev/LapysJS.

tru use Slick galleries, it is better amounth any galleries http://kenwheeler.github.io/slick/

When setting/getting values in a collection of elements, it's best to use .map(). Here's the answer in 50 lines (view on CodePen):

$(".faculty-carousel").map(function() {
  // Use that to refer to the child nodes of each carousel object instance
  var that = $(this),
    slides = that.find(".faculty-items li"),
    carousel = that.find(".faculty-items"),
    prevBtn = that.find(".prev"),
    nextBtn = that.find(".next"),
    slideLen = slides.length,
    slideCount = slideLen - 1;

  // Set reference point for carousel movements. The .is-active class will always 
  // be applied to the activeSlide, providing a reliable method for maintaining 
  // the carousel's state.
  slides.first().addClass("is-active");

  // Shift in response to user click. Accepts optional direction argument
  var shiftCarousel = function(direction) {
    var target = that.find(".is-active");
    var currentSlide = target.attr("data-slide");
    if (direction === "left" && currentSlide > 0) {
      currentSlide--;
      target.removeClass("is-active").prev().addClass("is-active");
    }
    if (direction === "right" && currentSlide < slideCount) {
      currentSlide++;
      target.removeClass("is-active").next().addClass("is-active");
    }
    var transformPercentage = -1 * currentSlide / slideLen * 100;
    carousel.css("transform", "translateX(" + transformPercentage + "% )");
  };

  var x = 0;

  // Get position of each slide and store it in an HTML attribute
  slides.each(function() {
    $(this).attr("data-slide", "" + x++ + "");
    $(this).click(function() {
      $(this).addClass("is-active").siblings().removeClass("is-active");

      // Invoke shiftCarousel() without a parameter
      shiftCarousel();
    });
  });

  // Invoke shiftCarousel() with a parameter
  prevBtn.on("click", function() {
    shiftCarousel("left");
  });
  nextBtn.on("click", function() {
    shiftCarousel("right");
  });

  // to manage mobile events, you can reference events via Hammer API 
  // or JavaScript's built-in touchstart, touchcancel  etc. events i.e.
  // prevBtn.on('touchstart', function() {
    // do something
  // });
});

It's better to stick with jQuery here. Oluwafunmito's solution uses innerHTML, which is the only practical technique if using vanilla JS. However, innerHTML can inadvertently expose your website visitors to an XSS attack and should be avoided whenever possible.

The following should fix your slide issue. I added some code to the CSS and JS ensuring the slide will move at one slide and worked on smaller screen resolution also.

The Code:

    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 + .3338;
                    else if (percentage > 0)
                        newSlide = activeSlide - .3338;
                    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 {
        position   : relative;
        right      : 47px;
        display : flex;
        -webkit-transition: transform 0.3s linear;
    }
    .faculty-carousel .controls {
        display : inline-block;
    }

<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>
  <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>

The HTML: I left it unchanged, so just use the same HTML you have. Best regards.

You can use swiper. most modern mobile touch slider with hardware accelerated transitions and amazing native behaviour.

Instead of going through your whole code I can provide you with a fully functional carousel code using bootstrap and JavaScript. maybe this will give a hint about where your program is lacking and a bit of help in unerring your code.

<div id="mycarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
            <!-- Indicators -->
<ol class="carousel-indicators">
    <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
    <li data-target="#mycarousel" data-slide-to="1"></li>
    <li data-target="#mycarousel" data-slide-to="2"></li>
</ol>
            <!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
    <div class="item active">
        <img class="img-responsive"
         src="img/uthappizza.png" alt="Uthappizza">
        <div class="carousel-caption">
        <h2>Uthappizza  <span class="label label-danger">Hot</span> <span class="badge">$4.99</span></h2>
        <p>A unique combination of Indian Uthappam (pancake) and
          Italian pizza, topped with Cerignola olives, ripe vine
          cherry tomatoes, Vidalia onion, Guntur chillies and
          Buffalo Paneer.</p>
        <p><a class="btn btn-primary btn-xs" href="#">More &raquo;</a></p>
        </div>
    </div>
    <div class="item">
      <img class="media-object img-thumbnail"
       src="img/buffet.png" alt="Buffet">
        <div class="carousel-caption">
          <h2>Weekend Grand Buffet <span class="label label-danger">New</span> </h2>
          <p>Featuring mouthwatering combinations with a choice of five different salads,
             six enticing appetizers, six main entrees and five choicest desserts.
              Free flowing bubbly and soft drinks. All for just $19.99 per person</p>
          <p><a class="btn btn-primary btn-xs" href="#">More &raquo;</a></p>
          </div>
    </div>
    <div class="item">
      <img class="media-object img-thumbnail"
       src="img/alberto.png" alt="Alberto Somayya">
        <div class="carousel-caption">
          <h2 >Alberto Somayya</h2>
          <h4>Executive Chef</h4>
          <p>Award winning three-star Michelin chef with wide
           International experience having worked closely with
           whos-who in the culinary world, he specializes in
            creating mouthwatering Indo-Italian fusion experiences.
           </p>
           <p><a class="btn btn-primary btn-xs" href="#">More &raquo;</a></p>

        </div>
    </div>
    <!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>

</a>
<div class="btn-group" id="carouselButtons">
    <button class="btn btn-danger btn-sm" id="carousel-pause">
      <span class="fa fa-pause" aria-hidden="true"></span>
    </button>
    <button class="btn btn-danger btn-sm" id="carousel-play">
      <span class="fa fa-play" aria-hidden="true"></span>
    </button>
</div>

</div>
          </div>

JavaScript

<script>
    $('.carousel').carousel('pause')
</script>
<script>
    $(".btn-group > .btn").click(function(){
    $(this).addClass("active").siblings().removeClass("active");
    });
</script>
<script>
$(document).ready(function(){
    //$("#mycarousel").carousel( { interval: 2000 } );
                  $("#carousel-pause").click(function(){
        $("#mycarousel").carousel('pause');
    });
                $("#carousel-play").click(function(){
        $("#mycarousel").carousel('cycle');
    });
  });
</script>

credits:coursera

Your using the .each on all of the slides on all of the carousels, setting up a pan event and animation for each slide. Try only binding your function (and the included pan) on $('.faculty-carousel').each