We Keep Coding

Multiple Carousel For Multiple Cards

let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("slides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 1000); // Change image every 1 seconds
}
.project-card {
height: 300px;
border: 1px dashed red;
}
.project-screenshots {
width: 100%;
margin: auto;
position: relative;
overflow: hidden;
}
.project-screenshots li img {
width: 100%;
}
.fade {
animation-name: fade;
animation-duration: 2.5s;
}
#keyframes fade {
from {
scale: 1.2;
}
to {
scale: 1;
}
}
<div class="project-card">
<ul class="project-screenshots" id="slider">
<li class="slides fade"><img src="https://1.bp.blogspot.com/-GgceYGYr2pk/YPCQp8loxqI/AAAAAAAACXU/Y795AFD-cN8PMV0V2__z2n1B3KFagE8qgCNcBGAsYHQ/s16000/1.jpg">
</li>
<li class="slides fade"><img src="https://1.bp.blogspot.com/-pl0VR_xS5Cw/YPCQp1scezI/AAAAAAAACXc/oB9xc6k8RuY5rPksMSy01f3iUn8zSIFzwCNcBGAsYHQ/s16000/2.jpg">
</li>
<li class="slides fade"><img src="https://1.bp.blogspot.com/-dt6CL2fiBq0/YPCQp0zmK6I/AAAAAAAACXY/0PevDL7pvx87mefb4oCnO613N1UitdicQCNcBGAsYHQ/s16000/3.jpg">
</li>
<li class="slides fade"><img src="https://1.bp.blogspot.com/-T_V-s57aVDo/YPCQrWayswI/AAAAAAAACXg/h1ifJGnBuXovvBdGDNvmhg-DXIVK4Xw9QCNcBGAsYHQ/s16000/4.jpg">
</li>
<li class="slides fade"><img src="https://1.bp.blogspot.com/-TNT1a5M1v3o/YPCQrWmn_fI/AAAAAAAACXk/p8nx_OB2R6Aw172WIv5vuB8jF-qWDsHlwCNcBGAsYHQ/s16000/5.jpg">
</li>
</ul>
</div>
<div class="project-card">
<ul class="project-screenshots">
<li class="slides fade"><img src="https://1.bp.blogspot.com/-GgceYGYr2pk/YPCQp8loxqI/AAAAAAAACXU/Y795AFD-cN8PMV0V2__z2n1B3KFagE8qgCNcBGAsYHQ/s16000/1.jpg">
</li>
<li class="slides fade"><img src="https://1.bp.blogspot.com/-pl0VR_xS5Cw/YPCQp1scezI/AAAAAAAACXc/oB9xc6k8RuY5rPksMSy01f3iUn8zSIFzwCNcBGAsYHQ/s16000/2.jpg">
</li>
<li class="slides fade"><img src="https://1.bp.blogspot.com/-dt6CL2fiBq0/YPCQp0zmK6I/AAAAAAAACXY/0PevDL7pvx87mefb4oCnO613N1UitdicQCNcBGAsYHQ/s16000/3.jpg">
</li>
<li class="slides fade"><img src="https://1.bp.blogspot.com/-T_V-s57aVDo/YPCQrWayswI/AAAAAAAACXg/h1ifJGnBuXovvBdGDNvmhg-DXIVK4Xw9QCNcBGAsYHQ/s16000/4.jpg">
</li>
<li class="slides fade"><img src="https://1.bp.blogspot.com/-TNT1a5M1v3o/YPCQrWmn_fI/AAAAAAAACXk/p8nx_OB2R6Aw172WIv5vuB8jF-qWDsHlwCNcBGAsYHQ/s16000/5.jpg">
</li>
</ul>
</div>
In this code, I have two cards. Each one should have its own carousel. But in the output I'm getting the carousel alternatively. I know its because I have used the same class name for the slides and used the same JavaScript code. I can change them and write the same JavaScript code multiples times. But I want a minimal solution for this.

target all the parent elements
use a better class naming convention
use setInterval to toggle a class on your items LI elements like .is-active
set in CSS the desired is-active styles
set a (if needed) mouseenter and mouseleave (or with pointer events) Events to pause the interval if the mouse is over your slider
const sliderify = (elSlider) => {
const elsItems = elSlider.children;
let itv = null;
let i = 0;
const anim = () => {
elsItems[i].classList.remove("is-active");
i += 1;
i %= elsItems.length;
elsItems[i].classList.add("is-active");
};
const play = () => itv = setInterval(anim, 3000);
const stop = () => clearInterval(itv);
elSlider.addEventListener("pointerenter", stop);
elSlider.addEventListener("pointerleave", play);
// Init:
anim(); // Show first items
play(); // Loop!
};
document.querySelectorAll(".slider").forEach(sliderify);
* {
margin: 0;
box-sizing: border-box;
}
.slider {
padding: 0;
height: 100px; /* as you need */
position: relative;
overflow: hidden;
}
.slider-item {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
scale: 1.2;
transition: 0.4s;
opacity: 0;
pointer-events: none;
}
.slider-item.is-active {
opacity: 1;
scale: 1;
pointer-events: auto;
}
.slider-item img {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<ul class="slider">
<li class="slider-item"><img src="https://1.bp.blogspot.com/-T_V-s57aVDo/YPCQrWayswI/AAAAAAAACXg/h1ifJGnBuXovvBdGDNvmhg-DXIVK4Xw9QCNcBGAsYHQ/s16000/4.jpg">
</li>
<li class="slider-item"><img src="https://1.bp.blogspot.com/-TNT1a5M1v3o/YPCQrWmn_fI/AAAAAAAACXk/p8nx_OB2R6Aw172WIv5vuB8jF-qWDsHlwCNcBGAsYHQ/s16000/5.jpg">
</li>
<li class="slider-item"><img src="https://1.bp.blogspot.com/-GgceYGYr2pk/YPCQp8loxqI/AAAAAAAACXU/Y795AFD-cN8PMV0V2__z2n1B3KFagE8qgCNcBGAsYHQ/s16000/1.jpg">
</li>
<li class="slider-item"><img src="https://1.bp.blogspot.com/-pl0VR_xS5Cw/YPCQp1scezI/AAAAAAAACXc/oB9xc6k8RuY5rPksMSy01f3iUn8zSIFzwCNcBGAsYHQ/s16000/2.jpg">
</li>
<li class="slider-item"><img src="https://1.bp.blogspot.com/-dt6CL2fiBq0/YPCQp0zmK6I/AAAAAAAACXY/0PevDL7pvx87mefb4oCnO613N1UitdicQCNcBGAsYHQ/s16000/3.jpg">
</li>
</ul>
<ul class="slider">
<li class="slider-item"><img src="https://1.bp.blogspot.com/-GgceYGYr2pk/YPCQp8loxqI/AAAAAAAACXU/Y795AFD-cN8PMV0V2__z2n1B3KFagE8qgCNcBGAsYHQ/s16000/1.jpg">
</li>
<li class="slider-item"><img src="https://1.bp.blogspot.com/-pl0VR_xS5Cw/YPCQp1scezI/AAAAAAAACXc/oB9xc6k8RuY5rPksMSy01f3iUn8zSIFzwCNcBGAsYHQ/s16000/2.jpg">
</li>
<li class="slider-item"><img src="https://1.bp.blogspot.com/-dt6CL2fiBq0/YPCQp0zmK6I/AAAAAAAACXY/0PevDL7pvx87mefb4oCnO613N1UitdicQCNcBGAsYHQ/s16000/3.jpg">
</li>
<li class="slider-item"><img src="https://1.bp.blogspot.com/-T_V-s57aVDo/YPCQrWayswI/AAAAAAAACXg/h1ifJGnBuXovvBdGDNvmhg-DXIVK4Xw9QCNcBGAsYHQ/s16000/4.jpg">
</li>
<li class="slider-item"><img src="https://1.bp.blogspot.com/-TNT1a5M1v3o/YPCQrWmn_fI/AAAAAAAACXk/p8nx_OB2R6Aw172WIv5vuB8jF-qWDsHlwCNcBGAsYHQ/s16000/5.jpg">
</li>
</ul>

Scroll to clicked li on click overflow-x: scroll;

I want to make a made this thumbnail scroll bar for woocommerce But it is not working correct and I can't get it to work. This is for woocommerce product gallery so I can't really make changes to the html thats why there are ol
Is it also possible to have te scrollbar scroll to the item that is clicked?
$(document).ready(function() {
var scrollTo = 0;
$('.flex-control-nav').on('click', "img", function() {
var activeItem = $('li.active');
var selectedItem = $(this).parent()
var activeIndex = $('li').index(activeItem);
var selectedIndex = $('li').index(selectedItem);
scrollTo = $('.flex-control-nav li').scrollLeft() -selectedItem.position().left + ($('.flex-control-nav').width() / 2) - (selectedItem.width() / 2);
$('.flex-control-nav').css('transform', 'translateX(' + scrollTo + 'px)');
activeItem.removeClass('active');
selectedItem.addClass('active');
});
});
.flex-control-thumbs li {
display: flex;
overflow-x: visible;
flex: 1 0 40%;
}
ol>li {
padding: 2px;
}
li {
width: 50px;
margin: 0;
cursor: pointer;
height: 100px;
}
img{
background: blue;
}
ol{
list-style: none;
}
.flex-control-thumbs {
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
margin: 0 50px;
}
ul {
margin: 25px -2px 0;
max-width: 68%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<ol class="flex-control-nav flex-control-thumbs">
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
</ol>

Horizontal Click and Drag Scrolling with JS - Prevent click on mouseup

I have created a horizontal projects gallery.
I want to let the visitor drag right & left to scroll.
This is my pen: https://codepen.io/omritk1/pen/qBByEoR.
My problem is that after the scroll, on "mouseup", it triggers click on the link.
How can I prevent this event but also let the user click on the link.
(I have used this pen as to set the JS: https://codepen.io/toddwebdev/pen/yExKoj)
const slider = document.querySelector('.catalog-list');
let isDown = false;
let startX;
let scrollLeft;
slider.addEventListener('mousedown', (e) => {
isDown = true;
slider.classList.add('active');
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
if(!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 1;
slider.scrollLeft = scrollLeft - walk;
console.log(walk);
});
.projects-catalog .catalog-slider {
margin: 50px 0px;
}
.projects-catalog .catalog-cover {
position: relative;
}
.projects-catalog ul {
white-space: nowrap;
overflow-x: auto;
}
.projects-catalog li {
width: 75%;
height: 200px;
}
li.catalog-item {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.projects-catalog li {
display: inline-block;
margin: 0 10px 0 0;
width: 350px;
height: 250px;
background: #222;
}
<div class="projects-catalog">
<div id="imageSlider1" class="catalog-slider">
<div class="catalog-cover">
<ul id="sliderWrapper1" class="catalog-list corporate-projects">
<i id="prev1" class="fas fa-chevron-left move-left" style="display: flex;"></i>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<i id="next1" class="fas fa-chevron-right move-right"></i>
</ul>
</div>
</div>
</div>

Looks like a duplicate of this .
Try the below snippet.
const slider = document.querySelector(".catalog-list");
const preventClick = (e) => {
e.preventDefault();
e.stopImmediatePropagation();
}
let isDown = false;
let isDragged = false;
let startX;
let scrollLeft;
slider.addEventListener("mousedown", e => {
isDown = true;
slider.classList.add("active");
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener("mouseleave", () => {
isDown = false;
slider.classList.remove("active");
});
slider.addEventListener("mouseup", (e) => {
isDown = false;
const elements = document.querySelectorAll("a");
if(isDragged){
for(let i = 0; i<elements.length; i++){
elements[i].addEventListener("click", preventClick);
}
}
else{
for(let i = 0; i<elements.length; i++){
elements[i].removeEventListener("click", preventClick);
}
}
slider.classList.remove("active");
isDragged = false;
});
slider.addEventListener("mousemove", e => {
if (!isDown) return;
isDragged = true;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 2;
slider.scrollLeft = scrollLeft - walk;
console.log(walk);
});
.projects-catalog .catalog-slider {
margin: 50px 0px;
}
.projects-catalog .catalog-cover {
position: relative;
}
.projects-catalog ul {
white-space: nowrap;
overflow-x: auto;
}
.projects-catalog li {
width: 75%;
height: 200px;
}
li.catalog-item {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.projects-catalog li {
display: inline-block;
margin: 0 10px 0 0;
width: 350px;
height: 250px;
background: #222;
}
<div class="projects-catalog">
<div id="imageSlider1" class="catalog-slider">
<div class="catalog-cover">
<ul id="sliderWrapper1" class="catalog-list corporate-projects">
<i id="prev1" class="fas fa-chevron-left move-left" style="display: flex;"></i>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<a href="https://codepen.io/">
<li class="catalog-item"></li>
</a>
<i id="next1" class="fas fa-chevron-right move-right"></i>
</ul>
</div>
</div>
</div>

Add this to your CSS file
.active .catalog-item {
pointer-events: none;
}
EDIT: Credits: https://stackoverflow.com/a/24273710/5757893
EDIT: Then remove the following line from mousedown event
slider.classList.add('active');
And add it to the mousemove event method as follows:
if (Math.abs(startX - e.pageX) > 10) {
slider.classList.add('active');
}
So that if you start dragging at least 10 pixels it won't register pointer events, but if you didn't move too much, it'll stay click the link.

How to make an infinite horizontal scroll on list (li) elements

What I am looking to achieve is to make the items in the list continue scrolling even at the last item in both directions. i.e: Let it continue to scroll starting from the first OR last item all over again. I have worked out the HTML and CSS but don't know what method to use in js/jquery. I'd really appreciate any help or a good pointer.
Here is the HTML
<html>
<div class="container">
<ul class="horscroll" id="autoscrollR">
<li>
<a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img
class="img-thumbnail"
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=1" >
</a>
</li>
<li>
<a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img
class="img-thumbnail"
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2">
</a>
</li>
<li>
<a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img
class="img-thumbnail"
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=3">
</a>
</li>
...........
</ul>
</div> </html>
And the CSS is used is very basic for an example:
.container{
max-width: 100%;
}
.horscroll {
display: -webkit-inline-box;
width: 100%;
overflow: auto;
margin:10px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.img-thumbnail {
margin: 5px 5px 0px 5px;
border: 1px solid #;
border-radius: 4px;
}
Now the Js function to use is where I am stuck.
Here is the FIDDLE LINK

So you are looking for something like this:-
var bgWidth = 350; //Max-width of <li> you would like to set.
var scrollPos = Math.ceil($('body').width() / 20);
$(document).ready(function() {
$('body').width(bgWidth + $(window).width());
$(window).scroll(function() {
if ($(window).scrollLeft() >= ($('body').width() - $(window).width())) {
$(window).scrollLeft(1 + scrollPos / 4);
} else if ($(window).scrollLeft() == 0) {
$(window).scrollLeft($('body').width() - $(window).width() - scrollPos / 4);
}
});
});
$(window).resize(function() {
$('body').width(bgWidth + $(window).width());
});
.container {
max-width: 100%;
}
.horscroll {
display: -webkit-inline-box;
width: 100%;
overflow: auto;
margin: 10px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.img-thumbnail {
margin: 5px 5px 0px 5px;
border: 1px solid #;
border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul class="horscroll" id="autoscrollR">
<li>
<a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=1">
</a>
</li>
<li>
<a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2">
</a>
</li>
<li>
<a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=3">
</a>
</li>
<li>
<img class="img-thumbnail " src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=4 ">
</li>
<li>
<a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=5">
</a>
</li>
<li>
<a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=6">
</a>
</li>
<li>
<a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=7">
</a>
</li>
<li>
<img class="img-thumbnail " src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=8 ">
</li>
</ul>
</div>
Hope this helps you!

view more button is not working

In my posts I am trying to add a gallery of images. I want to have a load more button show up after 4 images. Then you would press the load more button and 4 more appear, and so on. I have created the html, css, and js, but for some reason it is not working. Can anyone help me find a solution? Thanks in advance. Here is the fiddle https://jsfiddle.net/8zfz6hap/
html
<div class="shop-gallery">
<div class="product">
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class="product">
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class="product">
<a href="href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class="product">
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class="product">
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class="product">
<a href="href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class='product'>
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div> <div class='product'>
<a href="#" target="_blank">
<img src='http://nord.imgix.net/Zoom/19/_12156979.jpg?fit=fill&bg=FFF&fm=jpg&q=60&w=380&h=583'>
</a>
</div>
</div>
<button id="load-more-comments">Load More</button>
js
var $parent = $("#shop-gallery"),
$items = $parent.find("#product"),
$loadMoreBtn = $("#load-more-comments"),
maxItems = 4,
hiddenClass = "visually-hidden";
// add visually hidden class to items beyond maxItems
$.each($items, function(idx,item){
if(idx > maxItems - 1){
$(this).addClass(hiddenClass);
}
});
// onclick of show more button show more = maxItems
// if there are none left to show kill show more button
$loadMoreBtn.on("click", function(e){
$("."+hiddenClass).each(function(idx,item){
if(idx < maxItems - 1){
$(this).removeClass(hiddenClass);
}
// kill button if no more to show
if($("."+hiddenClass).size() === 0){
$loadMoreBtn.hide();
}
});
});
css
.product img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: auto;
height: auto;
margin: auto;
max-width: calc(100% - 48px);
max-height: calc(100% - 48px);
}
.product {
width: 21%;
height: 0;
padding-top: 30%;
display: inline-block;
position: relative;
margin-bottom: 3.5%;
cursor: pointer;
}
.visually-hidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}

shop-gallery and product both are classes.
Need to use :
var $parent = $(".shop-gallery"),
$items = $parent.find(".product")
To select and actions on them. . instead of #
Example Fiddle
Update:
In order to hide load more button use condition - $("." + hiddenClass).length === 0 and to show 4 images, your code is correct just update the condition to idx < maxItems so that it true for idx - 0,1,2,3 which will be four images.
Example Fiddle