We Keep Coding

JavaScript carousel slider not working past the second slide

I am trying to create a JS carousel, and it is somewhat working, but not quite. After I clicked on the 'right' button, it slides to the second slide, but when I click it again, it gives the error 'cannot read properties of undefined (reading 'add). This goes for the adding of the 'active' class to the nextSlide I presume, but I can't seem to grasp what I am doing wrong. Also gives the error 'Cannot read properties of null (reading 'nextElementSibling')' when I tried to click to the third slide.
// CAROUSEL
const carousel = document.querySelector(".cards-wrapper");
const slides = [...carousel.children];
const nextButton = document.querySelector(".button-right");
const previousButton = document.querySelector(".button-left");
let slideWidth = slides[0].getBoundingClientRect();
function positionSlides(slides) {
for (let index = 0; index < slides.length; index++) {
slides[index].style.left = slideWidth * index + "px";
}
}
positionSlides(slides);
nextButton.addEventListener("click", () => {
const currentSlide = carousel.querySelector(".active");
const nextSlide = currentSlide.nextElementSibling.getBoundingClientRect();
const position = nextSlide.width;
console.log(position);
carousel.style.transform = `translateX(-${position}px)`;
currentSlide.classList.remove("active");
nextSlide.classList.add("active");
});
<div class="carousel">
<div class="cards-wrapper">
<div class="card active">
<picture>
<img src="https://s3.envato.com/files/158241052/1.jpg" alt="" />
</picture>
<h3>Slide 1</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
perspiciatis cumque consectetur vero eaque inventore fuga, nobis
reiciendis repudiandae, eius quo odio rem, esse saepe fugiat
quos deserunt dignissimos dolorem.
</p>
</div>
<div class="card">
<picture>
<img src="https://s3.envato.com/files/158241052/1.jpg" alt="" />
</picture>
<h3>Slide 2</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
perspiciatis cumque consectetur vero eaque inventore fuga, nobis
reiciendis repudiandae, eius quo odio rem, esse saepe fugiat
quos deserunt dignissimos dolorem.
</p>
</div>
<div class="card">
<picture>
<img src="https://s3.envato.com/files/158241052/1.jpg" alt="" />
</picture>
<h3>Slide 3</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
perspiciatis cumque consectetur vero eaque inventore fuga, nobis
reiciendis repudiandae, eius quo odio rem, esse saepe fugiat
quos deserunt dignissimos dolorem.
</p>
</div>
</div>
<button class="button-left">left</button>
<button class="button-right">right</button>
<div class="carousel-nav">
<button class="active">1</button>
<button>2</button>
<button>3</button>
</div>
</div>
Any thoughts?

facing issue in animation while reloading its working but normally while scrolling its not working

Facing issue in animation while reloading its working but normally while scrolling its not working. I want to add this section twice in a page every time when I scroll I need the animation to work
<div class="content"></div>
<div class="about hidden">
<h2>header</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo dolor, similique ea molestiae earum quas
sint accusantium itaque magnam laborum laboriosam, expedita qui nihil dicta soluta exercitationem quos
iste. Quam.</p>
</div>
<div class="content"></div>
<script>
(function(){
var aboutEl= $('div.about'),
aboutEloffset=aboutEl.offset().top/2,
documentEl= $(document);
documentEl.on('scroll',function(){
if(documentEl.scrollTop() >aboutEloffset && aboutEl.hasClass('hidden'))aboutEl.removeClass('hidden');
});
})();

Touch-action movement from last to first in html/css

I am using touch-action property in my carousel, it auto slides too and there is no problem in it. What i am trying to do is, when i am scrolling slider using touch-action, it slides but when it comes on last slide it stops. I just want that, it doesn't stop and came to first slide.
Here is my HTML :
<div id="testimonial-slider" class="owl-carousel">
<div class="testimonial">
<div class="pic">
<img src="image/pay.png">
</div>
<h3 class="title">Williamson</h3>
<span class="post">Web Developer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis placeat sit vitae, consectetur adipisicing elit ipsam.
</p>
</div>
<div class="testimonial">
<div class="pic">
<img src="image/pay.png">
</div>
<h3 class="title">Kristina</h3>
<span class="post">Web Designer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium ad asperiores at atque culpa dolores eaque fugiat hic illo ipsam ipsum minima modi necessitatibus nemo officia, omnis perferendis placeat sit vitae, consectetur adipisicing elit ipsam.
</p>
</div>
</div>
Here is my css :
.owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel{display:none;position:relative;width:100%;touch-action:default;}
.owl-carousel .owl-wrapper{display:none;position:relative;-webkit-transform:translate3d(0,0,0)}
.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}
.owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}
.owl-carousel .owl-item{float:left}.owl-controls .owl-page,.owl-controls .owl-buttons div{cursor:pointer}.owl-controls{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.grabbing{cursor:url(grabbing.png) 8 8,move}
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
Here is my script :
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:1,
itemsDesktop:[1000,1],
itemsDesktopSmall:[979,1],
itemsTablet:[768,1],
transitionStyle:"backSlide",
autoPlay:true
});
});

Owl Carousel had a built in loop option just use the loop:true Refer documentation : https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:1,
itemsDesktop:[1000,1],
itemsDesktopSmall:[979,1],
itemsTablet:[768,1],
transitionStyle:"backSlide",
autoplay:true,
loop:true // for looping ref https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
});
});
JS Fiddle Preview : https://jsfiddle.net/itsselvam/eaq0978s/

Calling External JS Link in PHP

I have 3 files for css, js, and php(which is more on html but i decided to put the php extension instead)
The project I'm trying to make is an interactive Menu that has a Page Flip action. I was able to find a reference in codepen. However, when I tried to apply it to my end, the animation and the text where not functioning the way I need it to be, although it works on codepen
The codes I used can also be find on the link i mentioned above. I just wanna ask how to properly call the external link https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js and https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js on the menu.php file?
This is how I did it on sublimetext. I am not sure if it is just the positioning of my files. the result on what I did is that all the text are all centered and no page flip occurring. Thanks for the help
Menu.php
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sakurajima Menu</title>
<link href="css/styles2.css" rel="stylesheet">
<script src="js/main2.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<link rel="shortcut icon" type="image/png" href="img/sakura-favicon.png"/>
</head>
<body>
<div class="container">
<div class="book-wrapper">
<div class="book-cover">
<img src="https://github.com/slyka85/assets/blob/master/bookcover2.png?raw=true" alt="">
</div>
<div class="pages-container">
<div class="pages">
<div class="page-num-1">
<div class="pages-content">
<div class="pages-background"></div>
<div class="content-inner">
<h1>Chapter 1</h1>
<div class="text"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas ea non vitae a assumenda sint quod, dolores laboriosam velit corrupti nobis cupiditate perspiciatis natus exercitationem, architecto esse ratione blanditiis! Itaque.</p></div>
</div>
</div>
</div>
<div class="page-num-2">
<div class="pages-content">
<div class="content-inner">
<h1>Chapter 2</h1>
<div class="text">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos, cumque autem! Magni eligendi qui officiis? Fugit iste voluptatum atque voluptatibus totam! Nisi accusantium saepe hic. Aut nobis nesciunt mollitia error.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quibusdam odio modi, hic ratione fugit quod natus, excepturi quae minus voluptatum cupiditate quia magnam eveniet ex, reiciendis voluptates ipsam iste laudantium!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati deserunt magnam, at perspiciatis aut. Voluptatem consequuntur neque quisquam?</p>
</div>
</div>
</div>
</div>
<div class="page-num-3">
<div class="pages-content">
<div class="content-inner">
<h1>Chapter 3</h1>
<div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate voluptas molestiae tempore amet adipisci dicta incidunt nisi alias distinctio fugit blanditiis dignissimos nobis deserunt eum consequuntur ipsam, perspiciatis numquam repellendus.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus in odio deserunt est hic minima inventore, mollitia, officia aspernatur eaque voluptatibus? Amet, molestias adipisci delectus ea eligendi sit numquam illo.</p>
</div>
</div>
</div>
</div>
<div class="page-num-4">
<div class="pages-content">
<div class="content-inner">
<h1>The End</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Put first the vendor libraries
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="js/main2.js" type="text/javascript"></script>

text over image not responsive in bootstrap

I have an image, over which I am putting some heading on the right and left side of the image like below
<div class="container-fluid no-padding">
<div class="row">
<div class="col-md-12">
<div class="col-sm-3 text-center image-overlapping">
<h1>Hello Suarj</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam omnis, ipsum eveniet minus amet.
</div>
<img src="http://oi65.tinypic.com/15oi0w9.jpg" class="ls-bg" alt="Slide background" style="width:100%; height:auto;">
<div class="col-sm-3 text-center image-overlapping right">
<h1>Hello Suarj</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam omnis, ipsum eveniet minus amet.
</div>
</div>
</div>
This works well for me, but it is not responsive for the mobile. How do I go about it.
Here's the fiddle for the same.

So I added this media-query
#media (max-width: 480px){
.image-overlapping {position: relative; top : 0 !important;}
}
And added col-xs-12 to the div which has my heading.
It works for me. Thanks for help.

Here you go with the solution https://jsfiddle.net/65upzvk6/18/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid no-padding">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-2 text-center image-overlapping">
<h1>Hello Suarj</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam omnis, ipsum eveniet minus amet. Provident, qui nisi voluptatum laboriosam ut vitae eaque nesciunt cumque omnis! Porro esse culpa fugiat molestias ab! Odit, quibusdam sunt consectetur optio ea velit accusamus voluptatem.
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-8">
<img src="http://oi65.tinypic.com/15oi0w9.jpg" class="ls-bg" alt="Slide background" style="width:100%; height:auto;" />
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-2 text-center image-overlapping">
<h1>Hello Suarj</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam omnis, ipsum eveniet minus amet. Provident, qui nisi voluptatum laboriosam ut vitae eaque nesciunt cumque omnis! Porro esse culpa fugiat molestias ab! Odit, quibusdam sunt consectetur optio ea velit accusamus voluptatem.
</div>
</div>
</div>
</div>
</div>
This is one more way to skip position absolute.