Develop Reference

how to auto slide carousel to the first item after it reach the last item?

I have an automatic sliding carousel which is working fine except that when it reach the last image then it just freeze on the last image instead of auto slide to the first image. I just can't remake my javascript code alone. Strange but autosliding to the first image was working a few months ago. I had nothing change to the code but seems after last updates of chrome its just not working correctly neither on pc neither on mobile devices. Here is my javascript code:
const carousels = document.querySelectorAll('.img-carousel');
const prevBtn = document.querySelectorAll('.prev');
const nextBtn = document.querySelectorAll('.next');
let carsouselImages = document.querySelectorAll('.img-carousel div');
//Next Carousel
carousels.forEach((carousel, index)=>{
const nextCarousel = () => {
if(carsouselImages[carsouselImages.length - 1]) {
carousel.scrollTo(0, 0);
}
carousel.scrollBy(300, 0);
};
nextBtn[index].addEventListener('click', e => {
nextCarousel();
});
//Prev Carousel
const prevCarousel = () => {
if(carsouselImages[0]) {
carousel.scrollTo(4800,0);
}
carousel.scrollBy(-300, 0);
};
prevBtn[index].addEventListener('click', e => {
prevCarousel();
});
// Auto carousel
const auto = true; // Auto scroll
const intervalTime = 5000;
let sliderInterval;
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
};
carousel.addEventListener('mouseover', (stopInterval) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('mouseleave', (startInterval) => {
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
}
});
//for mobile events
carousel.addEventListener('touchstart', (stopIntervalT) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('touchend', (startIntervalT) => {
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
}
});
//Debounce
var previousCall;
window.addEventListener('resize', () => {
if (previousCall >= 0) {
clearTimeout(previousCall);
}
});
});
Here are css and html codes if needed:
/** img-carousel **/
#imgages-carousel {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
#imgages-carousel1 {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
.img-carousel-container {
width: 800px;
position: relative;
}
.img-carousel {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 5px;
}
.img-carousel div {
flex: none;
scroll-snap-align: start;
width: 800px;
position: relative;
}
.img-carousel div img {
display: block;
width: 100%;
object-fit: cover;
}
.img-carousel div p {
position: absolute;
top: 0;
right: 10px;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
border-radius: 10px;
}
.img-carousel-container button {
position: absolute;
top: calc(50% - 15px);
transform: translateY(-50%);
border: none;
background-color: rgba(255, 193, 7, 0.7);
color: #000;
cursor: pointer;
padding: 10px 15px;
border-radius: 50%;
outline: none;
opacity: 0;
transition: all ease-in-out 0.5s;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.img-carousel-container:hover button {
opacity: 1;
}
.img-carousel-container button:hover {
background-color: #ffc107;
}
/** custom scrollbar **/
.img-carousel::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.img-carousel::-webkit-scrollbar-thumb {
background: #ffc107;
border-radius: 10px;
}
.img-carousel::-webkit-scrollbar-track {
background: transparent;
}
.img-carousel-container:hover .img-carousel::-webkit-scrollbar-thumb {
visibility: visible;
}
#media screen and (max-width: 800px) {
.img-carousel-container {
width: 100%;
}
.img-carousel div {
width: 100%;
}
}
html:
<!-- section images carousel -->
<section id="imgages-carousel">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button class="prev"><i class="fas fa-chevron-left fa-2x"></i></button>
<button class="next"><i class="fas fa-chevron-right fa-2x"></i></button>
</div>
</section>
<section id="imgages-carousel1">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button class="prev"><i class="fas fa-chevron-left fa-2x "></i></button>
<button class="next"><i class="fas fa-chevron-right fa-2x "></i></button>
</div>
</section>

Jquery to hide button when there are no more images on the right

im trying to write a HTML CSS JQUERY program where when I click "next" it will display the next images and when i click "prev" it will display the previous images and to hide the next button if there are no more images on the right and vise versa
im trying to write a HTML CSS JQUERY program where when I click "next" it will display the next images and when i click "prev" it will display the previous images and to hide the next button if there are no more images on the right and vise versa
$(document).ready(function() {
$('.next').on('click', function() {
var currentImg = $('.active');
var nextImg = currentImg.next();
if (nextImg.length) {
currentImg.removeClass('active').css('z-index', -10);
a = nextImg.addClass('active').css('z-index', 10);
console.log(nextImg.length)
if (!(nextImg.length)) {
next.style.displsy = "none";
}
}
});
$('.prev').on('click', function() {
var currentImg = $('.active');
var prevImg = currentImg.prev();
if (prevImg.length) {
currentImg.removeClass('active').css('z-index', -10);
prevImg.addClass('active').css('z-index', 10);
}
currentImage = $(".active");
if (!currentImg.next().length) {
$(".next").hide;
} else {
$(".next").show();
}
});
});
.slider-outer {
display: flex;
}
.slider-inner {
position: relative;
height: 300px;
width: 500px;
overflow: hidden;
float: left;
padding: 3px;
}
.slider-inner img {
display: none;
height: 300px;
width: 500px;
}
.slider-inner img.active {
display: inline-block;
}
.prev,
.next {
float: left;
margin-top: 130px;
}
.prev {
position: relative;
margin-right: -45px;
z-index: 100;
}
.next {
position: relative;
margin-left: -45px;
z-index: 100;
}
.container {
overflow: auto;
width: 540px;
height: 40px auto;
}
button {
height: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="slider-outer">
<button class="prev" id="prev">Prev</button>
<div class="slider-inner">
<img src="https://via.placeholder.com/500" class="active" />
<img src="https://via.placeholder.com/500" />
<img src="https://via.placeholder.com/500" />
<img src="https://via.placeholder.com/500" />
</div>
<button class="next" id="next">Next</button>
</div>
</div>

Some of the problems are:
A spelling mistake in displsy = "none"
Missing parentheses in $(".next").hide
When clicking "next", the "prev" button should appear again (if it was hidden), and vice versa.
You should also avoid code repetition, so create a function that gets as argument whether it should call .next() or .prev() and then do all the common things. Also, .toggle is a nice jQuery function so you can avoid an if..else:
function rotate(direction) {
var currentImg = $('.active');
currentImg.removeClass('active').css('z-index', -10);
currentImg = currentImg[direction]();
currentImg.addClass('active').css('z-index', 10);
$(".next").toggle(currentImg.next().length > 0);
$(".prev").toggle(currentImg.prev().length > 0);
}
$(document).ready(function() {
$('.next').on('click', () => rotate("next"));
$('.prev').on('click', () => rotate("prev"));
});
.slider-outer {
display: flex;
}
.slider-inner {
position: relative;
height: 300px;
width: 500px;
overflow: hidden;
float: left;
padding: 3px;
}
.slider-inner img {
display: none;
height: 300px;
width: 500px;
}
.slider-inner img.active {
display: inline-block;
}
.prev,
.next {
float: left;
margin-top: 130px;
}
.prev {
position: relative;
margin-right: -45px;
z-index: 100;
}
.next {
position: relative;
margin-left: -45px;
z-index: 100;
}
.container {
overflow: auto;
width: 540px;
height: 40px auto;
}
button {
height: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="slider-outer">
<button class="prev" id="prev">Prev</button>
<div class="slider-inner">
<img src="https://via.placeholder.com/500?text=1" class="active" />
<img src="https://via.placeholder.com/500?text=2" />
<img src="https://via.placeholder.com/500?text=3" />
<img src="https://via.placeholder.com/500?text=4" />
</div>
<button class="next" id="next">Next</button>
</div>
</div>

Display flex is messing around with my items

I have a container that has a list of items, each item has an image and some information.
I made a slide function using JavaScript and I got into a little problem, because I'm using translateX, I want the items to be displayed inline.
I made some research and found that I must use display: flex when making a sliding image, and after that, the items are not showing correctly.
If I remove the flex and I put translateY (instead of X) the slide is working (from up/down) but I want from left-right.
Can someone help me?
This is the code that is not work (with display: flex and translateX)
var count = 1;
var next = document.querySelector('button.next');
var items = document.querySelectorAll('div.item');
var size = items[0].clientWidth;
next.addEventListener("click", function(e)
{
if(count == 2) {
return;
}
count++;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + ((-size * count)) + 'px)';
});
var prev = document.querySelector('button.prev');
prev.addEventListener("click", function(e)
{
if(count == 1) {
return;
}
count--;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + ((-size * count)) + 'px)';
});
.content {
margin-left: 50px;
}
.container {
width: 100%;
height: 600px;
}
.main {
display: flex;
width: 100%;
}
.container-slide {
width: 100%;
overflow: hidden;
position: relative;
}
.image {
width: 100%;
min-height: 600px;
max-height: 600px;
background-clip: padding-box;
float: left;
background-size: cover;
background-position: center center;
position: relative;
}
.info {
position: absolute;
bottom: 0;
left: 0;
width: 70%;
color: white;
background: green;
padding: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.buttons-info {
margin-left: 30px;
}
button.prev, button.next {
margin-top: 50px;
}
.show-list-pages {
position: absolute;
bottom: 20px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
<div class="content">
<div class="container container-slide">
<div class="main">
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://assets.hongkiat.com/uploads/minimalist-dekstop-wallpapers/4k/original/14.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 1</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
This is the other code without display: flex and translateX (is working) but the next item is not showing (because is not on inline, is under the first item)
var count = 1;
var next = document.querySelector('button.next');
var items = document.querySelectorAll('div.item');
var size = items[0].clientWidth;
next.addEventListener("click", function(e)
{
if(count == 2) {
return;
}
count++;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + ((-size * count)) + 'px)';
});
var prev = document.querySelector('button.prev');
prev.addEventListener("click", function(e)
{
if(count == 1) {
return;
}
count--;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + ((-size * count)) + 'px)';
});
.content {
margin-left: 50px;
}
.container {
width: 100%;
height: 600px;
}
.main {
/*display: flex;*/
width: 100%;
}
.container-slide {
width: 100%;
overflow: hidden;
position: relative;
}
.image {
width: 100%;
min-height: 600px;
max-height: 600px;
background-clip: padding-box;
float: left;
background-size: cover;
background-position: center center;
position: relative;
}
.info {
position: absolute;
bottom: 0;
left: 0;
width: 70%;
color: white;
background: green;
padding: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.buttons-info {
margin-left: 30px;
}
button.prev, button.next {
margin-top: 50px;
}
.show-list-pages {
position: absolute;
bottom: 20px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
<div class="content">
<div class="container container-slide">
<div class="main">
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://assets.hongkiat.com/uploads/minimalist-dekstop-wallpapers/4k/original/14.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 1</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
This is the code without display: flex and translateY instead of X, is working from up-down, but I want from left-right
var count = 1;
var next = document.querySelector('button.next');
var items = document.querySelectorAll('div.item');
var size = items[0].clientWidth;
next.addEventListener("click", function(e)
{
if(count == 2) {
return;
}
count++;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateY(' + ((-size * count)) + 'px)';
});
var prev = document.querySelector('button.prev');
prev.addEventListener("click", function(e)
{
if(count == 1) {
return;
}
count--;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateY(' + ((-size * count)) + 'px)';
});
.content {
margin-left: 50px;
}
.container {
width: 100%;
height: 600px;
}
.main {
/*display: flex;*/
width: 100%;
}
.container-slide {
width: 100%;
overflow: hidden;
position: relative;
}
.image {
width: 100%;
min-height: 600px;
max-height: 600px;
background-clip: padding-box;
float: left;
background-size: cover;
background-position: center center;
position: relative;
}
.info {
position: absolute;
bottom: 0;
left: 0;
width: 70%;
color: white;
background: green;
padding: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.buttons-info {
margin-left: 30px;
}
button.prev, button.next {
margin-top: 50px;
}
.show-list-pages {
position: absolute;
bottom: 20px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
<div class="content">
<div class="container container-slide">
<div class="main">
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://assets.hongkiat.com/uploads/minimalist-dekstop-wallpapers/4k/original/14.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 1</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
EDIT: I solved this issues, I just added min-width: 100% to the .item.

If you are looking for a carousel.
this is what I changed in CSS.
.main {
display: flex;
width: 200%;
}
.item{
width:100%;
}
this is what I changed in JS.
//in next -50% it shifts half way through .main
document.querySelector('div.main').style.transform = 'translateX(-50%)';
// in prev 0% it goes back to start
document.querySelector('div.main').style.transform = 'translateX(0%)';
var count = 1;
var next = document.querySelector('button.next');
var items = document.querySelectorAll('div.item');
var size = items[0].clientWidth;
next.addEventListener("click", function(e)
{
if(count == 2) {
return;
}
count++;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(-50%)';
});
var prev = document.querySelector('button.prev');
prev.addEventListener("click", function(e)
{
if(count == 1) {
return;
}
count--;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform ='translateX(-0%)';
});
.content {
margin-left: 50px;
}
.container {
width: 100%;
height: 600px;
}
.main {
display: flex;
width: 200%;
}
.container-slide {
width: 100%;
overflow: hidden;
position: relative;
}
.image {
width: 100%;
min-height: 600px;
max-height: 600px;
background-clip: padding-box;
float: left;
background-size: cover;
background-position: center center;
position: relative;
}
.info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: white;
background: green;
padding: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.item{
width:100%;
}
.buttons-info {
margin-left: 30px;
}
button.prev, button.next {
margin-top: 50px;
}
.show-list-pages {
position: absolute;
bottom: 20px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
<div class="content">
<div class="container container-slide">
<div class="main">
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://assets.hongkiat.com/uploads/minimalist-dekstop-wallpapers/4k/original/14.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 1</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>2</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
this is not the optimal solution as I tried to keep that original code.
this won't work if you add more than 2 images.

If you would like to change the entire code then here is the solution.
source MEDIUM carousel from scratch in vanilla JS
codepen.io carousel
!(function(d){
var itemClassName = "carousel__photo";
items = d.getElementsByClassName(itemClassName),
totalItems = items.length,
slide = 0,
moving = true;
// Set classes
function setInitialClasses() {
// Targets the previous, current, and next items
// This assumes there are at least three items.
items[totalItems - 1].classList.add("prev");
items[0].classList.add("active");
items[1].classList.add("next");
}
// Set event listeners
function setEventListeners() {
var next = d.getElementsByClassName('carousel__button--next')[0],
prev = d.getElementsByClassName('carousel__button--prev')[0];
next.addEventListener('click', moveNext);
prev.addEventListener('click', movePrev);
}
// Next navigation handler
function moveNext() {
// Check if moving
if (!moving) {
// If it's the last slide, reset to 0, else +1
if (slide === (totalItems - 1)) {
slide = 0;
} else {
slide++;
}
// Move carousel to updated slide
moveCarouselTo(slide);
}
}
// Previous navigation handler
function movePrev() {
// Check if moving
if (!moving) {
// If it's the first slide, set as the last slide, else -1
if (slide === 0) {
slide = (totalItems - 1);
} else {
slide--;
}
// Move carousel to updated slide
moveCarouselTo(slide);
}
}
function disableInteraction() {
// Set 'moving' to true for the same duration as our transition.
// (0.5s = 500ms)
moving = true;
// setTimeout runs its function once after the given time
setTimeout(function(){
moving = false
}, 500);
}
function moveCarouselTo(slide) {
// Check if carousel is moving, if not, allow interaction
if(!moving) {
// temporarily disable interactivity
disableInteraction();
// Update the "old" adjacent slides with "new" ones
var newPrevious = slide - 1,
newNext = slide + 1,
oldPrevious = slide - 2,
oldNext = slide + 2;
// Test if carousel has more than three items
if ((totalItems - 1) > 3) {
// Checks and updates if the new slides are out of bounds
if (newPrevious <= 0) {
oldPrevious = (totalItems - 1);
} else if (newNext >= (totalItems - 1)){
oldNext = 0;
}
// Checks and updates if slide is at the beginning/end
if (slide === 0) {
newPrevious = (totalItems - 1);
oldPrevious = (totalItems - 2);
oldNext = (slide + 1);
} else if (slide === (totalItems -1)) {
newPrevious = (slide - 1);
newNext = 0;
oldNext = 1;
}
// Now we've worked out where we are and where we're going,
// by adding/removing classes we'll trigger the transitions.
// Reset old next/prev elements to default classes
items[oldPrevious].className = itemClassName;
items[oldNext].className = itemClassName;
// Add new classes
items[newPrevious].className = itemClassName + " prev";
items[slide].className = itemClassName + " active";
items[newNext].className = itemClassName + " next";
}
}
}
function initCarousel() {
setInitialClasses();
setEventListeners();
// Set moving to false so that the carousel becomes interactive
moving = false;
}
initCarousel();
}(document));
.carousel-wrapper {
overflow: hidden;
width: 100%;
}
.carousel-wrapper * {
box-sizing: border-box;
}
.carousel {
transform-style: preserve-3d;
}
.carousel__photo {
opacity: 0;
position: absolute;
top:0;
width: 100%;
height:60vw;
max-height:90vh;
margin: auto;
padding: 1rem 4rem;
z-index: 100;
transition: transform .5s, opacity .5s, z-index .5s;
}
.carousel__photo.initial,
.carousel__photo.active {
opacity: 1;
position: relative;
z-index: 900;
}
.carousel__photo.prev,
.carousel__photo.next {
z-index: 800;
}
.carousel__photo.prev {
transform: translateX(-100%); /* Move 'prev' item to the left */
}
.carousel__photo.next {
transform: translateX(100%); /* Move 'next' item to the right */
}
/* buttons */
.carousel__button--prev,
.carousel__button--next {
position: absolute;
top:50%;
width: 3rem;
height: 3rem;
background-color: #FFF;
transform: translateY(-50%);
border-radius: 50%;
cursor: pointer;
z-index: 1001; /* Sit on top of everything */
border: 1px solid black;
}
.carousel__button--prev {
left:0;
}
.carousel__button--next {
right:0;
}
.carousel__button--prev::after,
.carousel__button--next::after {
content: " ";
position: absolute;
width: 10px;
height: 10px;
top: 50%;
left: 54%;
border-right: 2px solid black;
border-bottom: 2px solid black;
transform: translate(-50%, -50%) rotate(135deg);
}
.carousel__button--next::after {
left: 47%;
transform: translate(-50%, -50%) rotate(-45deg);
}
<div class="carousel-wrapper">
<div class="carousel">
<img class="carousel__photo initial" src="https://i.imgur.com/sKV54PO.jpeg">
<img class="carousel__photo" src="https://i.imgur.com/dZH9gh8.jpeg">
<img class="carousel__photo" src="https://i.imgur.com/TBgEy0n.jpeg">
<img class="carousel__photo" src="https://i.imgur.com/1PeQdB4.jpeg">
<img class="carousel__photo" src="https://i.imgur.com/ox8Cp47.jpeg">
<div class="carousel__button--next"></div>
<div class="carousel__button--prev"></div>
</div>
</div>

I created a variable translateAmount that starts at 0 and tracks where the carousel is at, and then it translates by the current amount. That way you can always translate it the right amount, your count variable keeps track of the number of pictures.
I also put a width 100% on the .item and width 200% on the .main div. I needed this because with the display: flex it tends to put everything in the screen.
Take a look:
HTML/JS
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="content">
<div class="container container-slide">
<div class="main">
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://assets.hongkiat.com/uploads/minimalist-dekstop-wallpapers/4k/original/14.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 1</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
<script>
var count = 1;
var next = document.querySelector('button.next');
var items = document.querySelectorAll('div.item');
var size = items[0].clientWidth;
let translateAmount = 0;
next.addEventListener("click", function(e)
{
if(count == 3) {
return;
}
count++;
translateAmount -= size;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + translateAmount + 'px)';
});
var prev = document.querySelector('button.prev');
prev.addEventListener("click", function(e)
{
if(count == 1) {
return;
}
count--;
translateAmount += size;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + translateAmount + 'px)';
});
</script>
</body>
</html>
CSS
.content {
/* margin-left: 50px; */
border: 0px solid red;
width: 100vw;
overflow: hidden;
}
.container {
width: 100%;
height: 600px;
}
.main {
display: flex;
width: fit-content;
}
.item {
width: 100vw;
}
.container-slide {
width: 100%;
/* height: 50%; */
/* overflow: hidden; */
/* position: relative; */
}
.image {
width: 100%;
min-height: 600px;
max-height: 600px;
background-clip: padding-box;
/* float: left; */
background-size: cover;
background-position: center center;
position: relative;
}
.info {
position: absolute;
bottom: 0;
left: 0;
width: 70%;
color: white;
background: green;
padding: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.buttons-info {
margin-left: 30px;
}
button.prev, button.next {
margin-top: 50px;
}
.show-list-pages {
position: absolute;
bottom: 20px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}

How to include angled brackets to the left and right of the active image slider in javascript

I have a simple image slider as shown in the fiddle below that slides upon clicking the active image when there are more images to show.
How can I include angled brackets to the left and right of the active image to inform and enable users to transition between images?
I will also like to make sure that the angled brackets do not show when there are no more slides to transition to the left or right.
I was able to include the arrows on the images but unable to get them to perform the same action of triggering the slide change as occurs when the next or previous image is clicked.
Thanks for the help.
$(document).ready(function() {
let $slider = $(".sliderG");
let sliderItem = $slider.children(".item.active");
let i = $slider.children(".item");
let i2 = $slider.children("#Arrows");
let ind = 0;
$slider
.children(".item")
.each(function() {
$(this).attr("data-index", ind++);
});
i.on("click", function(e) {
const that = $(this);
let dataIndex = that.data("index");
$(".item").removeClass("active");
that.addClass("active");
});
i2.on("click", function(e) {
const that = $(this);
let dataIndex = that.data("index");
$(".item").removeClass("active");
that.addClass("active");
});
});
.sliderG {
width: 75%;
height: 80%;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: 50px;
}
.sliderG .item {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: absolute;
background: url(https://www.g-money.com.gh/wp-content/uploads/2019/06/squircle-minG.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border-radius: 10px;
transition: all ease 0.7s;
z-index: 1;
transform: scale(0.8);
left: -300px;
right: 0;
margin: 0 auto;
}
.sliderG .item.active {
left: 0;
right: 0;
z-index: 2;
opacity: 1;
background: #ccc;
transform: scale(1);
}
.sliderG .item img{
display: block;
width: 100%;
}
.sliderG .item.active ~ .item {
left: 0;
right: -300px;
}
.sliderG .item.active + .item ~ .item {
opacity: 0.3;
visibility: hidden;
}
.sliderG .item.active + .item ~ .item:hover{
opacity: 0.7;
}
#Arrows{
display: flex;
justify-content: space-between;
height: auto;
position: absolute;
width: 100%;
z-index: 9;
top: 50%;
}
#Arrows i{
background-color: rgba(255, 255, 255, 0.25);
color: #1C1D21;
cursor: pointer;
height: auto;
padding: 15px;
transition: background-color 0.5s, color 0.5s;
}
#Arrows i:first-of-type{
padding-right: 20px;
}
#Arrows i:last-of-type{
padding-left: 20px;
}
#Arrows i:hover{
background-color: rgba(28, 29, 33, 0.75);
color: #EEEFF7;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class='sliderG'>
<div class='item'>
<img src="https://www.g-money.com.gh/wp-content/uploads/2020/02/Sending-MoneyT-scaled.jpg" alt="G-Money Send Money">
</div>
<div class='item active'>
<img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Generate-VoucherT-scaled.jpg" alt="G-Money Cash-Out at Agent">
</div>
<div class='item'>
<img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Pay-MerchantT-scaled.jpg" alt="G-Money Pay Merchant">
</div>
<div class='item'>
<img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Buy-AirtimeT-scaled.jpg" alt="G-Money Buy Airtime">
</div>
<div class='item'>
<img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Bank-ServiceT-scaled.jpg" alt="G-Money Bank Account">
</div>
<div class='item'>
<img src ="https://www.g-money.com.gh/wp-content/uploads/2020/03/Withdraw-at-AgentT-scaled.jpg" alt="G-Money Withdraw at Agent">
</div>
<!--<div class='item'>
<img src ="https://www.g-money.com.gh/wp-content/uploads/2020/02/Generate-VoucherT-scaled.jpg" alt="G-Money Pay Bill">
</div>-->
<div id="Arrows">
<i id="Prev" class="fa fa-chevron-left fa-3x" aria-hidden="true"></i>
<i id="Next" class="fa fa-chevron-right fa-3x" aria-hidden="true"></i>
</div>
</div>
</div>

Hi please try below changes:
<div id="Arrows">G-Money Send Money
<i id="Prev" onclick="changeSlide('prev');"class=" fa fa-chevron-left fa-3x" aria-hidden="true"></i>
<i id="Next" onclick="changeSlide('next');"class=" fa fa-chevron-right fa-3x" aria-hidden="true"></i>
</div>
</div>
And your javascript function should be something like this:
<script>
$(document).ready(function() {
let $slider = $(".sliderG");
let sliderItem = $slider.children(".item.active");
let i = $slider.children(".item");
//let i2 = $slider.children("#prev");
let ind = 0;
$slider
.children(".item")
.each(function() {
$(this).attr("data-index", ind++);
});
i.on("click", function(e) {
const that = $(this);
let dataIndex = that.data("index");
//alert(dataIndex);
$(".item").removeClass("active");
that.addClass("active");
});
});
function changeSlide(n) {
$('#Next').css("display", "block");
$('#Prev').css("display", "block");
let $slider = $(".sliderG");
//console.log(n);
var len = $slider.children(".item").length;
if(n == 'prev'){
//alert(n);
var sliderItem = $slider.children(".item.active").prev();
}
else {
var sliderItem = $slider.children(".item.active").next();
}
let index = sliderItem.data("index");
if(index != undefined) {
//alert(index);
$(".item").removeClass("active");
sliderItem.addClass("active");
if(index == 0) {
$('#Prev').css("display", "none");
}
else if(index == len-1) {
$('#Next').css("display", "none");
}
}
}
</script>

Why is my carousel snapping to the top on user interaction?

I've made a carousel on my single page website that displays some of my photography work. The problem I'm having is that whenever I click one of the arrows to access the next picture - left or right, I am instantly snapped to the top of the page!
I've checked through both the CSS and JS and I can't seem to find any reason as to why this would be occurring.
HTML:
<div class="container">
<h3><span class="underline">Exploration</span></h3>
<p>I love exploring and capturing epic moments on my journeys. Here's some of my favourites from my latest trip across the west coast of America.</p>
</div>
<div class="slider">
<!--SLIDE 1 START-->
<div class="slide active-slide slide-feature slide-feature-1">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 1 END-->
<!--SLIDE 2 START-->
<div class="slide slide-feature slide-feature-2">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 2 END-->
<!--SLIDE 3 START-->
<div class="slide slide-feature slide-feature-3">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 3 END-->
<!--SLIDE 4 START-->
<div class="slide slide-feature slide-feature-4">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 4 END-->
<!--SLIDE 5 START-->
<div class="slide slide-feature slide-feature-5">
<div class="container">
<div class="row">
</div>
</div>
</div>
<!--SLIDE 5 END-->
</div>
<div class="slider-nav">
<img src="images/arrow-left.svg">
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<img src="images/arrow-right.svg">
</div>
</div>
<!--FLIPBOARD ENDS HERE-->
</div>
CSS:
.exploration {
height: 1100px;
background-color: #ffffff;
}
.exploration .container {
position: relative;
top: 35px;
width: 1200px;
}
.exploration h3 {
color: #313131;
font-size: 40px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding-bottom: 20px;
text-align: center;
}
.exploration p {
color: #313131;
font-size: 20px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
text-align: center;
}
.slider {
position: relative;
top: 50px;
width: 100%;
height: 800px;
}
.slide {
display: none;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
/* Slide feature */
.slide-feature {
text-align: center;
height: 800px;
}
.slide-feature-1 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11036160_10152854777396270_5157414753497878003_o.jpg');
background-position: center;
}
.slide-feature-2 {
background-image: url('https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xta1/t31.0-8/11218515_10152909922431270_7749144937209461633_o.jpg');
background-position: center;
}
.slide-feature-3 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xpa1/t31.0-8/11187795_10152891725491270_1769195601160147349_o.jpg');
background-position: bottom;
}
.slide-feature-4 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11154672_10152854784061270_3532862830070230799_o.jpg');
background-position: center;
}
.slide-feature-5 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/11164749_10152909922426270_8192461025609874418_o.jpg');
background-position: center;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
position: relative;
top: 40px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
position: relative;
top: 40px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
position: relative;
top: 40px;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #7FCCE5;
}
JS:
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
//Next Arrow Functionality
$('.arrow-next').click(function() {
var currentSlide=$('.active-slide');
var nextSlide=currentSlide.next();
var currentDot=$('.active-dot');
var nextDot=currentDot.next();
if (nextSlide.length == 0) {
nextSlide=$('.slide').first();
nextDot=$('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
//Previous Arrow Click Functionality
$('.arrow-prev').click(function() {
var currentSlide=$('.active-slide');
var prevSlide=currentSlide.prev();
var currentDot=$('.active-dot');
var prevDot=currentDot.prev();
if(prevSlide.length == 0) {
prevSlide=$('.slide').last();
prevDot=$('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
//Load Jumbotron text on page open.
$("#test h1").addClass("load");
};
$(document).ready(main);

You need to add e.preventDefault(); to your onlick functions
Check the fiddle
EDIT
As I just commented in the comment section it is the href="#" that is causing the page to the jump to the top. So technically if you remove the achor tag the e.preventDefault(); is not necessary. But it is good to keep it.

Add a parameter (e) to your click callback functions then prevent default post (that an anchor tag with href set has) with this line:
e.preventDefault();
like this:
//Next Arrow Functionality
$('.arrow-next').click(function (e) {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length == 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
e.preventDefault();
});
//Previous Arrow Click Functionality
$('.arrow-prev').click(function (e) {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length == 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
e.preventDefault();
});