When I initially rushed my first answer, I provided a clear JavaScript representation of how modern Carousels typically function. The implementation details are up to you if you decide to utilize it.

Here's a detailed explanation of the JavaScript logic:

// 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>'
    );
    
    // More JavaScript code could go here...

This section covers the core functionality of the Carousel using JavaScript, allowing you to customize its behavior further based on your requirements.

For those interested in exploring innovative JavaScript projects, feel free to check out a library I've been developing: https://github.com/LapysDev/LapysJS.

If you want to enhance your galleries, consider using Slick. It provides a better amount of features compared to other gallery options. Check out Slick here

To address the sliding issue, I made some modifications to both the CSS and JS code. The changes ensure that the slide moves smoothly on one slide and also account for smaller screen resolutions.

Updated JS Code:

Revised CSS Styles:

The HTML remains unchanged, so you can continue using the same existing HTML code. If you have any further questions or issues, feel free to reach out. Best regards.

For efficiently setting and getting values in a group of elements, the recommended approach is to utilize the .map() method. You can view the detailed solution in 50 lines on CodePen (view on CodePen):

$(".faculty-carousel").map(function() {
  // Utilize that to reference child nodes within 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;

  // Define starting point for carousel movements by adding .is-active class to activeSlide
  slides.first().addClass("is-active");

  // Shift based on user click with 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;

  // Determine position of each slide and store it as an HTML attribute
  slides.each(function() {
    $(this).attr("data-slide", "" + x++ + "");
    $(this).click(function() {
      $(this).addClass("is-active").siblings().removeClass("is-active");
      
      // Call shiftCarousel() without any parameter
      shiftCarousel();
    });
  });

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

  // For handling mobile events, refer to Hammer API or native touchstart, touchcancel events
});

In this scenario, sticking with jQuery is more advisable. Oluwafunmito's solution suggests using innerHTML, which is a viable technique in vanilla JS. However, bear in mind that innerHTML may inadvertently expose your website to XSS attacks and should be used cautiously.

Experience the power of Swiper, the cutting-edge mobile touch slider that boasts hardware accelerated transitions and exceptional native functionality.

If you're struggling with your code, here's a fully functional carousel code using bootstrap and JavaScript that might provide some insights on where your program needs improvement. Take a look and see if it helps in debugging 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

Instead of applying the .each method to all slides in every carousel, focus on binding your function (along with the included pan) specifically to $('.faculty-carousel').each. This will streamline the process and optimize performance.