We Keep Coding

Buttons don't work when I place them outside the carousel - javascript

I have this code and when I put the anchor (arrow img) outside, .MultiCarousel div it doesn't work. I didn't write the code but I think I should change something in JavaScript. I want the anchor outside the container div but with the same functionality. I am not very familiar with JavaScript so I don't know what to change. Can someone help?
$(document).ready(function () {
var itemsMainDiv = ('.MultiCarousel');
var itemsDiv = ('.MultiCarousel-inner');
var itemWidth = "";
$('.leftLst, .rightLst').click(function () {
var condition = $(this).hasClass("leftLst");
if (condition)
click(0, this);
else
click(1, this)
});
ResCarouselSize();
$(window).resize(function () {
ResCarouselSize();
});
//this function define the size of the items
function ResCarouselSize() {
var incno = 0;
var dataItems = ("data-items");
var itemClass = ('.item');
var id = 0;
var btnParentSb = '';
var itemsSplit = '';
var sampwidth = $(itemsMainDiv).width();
var bodyWidth = $('body').width();
$(itemsDiv).each(function () {
id = id + 1;
var itemNumbers = $(this).find(itemClass).length;
btnParentSb = $(this).parent().attr(dataItems);
itemsSplit = btnParentSb.split(',');
$(this).parent().attr("id", "MultiCarousel" + id);
if (bodyWidth >= 1200) {
incno = itemsSplit[3];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 992) {
incno = itemsSplit[2];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 768) {
incno = itemsSplit[1];
itemWidth = sampwidth / incno;
}
else {
incno = itemsSplit[0];
itemWidth = sampwidth / incno;
}
$(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
$(this).find(itemClass).each(function () {
$(this).outerWidth(itemWidth);
});
$(".leftLst").addClass("over");
$(".rightLst").removeClass("over");
});
}
//this function used to move the items
function ResCarousel(e, el, s) {
var leftBtn = ('.leftLst');
var rightBtn = ('.rightLst');
var translateXval = '';
var divStyle = $(el + ' ' + itemsDiv).css('transform');
var values = divStyle.match(/-?[\d\.]+/g);
var xds = Math.abs(values[4]);
if (e == 0) {
translateXval = parseInt(xds) - parseInt(itemWidth * s);
$(el).siblings(rightBtn).removeClass("over");
if (translateXval <= itemWidth / 2) {
translateXval = 0;
$(el).siblings(leftBtn).addClass("over");
}
}
else if (e == 1) {
var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
translateXval = parseInt(xds) + parseInt(itemWidth * s);
$(el).siblings(leftBtn).removeClass("over");
if (translateXval >= itemsCondition - itemWidth / 2) {
translateXval = itemsCondition;
$(el).siblings(rightBtn).addClass("over");
}
}
$(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
}
//It is used to get some elements from btn
function click(ell, ee) {
var Parent = "#" + $(ee).siblings( '.MultiCarousel' ).attr("id");
var slide = $(Parent).attr("data-slide");
ResCarousel(ell, Parent, slide);
}
});
.MultiCarousel {
float: left;
overflow: hidden;
padding: 15px;
width: 100%;
position:relative;
box-sizing: border-box;
}
.MultiCarousel .MultiCarousel-inner {
transition: 1s ease all;
float: left;
}
.MultiCarousel .MultiCarousel-inner .item {
float: left;
}
.MultiCarousel .MultiCarousel-inner .item > div {
text-align: center;
padding:10px;
margin:10px;
color:#666;
}
.leftLst, .rightLst {
position:absolute;
border-radius:50%;
top:calc(50% - 20px);
background: red;
width: 50px;
height: 50px;
}
.leftLst {
left:0;
}
.rightLst {
right:0;
}
.leftLst.over, .rightLst.over {
pointer-events: none;
background:#ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="MultiCarousel" data-items="1,2,3,4" data-slide="1" id="MultiCarousel" data-interval="1000">
<div class="MultiCarousel-inner">
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert4.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert2.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert3.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert7.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert4.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert2.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert3.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="images/cert7.png" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
</div>
<a class=" leftLst"><img src="images/left_arrow.svg" alt=""></a>
<a class=" rightLst"><img src="images/right_arrow.svg" alt=""></a>
</div>
</div>
</div>

The problem is that the click() function is searching for the parent element of the arrow key button, which it expects to be the .MultiCarousel div in order for the rest of the code to work. So when you place the arrow keys outside of the .MultiCarousel div a different parent will be found and your slider will not work.
In this case you could use the jQuery siblings() function to find the .MultiCarousel div, as the arrow key buttons are now siblings.
The same goes for the ResCarousel() function. It expects the arrow key buttons to be children of the .MultiCarousel div. So you can also use siblings() here.
$(document).ready(function () {
var itemsMainDiv = ('.MultiCarousel');
var itemsDiv = ('.MultiCarousel-inner');
var itemWidth = "";
$('.leftLst, .rightLst').click(function () {
var condition = $(this).hasClass("leftLst");
if (condition)
click(0, this);
else
click(1, this)
});
ResCarouselSize();
$(window).resize(function () {
ResCarouselSize();
});
//this function define the size of the items
function ResCarouselSize() {
var incno = 0;
var dataItems = ("data-items");
var itemClass = ('.item');
var id = 0;
var btnParentSb = '';
var itemsSplit = '';
var sampwidth = $(itemsMainDiv).width();
var bodyWidth = $('body').width();
$(itemsDiv).each(function () {
id = id + 1;
var itemNumbers = $(this).find(itemClass).length;
btnParentSb = $(this).parent().attr(dataItems);
itemsSplit = btnParentSb.split(',');
$(this).parent().attr("id", "MultiCarousel" + id);
if (bodyWidth >= 1200) {
incno = itemsSplit[3];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 992) {
incno = itemsSplit[2];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 768) {
incno = itemsSplit[1];
itemWidth = sampwidth / incno;
}
else {
incno = itemsSplit[0];
itemWidth = sampwidth / incno;
}
$(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
$(this).find(itemClass).each(function () {
$(this).outerWidth(itemWidth);
});
$(".leftLst").addClass("over");
$(".rightLst").removeClass("over");
});
}
//this function used to move the items
function ResCarousel(e, el, s) {
var leftBtn = ('.leftLst');
var rightBtn = ('.rightLst');
var translateXval = '';
var divStyle = $(el + ' ' + itemsDiv).css('transform');
var values = divStyle.match(/-?[\d\.]+/g);
var xds = Math.abs(values[4]);
if (e == 0) {
translateXval = parseInt(xds) - parseInt(itemWidth * s);
$(el).siblings(rightBtn).removeClass("over");
if (translateXval <= itemWidth / 2) {
translateXval = 0;
$(el).siblings(leftBtn).addClass("over");
}
}
else if (e == 1) {
var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
translateXval = parseInt(xds) + parseInt(itemWidth * s);
$(el).siblings(leftBtn).removeClass("over");
if (translateXval >= itemsCondition - itemWidth / 2) {
translateXval = itemsCondition;
$(el).siblings(rightBtn).addClass("over");
}
}
$(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
}
//It is used to get some elements from btn
function click(ell, ee) {
var Parent = "#" + $(ee).siblings( '.MultiCarousel' ).attr("id");
var slide = $(Parent).attr("data-slide");
ResCarousel(ell, Parent, slide);
}
});
.MultiCarousel {
float: left;
overflow: hidden;
padding: 15px;
width: 100%;
position:relative;
box-sizing: border-box;
}
.MultiCarousel .MultiCarousel-inner {
transition: 1s ease all;
float: left;
}
.MultiCarousel .MultiCarousel-inner .item {
float: left;
}
.MultiCarousel .MultiCarousel-inner .item > div {
text-align: center;
padding:10px;
margin:10px;
color:#666;
}
.leftLst, .rightLst {
position:absolute;
border-radius:50%;
top:calc(50% - 20px);
background: red;
width: 50px;
height: 50px;
}
.leftLst {
left:0;
}
.rightLst {
right:0;
}
.leftLst.over, .rightLst.over {
pointer-events: none;
background:#ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="MultiCarousel" data-items="1,2,3,4" data-slide="1" id="MultiCarousel" data-interval="1000">
<div class="MultiCarousel-inner">
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
</div>
</div>
<a class=" leftLst"><img src="images/left_arrow.svg" alt=""></a>
<a class=" rightLst"><img src="images/right_arrow.svg" alt=""></a>
</div>
</div>
Alternative solution
Your question stated specifically that you wanted to place the arrow key buttons outside the .MultiCarousel div but I think it might be better to keep them inside the div as it functions as a wrapper for the whole carousel.
You can then use the closest() function to find the .MultiCarousel div in the click() function, and the find() function to find the buttons in the ResCarousel() function.
This way the buttons are always connected to the correct slider, for instance when you want to use multiple sliders next to each other, as in the example below.
$(document).ready(function () {
var itemsMainDiv = ('.MultiCarousel');
var itemsDiv = ('.MultiCarousel-inner');
var itemWidth = "";
$('.leftLst, .rightLst').click(function () {
var condition = $(this).hasClass("leftLst");
if (condition)
click(0, this);
else
click(1, this)
});
ResCarouselSize();
$(window).resize(function () {
ResCarouselSize();
});
//this function define the size of the items
function ResCarouselSize() {
var incno = 0;
var dataItems = ("data-items");
var itemClass = ('.item');
var id = 0;
var btnParentSb = '';
var itemsSplit = '';
var sampwidth = $(itemsMainDiv).width();
var bodyWidth = $('body').width();
$(itemsDiv).each(function () {
id = id + 1;
var itemNumbers = $(this).find(itemClass).length;
btnParentSb = $(this).parent().attr(dataItems);
itemsSplit = btnParentSb.split(',');
$(this).parent().attr("id", "MultiCarousel" + id);
if (bodyWidth >= 1200) {
incno = itemsSplit[3];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 992) {
incno = itemsSplit[2];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 768) {
incno = itemsSplit[1];
itemWidth = sampwidth / incno;
}
else {
incno = itemsSplit[0];
itemWidth = sampwidth / incno;
}
$(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
$(this).find(itemClass).each(function () {
$(this).outerWidth(itemWidth);
});
$(".leftLst").addClass("over");
$(".rightLst").removeClass("over");
});
}
//this function used to move the items
function ResCarousel(e, el, s) {
var leftBtn = ('.leftLst');
var rightBtn = ('.rightLst');
var translateXval = '';
var divStyle = $(el + ' ' + itemsDiv).css('transform');
var values = divStyle.match(/-?[\d\.]+/g);
var xds = Math.abs(values[4]);
if (e == 0) {
translateXval = parseInt(xds) - parseInt(itemWidth * s);
$(el).find(rightBtn).removeClass("over");
if (translateXval <= itemWidth / 2) {
translateXval = 0;
$(el).find(leftBtn).addClass("over");
}
}
else if (e == 1) {
var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
translateXval = parseInt(xds) + parseInt(itemWidth * s);
$(el).find(leftBtn).removeClass("over");
if (translateXval >= itemsCondition - itemWidth / 2) {
translateXval = itemsCondition;
$(el).find(rightBtn).addClass("over");
}
}
$(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
}
//It is used to get some elements from btn
function click(ell, ee) {
var Parent = "#" + $(ee).closest( '.MultiCarousel' ).attr("id");
var slide = $(Parent).attr("data-slide");
ResCarousel(ell, Parent, slide);
}
});
.MultiCarousel {
float: left;
overflow: hidden;
margin: 5%;
width: 40%;
position:relative;
box-sizing: border-box;
}
.MultiCarousel .MultiCarousel-inner {
transition: 1s ease all;
float: left;
}
.MultiCarousel .MultiCarousel-inner .item {
float: left;
}
.MultiCarousel .MultiCarousel-inner .item > div {
text-align: center;
padding:10px;
margin:10px;
color:#666;
}
.leftLst, .rightLst {
/*position:absolute;*/
border-radius:50%;
/*top:calc(50% - 20px);*/
background: red;
width: 50px;
height: 50px;
display: block;
}
.leftLst {
float: left;
}
.rightLst {
float: right;
}
.leftLst.over, .rightLst.over {
pointer-events: none;
background:#ccc;
}
.buttons {
width: 100%;
clear:both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="MultiCarousel" data-items="1,2,3,4" data-slide="1" id="MultiCarousel" data-interval="1000">
<div class="MultiCarousel-inner">
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
</div>
<div class="buttons">
<a class=" leftLst"><img src="images/left_arrow.svg" alt=""></a>
<a class=" rightLst"><img src="images/right_arrow.svg" alt=""></a>
</div>
</div>
<div class="MultiCarousel" data-items="1,2,3,4" data-slide="1" id="MultiCarousel" data-interval="1000">
<div class="MultiCarousel-inner">
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
<div class="item">
<div class="col-xl-3 pad15">
<img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
<div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
</div>
</div>
</div>
<div class="buttons">
<a class=" leftLst"><img src="images/left_arrow.svg" alt=""></a>
<a class=" rightLst"><img src="images/right_arrow.svg" alt=""></a>
</div>
</div>
</div>
</div>

Related

i have a javascript slider in my html website, the code is like below:
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
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, 2000);
}
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 2</div>
<img src="fb1.jpg" alt="Image">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 2</div>
<img src="fb2.jpg">
</div>
</div>
this is working fine, now i have added another slider in the same page:
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 2</div>
<img src="auto1.jpg" alt="Image">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 2</div>
<img src="auto2.jpg">
</div>
</div>
now the issue is its kind of colliding, i think because both has same javascript code, both the slide is calculating total images in both the slides and blank images are coming in both, can anyone please tell me how to fix this, thanks in advance

First: You call the function showSlides() with a param (slideIndex) that isn't necessary, because the function uses the global declared var.
I recommend, to add or remove a class (for example .active) instead of styling with js. The advantage is, that you can get the index in the function via that class instead of using the global var for that:
const active_slide = document.querySelector('.active');
let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;
With that in use you can loop through the slideshow-containers without getting trouble with the slideIndex.
Working example:
(i removed the functions plusSlides() and currentSlide(), because they aren't used in that example and at least plusSlides() needs another functionality than showSlides())
showSlides();
function showSlides() {
const containers = document.querySelectorAll('.slideshow-container');
for (let i = 0; i < containers.length; i++) {
const slides = containers[i].getElementsByClassName("mySlides");
const active_slide = containers[i].querySelector('.active');
let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;
active_slide.classList.remove('active');
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].classList.add('active');
}
setTimeout(showSlides, 2000);
}
.mySlides {
display: none;
}
.mySlides.active {
display: block;
}
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades active">
<div class="numbertext">1 / 2</div>
<img src="fb1.jpg" alt="Image 1">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 2</div>
<img src="fb2.jpg" alt="Image 2">
</div>
</div>
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 2</div>
<img src="auto1.jpg" alt="Image 3">
</div>
<div class="mySlides fades active">
<div class="numbertext">2 / 2</div>
<img src="auto2.jpg" alt="Image 4">
</div>
</div>
Example with more sliders and slides:
showSlides();
function showSlides() {
const containers = document.querySelectorAll('.slideshow-container');
for (let i = 0; i < containers.length; i++) {
const slides = containers[i].getElementsByClassName("mySlides");
const active_slide = containers[i].querySelector('.active');
let slideIndex = [...active_slide.parentNode.children].indexOf(active_slide) + 1;
active_slide.classList.remove('active');
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].classList.add('active');
}
setTimeout(showSlides, 2000);
}
.mySlides {
display: none;
}
.mySlides.active {
display: block;
}
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades active">
<div class="numbertext">1 / 1</div>
<img src="test1.jpg" alt="Image 0">
</div>
</div>
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades active">
<div class="numbertext">1 / 2</div>
<img src="fb1.jpg" alt="Image 1">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 2</div>
<img src="fb2.jpg" alt="Image 2">
</div>
</div>
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 3</div>
<img src="auto1.jpg" alt="Image 3">
</div>
<div class="mySlides fades active">
<div class="numbertext">2 / 3</div>
<img src="auto2.jpg" alt="Image 4">
</div>
<div class="mySlides fades">
<div class="numbertext">3 / 3</div>
<img src="auto3.jpg" alt="Image 5">
</div>
</div>
<div class="col-lg-6 col-md-10 slideshow-container">
<div class="mySlides fades">
<div class="numbertext">1 / 4</div>
<img src="house1.jpg" alt="Image 6">
</div>
<div class="mySlides fades">
<div class="numbertext">2 / 4</div>
<img src="house2.jpg" alt="Image 7">
</div>
<div class="mySlides fades active">
<div class="numbertext">3 / 4</div>
<img src="house3.jpg" alt="Image 8">
</div>
<div class="mySlides fades">
<div class="numbertext">4 / 4</div>
<img src="house4.jpg" alt="Image 9">
</div>
</div>

i tried the lightbox from W3 school and it works nicely, but if I have more modals on one page the script open all of them together.
Is it possible to set within one script some condition which modal should be opened? Or/and is this the correct way of thinking how to code it?
I omitted from code lower the styling and tons of other content to make it shorter but i didn't do any changes in the original script from W3 except of adding new line of "myModal1" to functions open/closeModal which is the problem i try to solve.
Thank you very much in advance for your answers. :)
<div id="epo20-23">
<div class="row">
<div class="whole-gallery">
<h2 style="text-align:center;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">gallery
</h2>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 2</div>
<img src="image1.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 2</div>
<img src="image2.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column-container">
<div class="column">
<img class="demo cursor" src="image1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="image2.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
</div>
</div>
</div>
</div>
<div id="epo24-38">
<div class="row">
<div class="whole-gallery">
<h2 style="text-align:center;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">gallery
</h2>
</div>
</div>
<div id="myModal1" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 2</div>
<img src="image3.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 2</div>
<img src="image4.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column-container">
<div class="column">
<img class="demo cursor" src="image3.jpg" style="width:100%" onclick="currentSlide(1)"
alt="img3">
</div>
<div class="column">
<img class="demo cursor" src="image4.jpg" style="width:100%" onclick="currentSlide(2)"
alt="img4">
</div>
</div>
</div>
</div>
</div>
<script>
function openModal() {
document.getElementById("myModal").style.display = "block";
document.getElementById("myModal1").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
document.getElementById("myModal1").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
captionText.innerHTML = dots[slideIndex - 1].alt;
}
</script>

Will reply according to your code
You have
function openModal() {
document.getElementById("myModal").style.display = "block";
document.getElementById("myModal1").style.display = "block";
}
this will open both of the modals together
There are numerous ways to implement this function
A very very basic one : You could add an argument and use an if else-if statement inside the script to specify which one to open
Example :
<div id="epo20-23">
<div class="row">
<div class="whole-gallery">
<h2 style="text-align:center;" onclick="openModal("myModal");currentSlide(1)" class="hover-shadow cursor">gallery
</h2>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 2</div>
<img src="image1.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 2</div>
<img src="image2.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column-container">
<div class="column">
<img class="demo cursor" src="image1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="image2.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
</div>
</div>
</div>
</div>
<div id="epo24-38">
<div class="row">
<div class="whole-gallery">
<h2 style="text-align:center;" onclick="openModal("myModal1");currentSlide(1)" class="hover-shadow cursor">gallery
</h2>
</div>
</div>
<div id="myModal1" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 2</div>
<img src="image3.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 2</div>
<img src="image4.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column-container">
<div class="column">
<img class="demo cursor" src="image3.jpg" style="width:100%" onclick="currentSlide(1)"
alt="img3">
</div>
<div class="column">
<img class="demo cursor" src="image4.jpg" style="width:100%" onclick="currentSlide(2)"
alt="img4">
</div>
</div>
</div>
</div>
</div>
<script>
function openModal(id) {
if(id=="myModal")
document.getElementById("myModal").style.display = "block";
else if(id=="myModal1")
document.getElementById("myModal1").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
document.getElementById("myModal1").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
captionText.innerHTML = dots[slideIndex - 1].alt;
}
</script>
as you could see the changes:
in the body section:
onclick="openModal("myModal");currentSlide(1)" //first h2 div
onclick="openModal("myModal1");currentSlide(1)" //second h2 div
script section:
function openModal(modal) {
if(modal=="myModal")
document.getElementById("myModal").style.display = "block";
else if(modal=="myModal1")
document.getElementById("myModal1").style.display = "block";
}

I have used the following code from https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp to create this slideshow gallery.
But I have a problem with having more than one slideshow on one page, and therefore would ask if any of you had an idea to write a script for this?
HTML:
<!-- Full-width images with number text -->
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Thumbnail images -->
<div class="row">
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%" onclick="currentSlide(3)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%" onclick="currentSlide(4)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%" onclick="currentSlide(5)">
</div>
<div class="column">
<img class="demo cursor" src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%" onclick="currentSlide(6)">
</div>
</div>
JS:
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
enter code here

One thing to notice is that the complete slideshow - caption, thumbnails (=demos), prev/next buttons and the actual current slide are all within the element with class container.
We can therefore consider an element with class container to be a whole slide show.
Just copy the whole container element and we have two slide shows in HTML.
Some things need changing. In the JS we pick up each of the container elements and remember their slideIndex in the actual element as a data attribute.
In the plusSlides and currentSlide functions we work out which slide show we are on from the event's target (and its parent(s)).
Also, the caption is defined with an id in the original, we change that to a class so that there can be one for each slide show.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
</style>
<body>
<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="https://www.w3schools.com/howto/img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p class="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
</div>
</div>
</div>
<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="https://www.w3schools.com/howto/img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p class="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="https://www.w3schools.com/howto/img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
</div>
</div>
</div>
<script>
const slideShows = document.querySelectorAll('.container');
let slideShow, slideIndex; //will be set to the current slideShow as appropriate
for (let i=0; i < slideShows.length; i++) {
slideShow = slideShows[i];
slideShow.setAttribute('data-slideIndex', 1); //instead of slideIndex = 1 we remember the index for each slideshow in a data attribute
slideIndex = 1;
showSlides(1);
}
function plusSlides(n) {
slideShow = event.target.parentElement;
slideIndex = Number(slideShow.getAttribute('data-slideIndex'));
showSlides(slideIndex += n);
}
function currentSlide(n) {
slideShow = event.target.parentElement.parentElement.parentElement;
slideIndex = Number(slideShow.getAttribute('data-slideIndex'));
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = slideShow.getElementsByClassName("mySlides");
var dots = slideShow.getElementsByClassName("demo");
var captionText = slideShow.querySelector(".caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
slideShow.setAttribute('data-slideIndex', slideIndex); // remember the slideIndex for this slideShow
}
</script>
</body>
</html>
Note: there are various bits of JS in the w3Schools example that look a bit 'old-fashioned' nowadays, but the code works.

This question already has answers here:
Bootstrap carousel multiple frames at once
(16 answers)
Closed 3 years ago.
in Bootstrap 4, multiple item slider (3 items shows at the same time on desktop screen), I want to show sliders one by one when it comes to mobile size, but it shows three together vertically.
in desktop screen it shows like the following:
but on mobile screen it shows like the following:
The problem is, I want to show the sliders one by one, when it shows on mobile and ipad screen.
you can try the code on w3school click here.
there is code for this problem:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
</div>
</div>
<div class="carousel-item ">
<div class="row">
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
<div class="col-sm-4">
<img src="la.jpg" alt="Los Angeles" class="col-12 responsive" >
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>

$('#carouselExample').on('slide.bs.carousel', function (e) {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 3;
var totalItems = $('.carousel-item').length;
if (idx >= totalItems-(itemsPerSlide-1)) {
var it = itemsPerSlide - (totalItems - idx);
for (var i=0; i<it; i++) {
// append slides to end
if (e.direction=="left") {
$('.carousel-item').eq(i).appendTo('.carousel-inner');
}
else {
$('.carousel-item').eq(0).appendTo('.carousel-inner');
}
}
}
});
$(document).ready(function() {
/* show lightbox when clicking a thumbnail */
$('a.thumb').click(function(event){
event.preventDefault();
var content = $('.modal-body');
content.empty();
var title = $(this).attr("title");
$('.modal-title').html(title);
content.html($(this).html());
$(".modal-profile").modal({show:true});
});
});
#media (min-width: 768px) {
/* show 3 items */
.carouselPrograms .carousel-inner .active,
.carouselPrograms .carousel-inner .active + .carousel-item,
.carouselPrograms .carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
.carouselPrograms .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carouselPrograms .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carouselPrograms .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
.carouselPrograms .carousel-inner .carousel-item-next,
.carouselPrograms .carousel-inner .carousel-item-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.carouselPrograms .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.333%;
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
.carouselPrograms .active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carouselPrograms .carousel-item-next.carousel-item-left + .carousel-item,
.carouselPrograms .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carouselPrograms .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be abso position for animations */
.carouselPrograms .carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
top: 0;
left: 0%;
z-index: -1;
display: block;
visibility: visible;
}
/* right or prev direction */
.carouselPrograms .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carouselPrograms .carousel-item-prev.carousel-item-right + .carousel-item,
.carouselPrograms .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carouselPrograms .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid">
<div id="carouselExample" class="carouselPrograms carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-md-4 active">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 1" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=1" alt="slide 1">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 3" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=2" alt="slide 2">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 4" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=3" alt="slide 3">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 5" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=4" alt="slide 4">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 6" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=5" alt="slide 5">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 7" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=6" alt="slide 6">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 8" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=7" alt="slide 7">
</a>
</div>
</div>
</div>
<div class="carousel-item col-md-4 ">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="#" title="image 2" class="thumb">
<img class="img-fluid mx-auto d-block" src="//via.placeholder.com/600x400?text=8" alt="slide 8">
</a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

Can anyone offer me some advice? I have the following code to detect when items are in the viewport, unfortunately the first .each loop (which isn't triggered by scrolling) returns visible for every item, why is this?
window.onload = function(){
$.fn.visible = function(detectPartial){
detectPartial = (!!detectPartial); // if null or undefined, default to false
var viewport = $(window),
vpWidth = viewport.width(),
vpHeight = viewport.height(),
vpTop = viewport.scrollTop(),
vpBottom = vpTop + vpHeight,
vpLeft = viewport.scrollLeft(),
vpRight = vpLeft + vpWidth,
elementOffset = $(this).offset(),
elementTopArea = elementOffset.top+((detectPartial) ? $(this).height() : 0),
elementBottomArea = elementOffset.top+((detectPartial) ? 0 : $(this).height()),
elementLeftArea = elementOffset.left+((detectPartial) ? $(this).width() : 0),
elementRightArea = elementOffset.left+((detectPartial) ? 0 : $(this).width());
return ((elementBottomArea <= vpBottom) && (elementTopArea >= vpTop)) && ((elementRightArea <= vpRight) && (elementLeftArea >= vpLeft));
}
$('.portfolio-image-box').each(function(i, el){
var el = $(el);
if (el.visible(true)) {
el.addClass("in")
} else{
el.addClass("out")
}
})
$(document).scroll(function() {
$('.portfolio-image-box').each(function(i, el){
var el = $(el);
if (el.visible(true)) {
el.removeClass("out")
el.addClass("in")
} else{
el.removeClass("in")
el.addClass("out")
}
})
})
}

So I modified your code slightly and did a check in the console to see if the classes are getting added and removed, and it worked. Try the below code and check in the firebug, as you scroll, classes gets added and removed for whatever in there in the viewport:
$.fn.visible = function(detectPartial) {
detectPartial = (!!detectPartial); // if null or undefined, default to false
var viewport = $(window),
vpWidth = viewport.width(),
vpHeight = viewport.height(),
vpTop = viewport.scrollTop() + $('#navbar').outerHeight(),
vpBottom = vpTop + vpHeight,
vpLeft = viewport.scrollLeft(),
vpRight = vpLeft + vpWidth,
elementOffset = $(this).offset(),
elementTopArea = elementOffset.top + ((detectPartial) ? $(this).height() : 0),
elementBottomArea = elementOffset.top + ((detectPartial) ? 0 : $(this).height()),
elementLeftArea = elementOffset.left + ((detectPartial) ? $(this).width() : 0),
elementRightArea = elementOffset.left + ((detectPartial) ? 0 : $(this).width());
return ((elementBottomArea <= vpBottom) && (elementTopArea >= vpTop)) && ((elementRightArea <= vpRight) && (elementLeftArea >= vpLeft));
}
$(document).ready(function() {
addInAndOut();
$(window).scroll(function() {
addInAndOut();
});
});
function addInAndOut() {
$('.portfolio-image-box').each(function(i, el) {
var el = $(el);
if (el.visible(true)) {
el.removeClass("out").addClass("in");
} else {
el.removeClass("in").addClass("out");
}
})
}
#navbar {
border-radius: 0px;
background-color: #ffffff;
border-color: #ffffff;
margin-bottom: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
font-size: 1.5vh;
padding: 1.5vh;
}
#navbar .fa {
cursor: pointer;
}
body {
background-color: #fff;
padding-top: 6vh;
text-align: center;
}
.portfolio-image-box {
height: 25%;
width: 14.66vw;
margin: 1%;
background-color: #FFFFFF;
border: 1px solid #e3e3e3;
overflow: hidden;
text-align: center;
display: inline-block;
float: left;
border-radius: 0.5vh;
cursor: pointer;
}
.portfolio-image-box:hover {
transition: 0.5s;
opacity: 0.6;
}
#portfolio {
text-align: center;
background-color: #F7F7F7;
}
#portfolio-container {
margin-bottom: 1%;
}
.portfolio-image {
height: 100%;
}
#body-title {
color: #c84630;
}
.col-md-12 {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<h1 id="body-title" class="col-md-6 col-md-offset-3">Portfolio</h1>
</div>
<div class="col-md-6 col-md-offset-3 portfolio">
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
<div class="portfolio-image-box col-md-12">
<img class="portfolio-image" src="http://via.placeholder.com/350x150">
</div>
</div>