Develop Reference

Owl Carousel card not centered

I am having trouble getting my owl carousel to be centered on my website. I have implemented the owl carousel to display testimonials from customers on my landing page. However, the carousel seems to be slightly off to the right and not straight with the testimonial title. I have tried various solutions, such as adjusting the width of the carousel, double checking the HTML for any errors, and even rewriting the JS, but none of these solutions seem to work. Can anyone help me figure out what's causing this issue and how to properly center the owl carousel on my website?
this is my code :
.owl-item.center .testimonial-card {
transform: scale(0.8);
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.9);
}
.testimonial-card {
width: 500px;
padding: 20px;
display: flex;
flex-direction: row;
border-radius: 20px;
background: white;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
text-align: center;
align-content: space-evenly;
justify-content: center;
transform: scale(0.5);
transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1);
}
.testimonial-content {
display: flex;
flex-direction: column;
}
.testi-img {
width: 100%;
height: 100%;
position: relative;
}
.testi-title {
background-color: #FFF;
box-shadow: 0 2px 6px rgba(0, 0, 0, 1);
text-align: center;
border-radius: 40px;
margin-top: 30px;
padding: 30px;
width: 40%;
margin-inline: auto;
font-weight: bold;
}
$(".owl-testimonials").owlCarousel({
loop: true,
item: 3,
startPosition: 1,
center: true,
autoplay: false,
autoplayTimeout: 3000,
autoplayHoverPause: true,
});
<div class="testi-title"> Testimonial</div>
<section class="owl-carousel owl-testimonials">
<div class="testimonial-card">
<img class="testi-img" src="images/team/team2.jpg" alt="Testimonial 1">
<div class="testimonial-content">
<span class="date">1 days ago</span>
<h4>Testimonial One</h4>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
<div class="testimonial-card">
<img class="testi-img" src="images/team/team1.jpg" alt="Testimonial 2">
<div class="testimonial-content">
<span class="date">1 days ago</span>
<h4>Testimonial One</h4>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
<div class="testimonial-card">
<img class="testi-img" src="images/team/team3.jpg" alt="Testimonial 3">
<div class="testimonial-content">
<span class="date">1 days ago</span>
<h4>Testimonial One</h4>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
</section>

This issue was created because you decleared fixed width on .testimonial-card class. If you update the width:500px to 100% it will fix the issue.
You can check the pen also to get the solution.
https://codepen.io/salmanaabir/pen/vYawZYb
$( document ).ready(function() {
$(".owl-testimonials").owlCarousel({
loop: true,
item: 3,
startPosition: 1,
center: true,
autoplay: false,
autoplayTimeout: 3000,
autoplayHoverPause: true,
});
});
.owl-item.center .testimonial-card {
transform: scale(0.8);
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.9);
}
.testimonial-card {
width: 100%;
padding: 20px;
display: flex;
flex-direction: row;
border-radius: 20px;
background: white;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
text-align: center;
align-content: space-evenly;
justify-content: center;
transform: scale(0.5);
transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1);
}
.testimonial-content {
display: flex;
flex-direction: column;
}
.testi-img {
width: 100%;
height: 100%;
position: relative;
}
.testi-title {
background-color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 1);
text-align: center;
border-radius: 40px;
margin-top: 30px;
padding: 30px;
width: 40%;
margin-inline: auto;
font-weight: bold;
}
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css' />
<div class="testi-title"> Testimonial</div>
<section class="owl-carousel owl-testimonials">
<div class="testimonial-card">
<img class="testi-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcg4Y51XjQ-zSf87X4nUPTQzsF83eFdZswTg&usqp=CAU" alt="Testimonial 1">
<div class="testimonial-content">
<span class="date">1 days ago</span>
<h4>Testimonial One</h4>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
<div class="testimonial-card">
<img class="testi-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcg4Y51XjQ-zSf87X4nUPTQzsF83eFdZswTg&usqp=CAU" alt="Testimonial 2">
<div class="testimonial-content">
<span class="date">1 days ago</span>
<h4>Testimonial One</h4>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
<div class="testimonial-card">
<img class="testi-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcg4Y51XjQ-zSf87X4nUPTQzsF83eFdZswTg&usqp=CAU" alt="Testimonial 3">
<div class="testimonial-content">
<span class="date">1 days ago</span>
<h4>Testimonial One</h4>
<p>
Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae temporibus omnis illum maxime quod deserunt eligendi dolor
</p>
</div>
</div>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>

Horizontal scroll jquery-mousewheel library function errors (ex: this. on is not a function)

I am trying to create a horizontal scrolling website and I was following this tutorial which uses this library; however I get a "this.on is not a function" or a similar error where something is not a function.
I have tried rotating my webpage but it just messes everything up (href anchors don't work?).
I tried to bind the .mousewheel on the window as well to no avail.
Is there another way to do this or is it just not possible?
HTML
<div class="main-container">
<nav class="main-nav">
<ul class="ul__first">
<li id="logo">
b
</li>
</ul>
<ul class="ul__second">
<li id="border">Homepage</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<div class="container">
<section id="section-one" class="section-one">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-two" class="section-two">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-three" class="section-three">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-4" class="section-4">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
</div>
CSS
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
html,
body,
.main-container {
scroll-behavior: smooth;
height:100%;
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
overflow-y:hidden;
overflow-x:hidden;
}
li {
list-style:none;
transition: all 0.4s;
z-index: 15;
}
li:hover{
transform: scale(1.1);
}
a{
text-decoration: none;
text-transform: uppercase;
color:white;
}
h1{
font-size: 70px;
text-transform: uppercase;
font-family:cursive;
letter-spacing: 10px;
}
h3 {
font-size: 30px;
font-family:fantasy;
}
p {
margin-top: 30px;
font-size: 14px;
font-family:sans-serif;
}
.main-container{
width: 100vw;
height: 100vh;
}
.main-nav {
position: fixed;
display: flex;
padding: 2em 4em;
z-index: 12;
}
.main-nav .ul__second{
position:fixed;
display: flex;
right: 4em;
}
#logo {
border: 1px solid rgb(255, 255, 255);
padding: 0 15px;
}
.main-nav .ul__second li {
margin-left: 1.5em;
}
.main-nav .ul__second #border {
border: 1px solid rgb(255, 255, 255);
padding: 0 15px;
align-items: center;
}
.container {
width: 400vw;
display: flex;
flex-direction: row;
}
.container .section-one{
width: 100vw;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 8em;
}
.container .summer .img {
width: 400px;
height: 600px;
}
.content {
margin-top: 50px;
margin-right: 100px;
text-align: center;
z-index: 10;
}
::-webkit-scrollbar{
display:none;
}
JS
$(function() {
$("html, body, *").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 80);
this.scrollRight -= (delta * 80);
event.preventDefault();
});
});
Sorry for the formatting!
Thank you!

The error is coming from the mousewheel library you linked to.
If you were following the tutorial you linked exactly, your issue is probably stemming from the old version of jquery (1.3.2), referenced in that tutorial.
If you update to the latest version of jquery (3.5.1) https://code.jquery.com/, you won't get that error anymore.

How to Implement scrollIntoView in a horizontal view table for testimony

I'm sorry maybe the title make you confused, but it exactly what the title said I want to make a testimony card using table as based but I almost finish it but i can't do the final touch for it, let say I have a pointer so when I click the pointer the card will swipe to the next card but it seems I'm confused as how to implement it using javascript. I get a hunch that I can use array of child for it and move in based on the index but the card testimony still won't move
I read some topic, but the near to what I want is answer in here: Scroll smoothly by 100px horizontally
but I confused as how to implement it.
this is my code:
var slideIndex = 1;
showSlides(slideIndex);
// Thumbnail image controls
function currentTestimony(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slider-item");
var pointers = document.getElementsByClassName("pointer");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
// for (i = 0; i < slides.length; i++) {
// slides[i].getElementsById('testimony-3').scrollIntoView()
// }
for (i = 0; i < pointers.length; i++) {
pointers[i].className = pointers[i].className.replace(" active", "");
}
pointers[slideIndex-1].className += " active";
}
#import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
#dark-slider-testimonial .card{
background-color: #f5f7fb;
border-radius: 20px;
width: 380px;
height: 380px;
margin: 0% 32px;
padding: 20px;
display: inline-table;
}
/*
===================================================================
First Table
===================================================================
*/
#dark-slider-testimonial {
border-radius: 20px;
margin: 20px auto;
padding: 5%;
width: 100%;
scroll-behavior: smooth;
}
#dark-slider-testimonial .container{
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
#dark-slider-testimonial .container::-webkit-scrollbar {
width: 0px;
background: transparent;
}
#dark-slider-testimonial table {
font-family: 'Nunito', sans-serif;
width: 100%;
font-size: 0.8em;
color: #1d3962;
border: none;
border-top: none;
}
#dark-slider-testimonial tr{
text-align: left;
}
#dark-slider-testimonial td{
text-align: left;
scroll-snap-align: start;
}
#dark-slider-testimonial .testimony-name{
font-size: 1.6em;
font-weight: bold;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-title{
font-size: 1.4em;
font-weight: bold;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-subtitle{
font-size: 1.2em;
font-weight: normal;
color: #7E94B3;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-desc{
font-size: 1.2em;
font-weight: normal;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .pointer {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
#dark-slider-testimonial .active,
#dark-slider-testimonial .pointer:hover {
background-color: #3b73c5;
}
<div id="dark-slider-testimonial">
<div>
<div class="container">
<table>
<tr>
<td id="testimony-1" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-2" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-3" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-4" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-5" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
</tr>
</table>
</div>
<!-- The pointers/circles -->
<div style="text-align:center">
<span class="pointer" onclick="currentTestimony(1)"></span>
<span class="pointer" onclick="currentTestimony(2)"></span>
<span class="pointer" onclick="currentTestimony(3)"></span>
<span class="pointer" onclick="currentTestimony(4)"></span>
<span class="pointer" onclick="currentTestimony(5)"></span>
</div>
</div>
</div>
I feel I'm already near the answer but I can't quite know how to solved this, can someone help me to solve this problem?

Is this It?
I have illustrated the code I've added and removed in your stylesheet. And the entire Javascript has also changed. But it's all straight forward.
var PositionPerIndex = {
"1": "0",
"2": "-20%",
"3": "-40%",
"4": "-60%",
"5": "-80%"
};
document.querySelectorAll(".pointer").forEach(
function(pointer){
pointer.addEventListener('click',
function(){
document.getElementById("content").style.left = PositionPerIndex[this.getAttribute("data-index")];
}
);
}
);
#import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
#dark-slider-testimonial .card{
background-color: #f5f7fb;
border-radius: 20px;
width: 380px;
height: 380px;
margin: 0% 32px;
padding: 20px;
display: inline-table;
}
/*
===================================================================
First Table
===================================================================
*/
#dark-slider-testimonial {
border-radius: 20px;
margin: 20px auto;
padding: 5%;
width: 100%;
/* START Removed
scroll-behavior: smooth;
END
*/
/* START Added */
box-sizing: border-box;
overflow: hidden;
}
#dark-slider-testimonial .container{
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
/* START Removed
overflow-x: auto;
scroll-snap-type: x mandatory;
END
*/
/* START Added */
overflow: hidden;
}
#dark-slider-testimonial .container::-webkit-scrollbar {
width: 0px;
background: transparent;
}
#dark-slider-testimonial table {
font-family: 'Nunito', sans-serif;
width: 100%;
overflow: hidden;
font-size: 0.8em;
color: #1d3962;
border: none;
border-top: none;
}
#dark-slider-testimonial tr{
text-align: left;
overflow: hidden;
display: flex;
flex-direction: row;
/* Added this */
width: 100%;
position: relative;
left: 0%;
transition: left .5s ease;
}
#dark-slider-testimonial td{
text-align: left;
scroll-snap-align: start;
/* Added this */
flex-basis: 20%;
}
#dark-slider-testimonial .testimony-name{
font-size: 1.6em;
font-weight: bold;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-title{
font-size: 1.4em;
font-weight: bold;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-subtitle{
font-size: 1.2em;
font-weight: normal;
color: #7E94B3;
line-height: 1.7em;
}
#dark-slider-testimonial .testimony-desc{
font-size: 1.2em;
font-weight: normal;
color: #1D3962;
line-height: 1.7em;
}
#dark-slider-testimonial .pointer {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
#dark-slider-testimonial .active,
#dark-slider-testimonial .pointer:hover {
background-color: #3b73c5;
}
<div id="dark-slider-testimonial">
<div>
<div class="container">
<table>
<tr id="content">
<td id="testimony-1" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-2" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-3" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-4" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
<td id="testimony-5" class="slider-item">
<div class="card">
<p class="testimony-name">
name
</p>
<p class="testimony-subtitle">
title
</p>
<p class="testimony-desc">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur eveniet harum aperiam autem ab modi, impedit culpa, obcaecati repellendus ipsa nulla repudiandae, illo consequatur. Eum fugiat explicabo voluptas numquam doloremque.
</p>
</div>
</td>
</tr>
</table>
</div>
<!-- The pointers/circles -->
<div style="text-align:center">
<span class="pointer" data-index="1"></span>
<span class="pointer" data-index="2"></span>
<span class="pointer" data-index="3"></span>
<span class="pointer" data-index="4"></span>
<span class="pointer" data-index="5"></span>
</div>
</div>
</div>

Here is a more Universal Answer that works on a fixed size. You can just change sizing into percentage to make it work for different screen sizes.
I've worked it out on VS Code. You can just copy and paste it and run.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
}
.main-container {
width: 100%;
max-width: 1200px;
overflow: hidden;
margin: 0 auto;
margin-bottom: 20px;
}
table.card-space{
width: 100%;
height: auto;
min-height: 400px;
position: relative;
white-space: nowrap;
margin: 0;
padding: 0;
}
tr.card-space_container{
width: 100%;
left: 0; /* Initial Position */
position: relative;
/* Make a Smooth Left Transition */
transition: left .5s ease;
padding: 15px;
margin: 0;
padding: 0;
}
td.card{
box-sizing: border-box;
margin: 0;
width: 400px;
min-height: 390px;
margin: 0;
position: relative;
}
.card-space .card .content{
width: 400px;
min-height: 100%;
background-color: #f5f5f5;
min-height: 390px;
padding: 15px;
}
.pointer-space{
text-align: center;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.pointer-space .pointer {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.pointer-space .pointer:hover {
background-color: #3b73c5;
}
</style>
</head>
<body>
<div class="main-container">
<table class="card-space">
<tr class="card-space_container" id="card-space_container">
<td class="card">
<div class="content">
<h1>Card1</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card2</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card3</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card4</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card5</h1>
</div>
</td>
<td class="card">
<div class="content">
<h1>Card6</h1>
</div>
</td>
</tr>
</table>
</div>
<!-- The pointers/circles -->
<div class="pointer-space">
<span class="pointer" data-index="0"></span>
<span class="pointer" data-index="1"></span>
<span class="pointer" data-index="2"></span>
<span class="pointer" data-index="3"></span>
<span class="pointer" data-index="4"></span>
<span class="pointer" data-index="5"></span>
</div>
<script>
(function(){
// Get all the Pointers
var PointerList = document.querySelectorAll(".pointer");
// Get the Card container
var container = document.getElementById("card-space_container");
PointerList.forEach(function(pointer){
pointer.addEventListener('click', function(){
// First get the index represented by each pointer
var i = this.getAttribute('data-index');
// Summary:
// Then Calculate the position to which card-space_container must be set.
// examples:
// -If the index returned by a pointer is 0, then 0 x -40 = 0; so the position is set to 0px.
// -If the pointer return index as 1, then 1 x -400 = -400%;
// - etc...
container.style.left = (i * (-400)).toString().concat('px');
});
});
})();
</script>
</body>
</html>

div and its content are not showing in page

I'm trying to learn how to create a testimonials part on my page and somehow none of its contexts are showing up, no mater what I write.
I also tried to create an empty project with nothing inside, import all the text and still not show up. showing nothing but a blank page.
I'm new to HTML so am I doing something wrong?
So this is my index.html page
<body>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-8">
<div id="testimonial-slider" class="owl-carousel">
<div class="testimonial">
<div class="pic">
<img src="images/img-1.jpg">
</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>
awdawdaw
daw
dawdaw
d
</div>
<div class="testimonial">
<div class="pic">
<img src="images/img-2.jpg">
</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>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$("#testimonial-slider").owlCarousel({
items: 1,
itemsDesktop: [1000, 1],
itemsDesktopSmall: [979, 1],
itemsTablet: [768, 1],
pagination: true,
transitionStyle: "backSlide",
autoPlay: true
});
});
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js">
</script>
style.css is this
.demo {
background: #3d3d3d;
}
.testimonial {
padding: 35px 50px;
margin: 0 20px 30px;
border-radius: 0 70px 0 70px;
border: 5px solid #ffc33c;
border-left: none;
border-right: none;
text-align: center;
}
.testimonial .pic {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 20px;
overflow: hidden;
}
.testimonial .pic img {
width: 100%;
height: auto;
}
.testimonial .title {
display: block;
margin: 0 0 7px 0;
font-size: 20px;
font-weight: 600;
color: #ffc33c;
letter-spacing: 1px;
text-transform: uppercase;
}
.testimonial .post {
display: block;
font-size: 15px;
color: #fff;
text-transform: capitalize;
margin-bottom: 20px;
}
.testimonial .description {
font-size: 16px;
color: #fff;
line-height: 30px;
}
.owl-theme .owl-controls {
margin-top: 0;
}
.owl-theme .owl-controls .owl-page span {
background: #fff;
opacity: 0.8;
transition: all 0.3s ease 0s;
}
.owl-theme .owl-controls .owl-page.active span {
background: #ffc33c;
}

Hey you did not put the script tags inside the body also you need to lead libraries like jQuery before executing your own code:
.demo {
background: #3d3d3d;
}
.testimonial {
padding: 35px 50px;
margin: 0 20px 30px;
border-radius: 0 70px 0 70px;
border: 5px solid #ffc33c;
border-left: none;
border-right: none;
text-align: center;
}
.testimonial .pic {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
margin-bottom: 20px;
overflow: hidden;
}
.testimonial .pic img {
width: 100%;
height: auto;
}
.testimonial .title {
display: block;
margin: 0 0 7px 0;
font-size: 20px;
font-weight: 600;
color: #ffc33c;
letter-spacing: 1px;
text-transform: uppercase;
}
.testimonial .post {
display: block;
font-size: 15px;
color: #fff;
text-transform: capitalize;
margin-bottom: 20px;
}
.testimonial .description {
font-size: 16px;
color: #fff;
line-height: 30px;
}
.owl-theme .owl-controls {
margin-top: 0;
}
.owl-theme .owl-controls .owl-page span {
background: #fff;
opacity: 0.8;
transition: all 0.3s ease 0s;
}
.owl-theme .owl-controls .owl-page.active span {
background: #ffc33c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-8">
<div id="testimonial-slider" class="owl-carousel">
<div class="testimonial">
<div class="pic">
<img src="images/img-1.jpg">
</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>
awdawdaw daw dawdaw d
</div>
<div class="testimonial">
<div class="pic">
<img src="images/img-2.jpg">
</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>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script>
$(document).ready(function() {
$("#testimonial-slider").owlCarousel({
items: 1,
itemsDesktop: [1000, 1],
itemsDesktopSmall: [979, 1],
itemsTablet: [768, 1],
pagination: true,
transitionStyle: "backSlide",
autoPlay: true
});
});
</script>
</body>
</html>

You should import your libraries before using them. Just change the order of <script> tags.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script>
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:1,
itemsDesktop:[1000,1],
itemsDesktopSmall:[979,1],
itemsTablet:[768,1],
pagination:true,
transitionStyle:"backSlide",
autoPlay:true
});
});</script>

Move the next button after dropdown from the first button

What I want to do is: when I click on one of the buttons, the paragraph area shows (as it is now). However, I want the next button / div (and the rest of the page below it) to move downwards. To get it simple: when I click on the button, the box shows, while moving the rest of the buttons downwards, so the paragraph area doesn't overlap the others.
I'm sorry for the bad English...
I hope you guys understand what I mean.
( Btw I don't want a frameworks or Jquery, just plain languages ;) )
I have got the following code:
function dropDownOne() {
document.getElementById("dropdownone").classList.toggle("show");
}
function dropDownTwo() {
document.getElementById("dropdowntwo").classList.toggle("show");
}
function dropDownThree() {
document.getElementById("dropdownthree").classList.toggle("show");
}
window.onclick = function(event) {
if(!event.target.matches('.dropdownbtn')) {
let dropDowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropDowns.length; i++) {
let openDropDown = dropDowns[i];
if (openDropDown.classList.contains('show')) {
openDropDown.classList.remove('show');
}
}
}
}
.dropdownbtn {
border: 0;
background-color: gray;
width: 50%;
height: 40px;
border-radius: 5px;
font-size: 15px;
color: black;
cursor: pointer;
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-ms-transition-duration: 300ms;
-o-transition-duration: 300ms;
transition-duration: 300ms;
}
.dropdownbtn:hover, .dropdownbtn:focus {
background-color: blue;
color: white;
border: 1px solid white;
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-ms-transition-duration: 300ms;
-o-transition-duration: 300ms;
transition-duration: 300ms;
}
.dropdown {
display: inline-block;
position: relative;
margin: 10px auto;
width: 80%;
text-align: center;
}
.dropdown:last-child {
margin-bottom: 20px;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
left: 0;
background-color: blue;
width: 80vw;
margin: 0 auto;
border: 1px solid white;
border-radius: 5px;
padding: 10px;
z-index: 1;
}
.dropdown-content p {
color: white;
font-size: 15px;
display: block;
}
.show {
display: block;
margin-bottom: 200px;
}
<div class="dropdown">
<button onclick="dropDownOne()" class="dropdownbtn">Who am I?</button>
<div id="dropdownone" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>
<div class="dropdown">
<button onclick="dropDownTwo()" class="dropdownbtn">What are your skills?</button>
<div id="dropdowntwo" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>
<div class="dropdown">
<button onclick="dropDownThree()" class="dropdownbtn">Who am I?</button>
<div id="dropdownthree" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>

So your problem was you were using position : absolute; on your dropdown-content class, because it has an absolute position it means that the element will take its position regardless of any other elements, which is why your other elements didn't move.
To fix this I changed it to position: relative; so other elements will take it's position into account.
I also removed margin-bottom: 200px; in the show class as this was leaving large gaps between each if your elements.
Here is the edited code in a snippet:
function dropDownOne() {
document.getElementById("dropdownone").classList.toggle("show");
}
function dropDownTwo() {
document.getElementById("dropdowntwo").classList.toggle("show");
}
function dropDownThree() {
document.getElementById("dropdownthree").classList.toggle("show");
}
window.onclick = function(event) {
if(!event.target.matches('.dropdownbtn')) {
let dropDowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropDowns.length; i++) {
let openDropDown = dropDowns[i];
if (openDropDown.classList.contains('show')) {
openDropDown.classList.remove('show');
}
}
}
}
.dropdownbtn {
border: 0;
background-color: gray;
width: 50%;
height: 40px;
border-radius: 5px;
font-size: 15px;
color: black;
cursor: pointer;
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-ms-transition-duration: 300ms;
-o-transition-duration: 300ms;
transition-duration: 300ms;
}
.dropdownbtn:hover, .dropdownbtn:focus {
background-color: blue;
color: white;
border: 1px solid white;
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-ms-transition-duration: 300ms;
-o-transition-duration: 300ms;
transition-duration: 300ms;
}
.dropdown {
display: inline-block;
position: relative;
margin: 10px auto;
width: 80%;
text-align: center;
}
.dropdown:last-child {
margin-bottom: 20px;
}
.dropdown-content {
display: none;
position: relative;
right: 0;
left: 0;
background-color: blue;
width: 80vw;
margin: 0 auto;
border: 1px solid white;
border-radius: 5px;
padding: 10px;
z-index: 1;
}
.dropdown-content p {
color: white;
font-size: 15px;
display: block;
}
.show {
display: block;
}
<div class="dropdown">
<button onclick="dropDownOne()" class="dropdownbtn">Who am I?</button>
<div id="dropdownone" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>
<div class="dropdown">
<button onclick="dropDownTwo()" class="dropdownbtn">What are your skills?</button>
<div id="dropdowntwo" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>
<div class="dropdown">
<button onclick="dropDownThree()" class="dropdownbtn">Who am I?</button>
<div id="dropdownthree" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>