We Keep Coding

is there a way for me to make a custom scrollbar appear on the left instead of the right?

I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the right side, but I want to move it over to the left. Is this possible?
body::-webkit-scrollbar {
width: 0px;
}
body::-webkit-scrollbar-track {
background: transparent;
}
body::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 20px;
border: 3px solid transparent;
}
.CONT {
position: relative;
top: -25px;
left: 20px;
}
.CONT_2 {
position: relative;
top: 25px;
left: 20px;
height: 100px;
}
#words {
top: -2px;
left: 25px;
position: relative;
}
#words2 {
top: 2px;
left: 25px;
position: relative;
}
.DOC_CONTAINER {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 16px;
left: -4px;
color: #0088FF;
user-select: none;
cursor: pointer;
width: 280px;
z-index: 1;
overflow: hidden;
height: 46px;
}
#HTML_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 75px;
left: 15px;
}
#CSS_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 125px;
left: 15px;
}
#JAVA_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 175px;
left: 15px;
}
#JQUERY_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 225px;
left: 15px;
}
#LUA_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 275px;
left: 15px;
}
#ICON_1 {
position: absolute;
top: 0px;
left: 200px;
}
#icon2 {
position: absolute;
top: 2px;
left: 180px;
}
#ICON_2 {
position: absolute;
top: 4px;
left: 118px;
}
#icon3 {
position: absolute;
top: 2px;
left: 100px;
}
div.DOC_CONTAINER.expanded {
width: 390px;
height: 395px;
top: 16px;
left: -4px;
position: relative;
animation-name: Expand1;
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
div.WEBVAR_CONTAINER.EXPAND {
width: 390px;
height: 395px;
top: 35px;
left: -4px;
position: relative;
animation-name: Expand2;
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes Expand2 {
0% {
height: 70px;
}
100% {
height: 280px;
}
}
#keyframes Expand1 {
0% {
height: 70px;
}
100% {
height: 421px;
}
}
#SEP2 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: absolute;
top: 65px;
left: -27px;
}
#SEP3 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: relative;
top: 420px;
left: -27px;
}
#SEP4 {
width: 370px;
height: 1px;
background-color: #2e2e2e;
position: absolute;
top: 135px;
left: 0px;
}
#SEP5 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: relative;
top: 420px;
left: -27px;
}
#CREDITS {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 30px;
left: 20px;
}
#ABOUT {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: absolute;
top: 100px;
left: 20px;
}
#COPY_RIGHT {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: absolute;
top: 170px;
left: 20px;
}
div.scroll {
margin: 4px, 4px;
padding: 4px;
background-color: #1f1f1f;
width: 350px;
height: 85vh;
top: 127px;
left: -5px;
position: absolute;
overflow-x: hidden;
text-align: justify;
border-bottom-right-radius: 20px;
}
.scroll::-webkit-scrollbar {
width: 5px;
color: #0088FF;
height: 25px;
}
.scroll::-webkit-scrollbar-track {
background: #2e2e2e;
}
.scroll::-webkit-scrollbar-thumb {
background: #0088FF;
}
.scroll::-webkit-scrollbar-thumb:hover {
background: #0088FF;
}
.flip {
transform: rotateX(180deg);
transition-duration: 0.2s;
}
.flip2 {
transform: rotateX(180deg);
transition-duration: 0.2s;
}
#MENU_LABEL {
color: #2E2E2E;
top: 11px;
left: 45vw;
position: absolute;
font-size: 20px;
font-family: verdana;
}
body {
height: 200vh;
background-color: #2E2E2E;
}
a {
color: #0088ff;
text-decoration: none;
}
a:hover {
color: #0056A3;
text-decoration: none;
}
.WEBVAR_CONTAINER {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 35px;
left: -4px;
color: #0088FF;
user-select: none;
cursor: pointer;
width: 390px;
z-index: 1;
overflow: hidden;
height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll">
<div class="DOC_CONTAINER">
<div id="SEP3"></div>
<div id="words">Documentation</div>
<div id="ICON_1"><i class="fa-solid fa-angle-down"></i></div>
<script>
$(document).ready(function() {
$('#words').click(function(event) {
event.preventDefault();
$(".DOC_CONTAINER").toggleClass('expanded');
$("#ICON_1").toggleClass("flip");
});
});
</script>
<div class="CONT">
<div id="HTML_DOC">HTML</div>
<div id="CSS_DOC">CSS</div>
<div id="JAVA_DOC">Javascript</div>
<div id="JQUERY_DOC">Jquery</div>
<div id="LUA_DOC">Lua</div>
</div>
</div>
<div id="SEP2"></div>
<div class="WEBVAR_CONTAINER">
<div id="SEP5"></div>
<div id="words2">WebVar</div>
<div id="ICON_2"><i class="fa-solid fa-angle-down"></i></div>
<script>
$(document).ready(function() {
$('#words2').click(function(event) {
event.preventDefault();
$(".WEBVAR_CONTAINER").toggleClass('EXPAND');
$("#ICON_2").toggleClass("flip2");
});
});
</script>
<div class="CONT_2">
<div id="CREDITS">Credits</div>
<div id="ABOUT">About</div>
<div id="COPY_RIGHT">Copyright</div>
</div>
</div>
<div id="SEP4"></div>
</div>
I tried setting float but that didn't work. If there is a solution please enlighten me.

Easy way to move scrollbar to the left side:
.scroll-at-left {
width: 200px;
height: 95vh;
overflow-y: scroll;
transform: rotateY(180deg);
}
.scroll-at-left>section {
padding: 0 1em;
transform: rotateY(180deg);
}
<div class="scroll-at-left">
<section>
<p>I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the left side, but I want to move it over to the right. Is this possible?</p>
<p>I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the left side, but I want to move it over to the right. Is this possible?</p>
</section>
</div>

You can set the div to right text align and the text to left text align.
.scroll-at-left {
width: 200px;
height: 95vh;
overflow-y: scroll;
direction: rtl;
}
.scroll-at-left section {
padding: 0 1em;
direction: ltr;
}
<div class="scroll-at-left">
<section>
<p>The scroll bar should be on the left side now when you scroll. The section is set to left text align while the div is set to right text align. This is just filler text. It has no purpose other than to fill. This is even more filler text. Why are you reading this</p>
</section>
</div>

How can I make an image slider which makes image move right to left?

Hey guys I'm making an image slider on my website and I've got the main functionality down but I want there to be a transition where you see the next image being pulled into view instead of just appearing there. Kind of like the one on this site.
https://allisonstexasbbq.com/
Also here's a link to my website, the code posted below is incomplete because there's too much code to post here so here's my fiddle.
http://jsfiddle.net/0ekqLu4c/
p.s I also realized you can't see my images cause there saved to my machine. Unfortunately I don't know how to get around this.
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
/*HEADER*/
.logo {
text-transform: uppercase;
color: white;
font-family: 'Staatliches';
font-size: 10rem;
letter-spacing: 20px;
font-weight: bolder;
position: relative;
left: 800px;
top: 150px;
}
#header {
background: url('img/mex-9.jpg');
background-attachment: fixed;
background-size: cover;
width: 100vw;
height: 100vh;
}
.btn-1, .btn-2, .btn-3 {
background-color: white;
width: 62px;
margin-bottom: 9px;
height: 8px;
border-radius: 5px;
}
.btn-1 {
background-color: lightgreen;
position: relative;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes btn-1-animate {
from {width: 62px; left: 0px; top: 0px;}
to { top: 75px; left: -12px; width: 84px;}
}
#keyframes btn-1-reverse {
from {top: 75px; left: -12px; width: 84px;}
to {top: 0px; left: 0px; width: 62px;}
}
.btn-2 {
border-radius: none;
background-color: white;
position: relative;
animation-duration: 0.3s;
animation-fill-mode: forwards;
z-index: 1;
}
#keyframes btn-2-animate {
from {top: 0px; left: 0px; width: 62px}
to {top: 58px; left: 65px; width: 117px;}
}
#keyframes btn-2-reverse {
from {top: 58px; left: 65px; width: 117px;}
to {top: 0px; left: 0px; width: 62px;}
}
.btn-3 {
background-color: #ff4d4d;
position: relative;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes btn-3-animate {
from {top: 0px; left: 0px; width: 62px;}
to {top: 41px; left: 180px; width: 160px;}
}
#keyframes btn-3-reverse {
from {top: 41px; left: 180px; width: 160px;}
to {top: 0px; left: 0px; width: 62px;}
}
.side-menu, .nav-btn {
padding-top: 100px;
padding-left: 50px;
}
.nav-btn {
width: 70px;
position: fixed;
top: 5px;
z-index: 10;
}
#header ul {
border-radius: 10px;
margin: 0;
list-style-type: none;
background-color: white;
position: fixed;
top: 200px;
text-align: center;
box-shadow: -15px 0px lightgreen;
}
.side-menu {
position: relative;
left: -2370px;
transition: all 0.2s ease;
z-index: 1;
}
.fa-times {
position: fixed;
left: -380px;
top: 200px;
font-size: 2rem;
color: white;
transition: all 0.2s ease;
}
.fa-times:hover {
transform: scale(1.3);
cursor: pointer;
}
#header li a {
font-family: 'Kumar One Outline';
text-decoration: none;
font-size: 2.2rem;
padding: 15px;
color: grey;
margin-bottom: 15px;
}
#header li:hover {
transform: scale(1.15);
}
#header li {
margin: 15px;
padding-left: 10px;
padding-right: 50px;
transition: all 0.35s ease;
}
#header li a:hover {
cursor: pointer;
font-weight: bolder;
color: #96ea96;
}
#header p {
float: right;
font-weight: bold;
font-size: 3.2rem;
margin-top: -10px;
margin-right: 100px;
color: white;
font-family: 'Cedarville Cursive';
}
/*ABOUT*/
#about .container {
background-color: #339966;
width: 100vw;
overflow: auto;
padding-bottom: -400px;
}
#about h1 {
margin-top: 0;
font-family: 'Cedarville Cursive';
font-size: 3.5rem;
color: white;
text-align: center;
padding-top: 5px;
}
.line {
background-color: orange;
width: 0px;
height: 4px;
padding: 0;
border-radius: 5px;
text-align: center;
margin-left: 560px;
position: relative;
top: 90px;
transition: all 1s ease;
}
#about p {
font-family: 'Josefin Sans';
color: white;
font-size: 1.8rem;
width: 35%;
margin-left: 130px;
}
.image-slider {
background-color: grey;
background-image: url(img/f-0.jpeg);
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
width: 35%;
height: 250px;
margin-right: 160px;
padding-bottom: 100px;
position: relative;
top: -380px;
float: right;
}
.fa-caret-down {
color: white;
font-size: 4rem;
margin-top: 29%;
position: relative;
}
.left {
transform: rotate(90deg);
left: -40px;
}
.right {
float: right;
transform: rotate(-90deg);
left: 40px;
}
.left:hover, .right:hover {
cursor: pointer;
}
/*MENU*/
#menu .container {
background-color: #e6ac00;
width: 100vw;
margin-top: -330px;
clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
overflow: hidden;
}
.shape-wrap {
position: relative;
}
.shape-1 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #339966;
border-bottom: 25px solid transparent;
position: relative;
top: 50px;
left: -190px;
display: inline-block;
margin: 0;
}
.shape-2 {
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #26734d;
border-bottom: 25px solid transparent;
float: left;
position: relative;
top: 25px;
display: inline-block;
left: 10px;
}
.shape-3 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #40bf80;
border-bottom: 25px solid transparent;
position: relative;
left: -195px;
display: inline-block;
top: 25px;
}
.shape-4 {
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #26734d;
border-bottom: 25px solid transparent;
float: left;
position: relative;
left: -40px;
display: inline-block;
top: 85px;
}
.shape-5 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #339966;
border-bottom: 25px solid transparent;
position: relative;
left: -298px;
display: inline-block;
top: 110px;
}
.shape-6 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #339966;
border-bottom: 25px solid transparent;
position: relative;
top: 230px;
display: inline-block;
left: -351px;
}
.shape-7 {
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #26734d;
border-bottom: 25px solid transparent;
float: left;
position: relative;
left: -90px;
display: inline-block;
top: 265px;
}
.shape-8 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #339966;
border-bottom: 25px solid transparent;
position: relative;
top: 290px;
display: inline-block;
left: -405px;
}
.shape-9 {
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #26734d;
border-bottom: 25px solid transparent;
float: left;
position: relative;
left: -140px;
display: inline-block;
top: 325px;
}
.shape-10 {
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #40bf80;
border-bottom: 25px solid transparent;
position: relative;
left: -410px;
display: inline-block;
top: 325px;
}
#menu h1 {
font-size: 7rem;
color: white;
font-family: 'Cedarville Cursive';
margin-left: 220px;
position: relative;
top: -450px;
}
.line-2 {
background-color: #339966;
width: 0px;
height: 5px;
border-radius: 5px;
position: relative;
top: -600px;
left: 45px;
transition: all 1s ease;
}
.platter {
font-size: 2.3rem;
font-family: 'Cedarville Cursive';
color: #339966;
margin-left: 60px;
}
.platter-info {
font-size: 1.2rem;
font-family: 'Josefin Sans';
color: white;
margin-left: 120px;
margin-top: -50px;
margin-bottom: 30px;
}
.item {
font-family: 'Josefin Sans';
font-size: 1.3rem;
}
.price {
font-size: 1.3rem;
font-family: 'Josefin Sans';
display: block;
margin-left: 400px;
margin-bottom: -40px;
position: relative;
bottom: 40px;
}
.col-1 {
margin-left: 200px;
margin-top: 0px;
position: relative;
top: -550px;
}
.plat-4 {
position: relative;
left: 120px;
}
.plat-5 {
position: relative;
left: 75px;
}
.plat-6 {
position: relative;
left: 85px;
}
.info4tacos {
position: relative;
left: 70px;
margin-bottom: 35px;
}
.plat-7 {
position: relative;
left: 100px;
}
.plat-8 {
position: relative;
right: 50px;
}
.plat-9 {
position: relative;
left: 30px;
}
.info4breakfast {
position: relative;
left: 50px;
}
.col-2 {
float: right;
margin-top: -3185px;
margin-right: 200px;
}
.plat-2 {
position: relative;
left: 70px;
top: 15px;
}
.plat-3 {
position: relative;
left: 60px;
}
.right-border {
float: right;
transform: rotate(180deg);
position: relative;
top: 2400px;
right: 10px;
}
/*HOURS*/
#hours .container {
background-color: #339966;
width: 100vw;
position: relative;
margin-top: -470px;
clip-path: polygon(0% 4%, 5% 0%, 95% 0%, 100% 4%, 100% 100%, 0% 100%);
overflow: hidden;
}
#hours h1 {
text-align: center;
font-size: 4rem;
color: white;
font-family: 'Cedarville Cursive';
padding-bottom: 100px;
margin-top: 0px;
position: relative;
bottom: 80px;
}
.day, .hour {
text-align: center;
background-color: white;
font-size: 2.5rem;
color: #666;
padding-top: 10px;
margin-bottom: 10px;
width: 220px;
font-family: 'Josefin Sans';
border-right: 12px solid #40bf80;
}
.grid {
display: grid;
grid-template-columns: 270px 270px;
grid-auto-rows: 65px;
grid-gap: 15px;
position: relative;
left: 50%;
margin-left: -272.5px;
margin-top: -220px;
}
.move3 {
top: 85px;
}
.move10 {
position: relative;
top: 265px;
}
.rotate {
transform: rotate(180deg);
width: 600px;
}
.hours-line, .hours-line2 {
width: 500px;
height: 10px;
border-radius: 5px;
position: relative;
background-color: #ff4d4d;
top: -300px;
left: 30px;
}
.hours-line2 {
background-color: lightgreen;
left: 820px;
top: -305px;
}
.lom {
transform: rotate(-180deg);
}
/*CONTACT*/
.back-wrapper {
background-color: #595959;
width: 100vw;
height: 650px;
clip-path: polygon(0 0, 15% 15%, 85% 15%, 100% 0, 100% 100%, 0 100%);
margin-top: -100px;
overflow: hidden;
}
.contact-wrapper:before {
content: '';
background-color: #339966;
width: 250px;
height: 130px;
position: absolute;
left: 50%;
margin-left: -125px;
top: -91px;
clip-path: polygon(15% 1%, 85% 0, 100% 30%, 100% 70%, 85% 100%, 15% 100%, 0% 70%, 0% 30%);
}
.contact-wrapper:after {
content: '';
background-color: #339966;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
width: 65px;
height: 65px;
position: absolute;
top: 65px;
left: 50%;
margin-left: -32.5px;
}
.contact-wrapper {
display: flex;
justify-content: space-between;
background-color: #404040;
position: relative;
margin-top: -552px;
}
.loc, .con {
flex-basis: 48%;
}
.contact-wrapper h1 {
font-family: 'Cedarville Cursive';
color: white;
font-size: 5rem;
margin-bottom: 0;
margin-top: 0;
text-align: center;
}
.split {
background-color: orange;
width: 3px;
height: 300px;
position: relative;
top: 160px;
}
.upArrow {
font-size: 2.5rem;
color: #404040;
position: absolute;
z-index: 1;
left: 50%;
top: -55px;
margin-left: -20px;
cursor: pointer;
transition: all 0.2s ease;
}
.upArrow:hover {
transform: scale(1.25);
color: orange;
}
.to-top {
font-family: 'Josefin Sans';
color: #404004;
font-size: 2rem;
position: absolute;
left: 50%;
margin-left: -85px;
font-weight: bold;
}
.phone, .email {
color: white;
font-size: 1.7rem;
font-family: 'Josefin Sans';
text-align: center;
margin-top: 0;
margin-bottom: 0;
margin-left: 70px;
}
textarea {
outline: none;
background-color: #333;
border: none;
margin: 15px;
position: relative;
left: 50%;
margin-left: -158.75px;
color: white;
}
input {
margin: 20px;
font-size: 1.25rem;
position: relative;
left: -95px;
top: 10px;
background-color: grey;
border: none;
border-radius: 4px;
transition: all 0.2s ease;
}
input:hover {
cursor: pointer;
color: orange;
}
.review {
font-size: 1.5rem;
color: white;
font-family: 'Josefin Sans';
position: relative;
left: 170px;
top: -20px;
}
.fab {
font-size: 3.3rem;
margin-right: 15px;
position: relative;
left: 385px;
top: -85px;
}
.recker {
transform: rotate(90deg);
width: 300px;
height: 15px;
position: relative;
background-color: #595959;
left: 30px;
top: 120px;
border-radius: 10px;
}
.main {
width: 400px;
height: 20px;
position: relative;
background-color: #595959;
left: 80px;
top: 100px;
border-radius: 10px;
}
.rd {
transform: rotate(90deg);
width: 300px;
height: 10px;
position: relative;
background-color: #595959;
left: 280px;
top: 80px;
border-radius: 10px
}
.fa-map-pin {
font-size: 4rem;
color: orange;
position: relative;
left: 290px;
top: -35px;
}
.loc p {
position: relative;
color: white;
font-family: 'Josefin Sans';
}
.con-border, .loc-border {
position: absolute;
}
.loc-border {
transform: rotate(180deg);
}
/*FOOTER*/
#footer .container {
width: 100%;
background-color: #595959;
text-align: center;
position: relative;
margin-top: -54px;
margin-bottom: 0;
}
#footer h1 {
margin: 0;
font-family: 'Josefin Sans';
font-weight: bolder;
font-size: 1.5rem;
padding: 15px;
color: darkgrey;
}

Custom JQuery Slider doesn't work as expected

I tried to make a custom slider for my projects on my website.
It's important for me to use div tags to slide, because I want to include more information on it, like text and buttons.
It has a "next"- and "previous" button. The problem is that it doesn't slide back and it doesn't start at the beginning after it reached the last slide.
What's going wrong?
$(document).ready(function() {
projectSlider($('.projects').children('.project').first());
function projectSlider(projects) {
$(projects).show(function() {
$('.next').click(function() {
if (projects.next().hasClass('project')) {
projectSlider(projects.next());
} else {
projectSlider($('.projects').children('.project').first());
}
});
$('.previous').click(function() {
if (projects.prev().hasClass('project')) {
projectSlider(projects.prev());
} else {
projectSlider($('.projects').children('.project').first());
}
});
});
}
});
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: "Roboto Condensed", sans-serif;
}
/* */
a {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-weight: normal;
}
.inline-list {
list-style-type: none;
padding: 0;
}
.inline-list>li {
display: inline-block;
}
/* */
header {
display: block;
position: relative;
top: 0;
left: 0;
width: 35%;
height: 100vh;
background: #fff;
}
.profile {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.avatar {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
background: url("../img/avatar.jpg") no-repeat center center;
background-size: cover;
border-radius: 100%;
}
.socialmedia>li {
padding: 0 5px 0 0;
}
.socialmedia>li>a {
color: #212121;
}
/* */
main {
display: block;
position: absolute;
top: 0;
right: 0;
width: 65%;
height: 100%;
background: #EEEEEE;
}
.controls {
display: block;
position: absolute;
z-index: 100000;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.control {
display: inline-block;
position: absolute;
width: 36px;
height: 36px;
margin: 0 20px 0 20px;
background: #f5f5f5;
color: #212121;
border-radius: 100%;
cursor: pointer;
}
.backward {
left: 0;
float: left;
text-align: center;
}
.backward-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
background: url("../img/icon/left-chevron.svg") no-repeat center center;
background-size: cover;
color: #212121;
}
.forward-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
background: url("../img/icon/right-chevron.svg") no-repeat center center;
background-size: cover;
color: #212121;
}
.forward {
right: 0;
float: right;
}
.projects {
display: block;
position: relative;
width: 100%;
height: 100vh;
}
.project {
display: none;
position: absolute;
width: 100%;
height: 100vh;
}
.dog {
background: red;
}
.cat {
background: green;
}
.rabbit {
background: blue;
}
/* */
footer {
display: block;
position: relative;
bottom: 0;
padding: 0;
width: 100%;
height: 36px;
background: #fff;
}
.made {
display: inline-block;
position: absolute;
float: left;
left: 0;
top: 50%;
height: 38px;
transform: translateY(-50%);
}
.made>p {
display: inline-block;
}
.legal {
display: inline-block;
position: absolute;
float: right;
right: 0;
top: 50%;
height: 38px;
transform: translateY(-50%);
}
/* */
.envelope {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/envelope.svg") no-repeat center center;
background-size: cover;
}
.twitter {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/twitter.svg") no-repeat center center;
background-size: cover;
}
.dribbble {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/dribbble.svg") no-repeat center center;
background-size: cover;
}
.github {
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background: url("../img/icon/brands/github.svg") no-repeat center center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<main>
<div class="project-slider">
<div class="controls">
<div class="control previous">
<div class="backward-arrow"><-</div>
</div>
<div class="control forward next">
<div class="forward-arrow">-></div>
</div>
</div>
<div class="projects">
<div class="project dog"></div>
<div class="project cat"></div>
<div class="project rabbit"></div>
</div>
</div>
</main>
JSFiddle

Your code seems to be unnecessarily recursive. Each time you click an arrow, the click handlers are bound again. Also, if you click "next", the object passed to projectSlider contains only a single project element, so there will be no "next" or "previous" in that object.
I suggest a different approach. In my example below, for each click, the appropriate project (based on a numeric index) is hidden, then appended to the project container (which stacks it on top of the others), and then re-shown (for animation purposes).
function refreshProjects(project_holder, projects, project_index) {
project_index = (project_index + projects.length) % projects.length;
var thisProject = projects.eq(project_index);
thisProject.hide().appendTo(project_holder).show(250);
}
$(function() {
var project_holder = $('.projects');
var projects = project_holder.children('.project');
var project_index = 0;
$('.control-next').click(function() {
refreshProjects(project_holder, projects, ++project_index);
});
$('.control-previous').click(function() {
refreshProjects(project_holder, projects, --project_index);
});
});
body {
padding: 0;
margin: 0;
font-size: 10px;
}
main {
position: absolute;
top: 0;
right: 0;
width: 65%;
height: 100%;
background: #EEEEEE;
}
.controls {
position: absolute;
z-index: 100000;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.control {
position: absolute;
background: #f5f5f5;
border: none;
color: #212121;
border-radius: 50%;
cursor: pointer;
width: 1.8em;
height: 1.8em;
padding: .5em;
box-sizing: content-box;
font-size: 1.4em;
outline: 0;
}
.control-previous {
left: 1em;
}
.control-next {
right: 1em;
}
.projects {
width: 100%;
height: 100vh;
}
.project {
position: absolute;
width: 100%;
height: 100%;
}
.project:not(:first-child) {
display: none;
}
.dog {
background: red;
}
.cat {
background: green;
}
.rabbit {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<main>
<div class="project-slider">
<div class="controls">
<button type="button" class="control control-previous"><-</button>
<button type="button" class="control control-next">-></button>
</div>
<div class="projects">
<div class="project dog"></div>
<div class="project cat"></div>
<div class="project rabbit"></div>
</div>
</div>
</main>

Toggle second class once first class is completed?

To be precise I have:
$('.vidsh_sub_btn').on('click', function() {
$('.vidsub_rld_c').toggleClass('goright');
// toggle godown class while goright class is completed moving left to 75px
$('.vidsub_rld_c').toggleClass('godown');
$('.vidsub_rld_c').toggleClass('goleft');
$('.vidsub_rld_c').toggleClass('gotop');
});
.vidsubbtn_c {
position: absolute;
height: 34px;
width: 84px;
background: black;
overflow: hidden;
}
.vidsub_rld_c {
position: absolute;
height: 10px;
width: 10px;
background: white;
transition: all 700ms;
left: 0px;
z-index: 50;
}
.vidsub_rld_c.goright {
left: 75px;
}
.vidsub_rld_c.godown {
top: 25px;
}
.vidsub_rld_c.goleft {
left: 0px;
}
.vidsub_rld_c.gotop {
top: 0px;
}
.vidsh_sub_btn {
position: absolute;
z-index: 100;
margin-top: 2px;
margin-left: 2px;
height: 30px;
width: 80px;
overflow: hidden;
background: #8495a4;
-moz-border-radius: 2px;
border-radius: 2px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
text-decoration: none;
border: 0;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vidsubbtn_c">
<div class="vidsub_rld_c"></div>
<input type="button" class="vidsh_sub_btn" value="Add" />
</div>
What I basically want is that vidsub_rld_c should complete a circle of the button which basically would look like a loading object.
But the way I have implemented in my script is that when the click event listener is called it executes all of the toggle classes at the same time which makes the loader looking like its not moving.
JSFiddle

You could toggle one class, and use CSS animations to create the effect.
fiddle
A basic example:
$('.vidsh_sub_btn').on('click', function() {
$('.vidsub_rld_c').toggleClass('animate');
});
.vidsubbtn_c {
position: absolute;
height: 34px;
width: 84px;
background: black;
overflow: hidden;
}
.vidsub_rld_c {
position: absolute;
height: 10px;
width: 10px;
background: white;
transition: all 700ms;
left: 0px;
z-index: 50;
}
.vidsub_rld_c.animate {
animation: moveAround 1s infinite;
}
#keyframes moveAround {
0% {
left: 0;
top: 0;
}
25% {
left: 75px;
top: 0;
}
50% {
left: 75px;
top: 25px;
}
75% {
left: 0;
top: 25px;
}
100% {
left: 0;
top: 0;
}
}
.vidsh_sub_btn {
position: absolute;
z-index: 100;
margin-top: 2px;
margin-left: 2px;
height: 30px;
width: 80px;
overflow: hidden;
background: #8495a4;
-moz-border-radius: 2px;
border-radius: 2px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
text-decoration: none;
border: 0;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vidsubbtn_c">
<div class="vidsub_rld_c"></div>
<input type="button" class="vidsh_sub_btn" value="Add" />
</div>

You could use jQuery UI so you can chain your class toggles
like:
$('.vidsh_sub_btn').on('click', function() {
$('.vidsub_rld_c').toggleClass('goright', 2000).promise().done(function(){
$('.vidsub_rld_c').toggleClass('godown', 2000);
});
});
https://codepen.io/anon/pen/QajaPm

Updated fiddle.
You could use setInterval to complete the circle by toggling the classes continuously after every 'x' time, like :
$('.vidsh_sub_btn').on('click', function() {
setInterval(function() {
$('.vidsub_rld_c').toggleClass('godown');
$('.vidsub_rld_c').toggleClass('goright');
}, 700);
});
Code:
$('.vidsh_sub_btn').on('click', function() {
setInterval(function() {
$('.vidsub_rld_c').toggleClass('godown');
$('.vidsub_rld_c').toggleClass('goright');
}, 700);
});
.vidsubbtn_c {
position: absolute;
height: 34px;
width: 84px;
background: black;
overflow: hidden;
}
.vidsub_rld_c {
position: absolute;
height: 10px;
width: 10px;
background: white;
transition: all 700ms;
left: 0px;
z-index: 50;
}
.vidsub_rld_c.goright {
left: 75px;
}
.vidsub_rld_c.godown {
top: 25px;
}
.vidsh_sub_btn {
position: absolute;
z-index: 100;
margin-top: 2px;
margin-left: 2px;
height: 30px;
width: 80px;
overflow: hidden;
background: #8495a4;
-moz-border-radius: 2px;
border-radius: 2px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
text-decoration: none;
border: 0;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vidsubbtn_c">
<div class="vidsub_rld_c"></div>
<input type="button" class="vidsh_sub_btn" value="Add" />
</div>

Design tooltip with arrow

Hi I've problem with my tooltip the arrow doesn't show, also I don't how to place the arrow on front of the tooltip, I included a image of the tooltip I would like to design.I started to learn html5 and css3, can anyone help please.
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 73px;
line-height: 73px;
text-align: center;
visibility: hidden;
border-radius: 3px;
}
a.tooltips span::before {
content:"\2190";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
/* width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent; */
}
.span-content:after {
font-family: FontAwesome;
content: "";
position: absolute;
top: 3px;
left: 7px;
}
.wrap-content{
position:relative
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.4;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
.wrap-arrow{
widows:50px ;
height:50px ;
}
span.arrowup{
background-image: url('arrowup.png') ;
}
<div style="margin-top:200px;margin-left:200px" >
<a class="tooltips" href="#">bankcheck
<span>Tooltipbankcheck</span></a>
<span class="wrap-content span-content"></span></a>
<span class="wrap-arrow arrowup"></span>
</div>

I hope the issue is about positioning. Check below snippet for reference.
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width: 140px;
color: #FFFFFF;
background: #000000;
height: 73px;
line-height: 73px;
text-align: center;
visibility: hidden;
border-radius: 3px;
}
a.tooltips span::before {
content: "\21D3";
position: absolute;
bottom: -50%;
left: 50%;
color: red;
}
.span-content:after {
font-family: FontAwesome;
content: "";
position: absolute;
top: 3px;
left: 7px;
}
.wrap-content {
position: relative
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.7;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
.wrap-arrow {
widows: 50px;
height: 50px;
}
span.arrowup {
background-image: url('arrowup.png');
}
<div style="margin-top:200px;margin-left:200px">
<a class="tooltips" href="#">bankcheck
<span>Tooltipbankcheck</span></a>
<span class="wrap-content span-content"></span></a>
<span class="wrap-arrow arrowup"></span>
</div>