We Keep Coding

How to stop slideshow from changing size of body?

I have a website with a slideshow on the first page and when I open it on a pc it works as it should but when I open it on mobile the slideshow causes the size of the body to change. This is the code I have. I've already tried quite a few things but so far nothing has really worked.
let slideIndex = 0;
showSlides();
setInterval(showSlides, 11900)
function showSlides() {
let i;
let sfeerbeelden = document.getElementsByClassName("sfeerbeeld");
for (i = 0; i < sfeerbeelden.length; i++) {
sfeerbeeld = sfeerbeelden[i];
sfeerbeeld.style.display = "none";
}
slideIndex++;
if (slideIndex > sfeerbeelden.length) {
slideIndex = 1
}
sfeerbeeld = sfeerbeelden[slideIndex - 1];
sfeerbeeld.style.animation = "fadeIn 5s";
sfeerbeeld.style.display = "inherit";
setTimeout(() => {
sfeerbeeld.style.animation = "fadeOut 5s"
}, 7000);
}
body {
background-image: url("Banner.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.sfeerbeeldencontainer {
display: flex;
justify-content: center;
height: 70vh;
width: 100%;
}
.sfeerbeelden {
display: flex;
flex-grow: 1;
height: 100%;
justify-content: center;
width: auto;
}
.sfeerbeeld {
display: none;
justify-content: center;
height: 100%;
}
.sfeerbeeld_img {
max-height: 100%;
}
<div class="index">
<div class="sfeerbeeldencontainer">
<div class="sfeerbeelden">
<div class="sfeerbeeld">
<img src="Sfeerbeeld_1.jpg" class="sfeerbeeld_img">
</div>
<div class="sfeerbeeld">
<img src="Sfeerbeeld_2.jpg" class="sfeerbeeld_img">
</div>
<div class="sfeerbeeld">
<img src="sfeerbeeld_3.jpg" class="sfeerbeeld_img">
</div>
</div>
</div>
</div>

Simplify JS code for photo gallery with loop not working

I have a photo gallery in JavaScript, using Nuxt.js. In this photo gallery, it get the background image for display the little image of the photo gallery in full screen.
Everything is working well, but my code is not really good (it can be improved, because it's repetitive). Here is my actual js, scss and vue code.
window.addEventListener('load', function () {
// Add the photo corresponding to the one in the photo gallery, to the photo gallery full screen
const photo1 = document.querySelector(".photo:nth-child(1)");
const style1 = photo1.currentStyle || window.getComputedStyle(photo1, false);
const photoBackground1 = style1.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];
const photoFullscreen1 = document.querySelector(".photo-fullscreen:nth-child(1)");
photoFullscreen1.setAttribute("src", photoBackground1);
const photo2 = document.querySelector(".photo:nth-child(2)");
const style2 = photo1.currentStyle || window.getComputedStyle(photo2, false);
const photoBackground2 = style2.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];
const photoFullscreen2 = document.querySelector(".photo-fullscreen:nth-child(2)");
photoFullscreen2.setAttribute("src", photoBackground2);
const photo3 = document.querySelector(".photo:nth-child(3)");
const style3 = photo1.currentStyle || window.getComputedStyle(photo3, false);
const photoBackground3 = style3.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];
const photoFullscreen3 = document.querySelector(".photo-fullscreen:nth-child(3)");
photoFullscreen3.setAttribute("src", photoBackground3);
// Open PopUp
const photoGalleryFullscreen = document.querySelector(".photo-gallery-fullscreen");
const imageFullscreen1 = document.querySelector(".slide-container img:nth-child(1)");
const imageFullscreen2 = document.querySelector(".slide-container img:nth-child(2)");
const imageFullscreen3 = document.querySelector(".slide-container img:nth-child(3)");
document.querySelector(".lienImg1").onclick = function() {
photoGalleryFullscreen.style.display = "block";
imageFullscreen1.style.display = "block";
slideIndex = 1;
};
document.querySelector(".lienImg2").onclick = function() {
photoGalleryFullscreen.style.display = "block";
imageFullscreen2.style.display = "block";
slideIndex = 2;
};
document.querySelector(".lienImg3").onclick = function() {
photoGalleryFullscreen.style.display = "block";
imageFullscreen3.style.display = "block";
slideIndex = 3;
};
// Close PopUp
document.querySelector(".out").onclick = function() {
photoGalleryFullscreen.style.display = "none";
imageFullscreen1.style.display = "none";
imageFullscreen2.style.display = "none";
imageFullscreen3.style.display = "none";
slideIndex = 1;
};
});
// Gallery Full Screen
let slideIndex;
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
let i;
let slides = document.querySelectorAll(".photo-fullscreen");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
// Photo Gallery
.photo-gallery-section {
margin: 50px 0;
.photo-gallery {
width: fit-content;
margin: auto;
display: grid;
grid-template-rows: 250px;
grid-template-columns: repeat(3, 250px);
justify-content: space-between;
gap: 3vw;
.photo:hover {
cursor: pointer;
}
.photo:nth-child(1) {
background: url(../static/images/yoga.jpg) center center / cover;
}
.photo:nth-child(2) {
background: url(../static/images/yoga-2.jpeg) center center / cover;
}
.photo:nth-child(3) {
background: url(../static/images/yoga-3.jpeg) center center / cover;
}
}
.photo-gallery-fullscreen {
display: none;
height: 100vh;
width: 100vw;
background: rgba(0, 0, 0, 0.4);
position: fixed;
top: 0;
left: 0;
z-index: 1;
.slide-container {
width: fit-content;
margin: calc(50vh - 225px) auto;
}
.slide-container img {
height: 450px;
z-index: 3;
display: none;
}
.prev,
.next {
cursor: pointer;
color: #333;
font-weight: bold;
font-size: 40px;
z-index: 3;
position: absolute;
}
.prev {
margin: calc(50vh - 21px) 0;
margin-left: 15vw;
left: 0;
}
.next {
margin: calc(50vh - 21px) 0;
margin-right: 15vw;
right: 0;
}
.out {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 2;
}
}
}
// Media Queries
#media screen and (min-width: 686px) and (max-width: 1025px) {
.photo-gallery-section {
.photo-gallery {
grid-template-rows: repeat(2, 250px);
grid-template-columns: repeat(2, 250px);
}
.photo:nth-child(3) {
grid-column: 1 / 3;
}
}
}
#media screen and (max-width: 685px) {
.photo-gallery-section {
.photo-gallery {
grid-template-rows: repeat(3, 250px);
grid-template-columns: repeat(1, 250px);
}
}
}
<section class="photo-gallery-section" id="photo-gallery-section">
<h2 class="photo-gallery-title">Gallerie Photo</h2>
<div class="photo-gallery">
<div class="photo lienImg1"></div>
<div class="photo lienImg2"></div>
<div class="photo lienImg3"></div>
</div>
<div class="photo-gallery-fullscreen">
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
<div class="slide-container">
<img class="photo-fullscreen" />
<img class="photo-fullscreen" />
<img class="photo-fullscreen" />
</div>
<div class="out"></div>
</div>
</section>
Now, I want to simplify my JS code, but it is not working (it return undefined). Here is the new code :
const photo = document.querySelectorAll(".photo");
for (let i = 0; i < photo.length; i++) {
const style = photo[i].currentStyle || window.getComputedStyle(photo[i], false);
const photoBackground = style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0];
const photoFullscreen = document.querySelectorAll(".photo-fullscreen");
photoFullscreen[i].setAttribute("src", photoBackground);
}
Thank you very much for your help,
Maxime

How to make an automatic slideshow with buttons?

I created a automatic slideshow by using html , css and javascript but the next/previous and dot buttons are not working. When I made them work , slideshow becomes unautomatic. I added buttons to its cshtml file so nothing's missing. CSS file works perfectly as well. What is missing in my code ? Any help will be appreciated.
Javascript Code
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
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";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
var responsiveSlider = function () {
var slider = document.getElementById("slider");
var sliderWidth = slider.offsetWidth;
var slideList = document.getElementById("slideWrap");
var count = 1;
var items = slideList.querySelectorAll("li").length;
var prev = document.getElementById("prev");
var next = document.getElementById("next");
window.addEventListener('resize', function () {
sliderWidth = slider.offsetWidth;
});
var prevSlide = function () {
if (count > 1) {
count = count - 2;
slideList.style.left = "-" + count * sliderWidth + "px";
count++;
}
else if (count = 1) {
count = items - 1;
slideList.style.left = "-" + count * sliderWidth + "px";
count++;
}
};
var nextSlide = function () {
if (count < items) {
slideList.style.left = "-" + count * sliderWidth + "px";
count++;
}
else if (count = items) {
slideList.style.left = "0px";
count = 1;
}
};
next.addEventListener("click", function () {
nextSlide();
});
prev.addEventListener("click", function () {
prevSlide();
});
setInterval(function () {
nextSlide()
}, 5000);
};
window.onload = function () {
responsiveSlider();
}
#using SliderBannerProject.Model.Entity
#model List<Table_Slider>
#{
Layout = "~/Views/Shared/TestLayout.cshtml";
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="~/Content/mystyle.css" rel="stylesheet" />
<script defer src="~/Content/Script.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
#foreach (var item in Model)
{
<div class="mySlides w3-animate-fading">
<div class="numbertext">#item.ID</div>
<img src="#item.SliderPhoto" style="width:100%" />
<br />
<br />
<div class="text" id="text1" >#item.SliderInfo1</div>
<br />
<br />
<div class="text" id="update">
<p style="margin-bottom:-50px" >
<a href="/Test/UpdateInfo/#item.ID" id="update1">
Update Slider
</a>
</p>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
}
</div>
<br>
</body>
<!-- The dots/circles -->
<br />
<div style="text-align:center">
#foreach (var item in Model)
{
<span class="dot" onclick="currentSlide(#item.ID)"></span>
}
</div>
<br />
<div style="text-align:center">
Add New Slider Photo
</div>
</html>
* {
box-sizing: border-box
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
animation: slide 10s infinite;
}
.mySlides {
display: none;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 80vh;
transition: all .2s ease-in-out;
animation: slide 10s infinite;
}
#text1 {
font-size: 100px;
font-display:swap;
font-style:oblique;
color:gray;
}
#update {
background-color: transparent;
border: none;
color: black;
padding: 16px 32px;
text-align: center;
font-size: 25px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
#update1 {
color: black;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
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);
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 5s ease;
}
.active, .dot:hover {
background-color: #717171;
}
.fade {
animation-name: fade;
animation-duration: 4s;
animation: slide 10s infinite;
}
#keyframes fade {
from {
opacity: 10
}
to {
opacity: 10
}
}

let slideIndex = 1;
let i;
let slides = document.getElementsByClassName("slides");
let dots = document.getElementsByClassName("dot");
auto();
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
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";
}
function auto() {
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
showSlides(slideIndex);
setTimeout(auto, 10000);
}
Try this i found that on youtube, here is the link.

My function for displayin the images in a carousel has an extra blank image

//get the object
let slideshowContainer = document.getElementById('slideshow-container');
//get the buttons
let next = document.querySelector('.next');
let prev = document.querySelector('.prev');
//create an index
var slideIndex = 0;
function showSlides(n) {
const slides = document.getElementsByClassName('product');
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = 'none';
}
if (n < 0) {
slideIndex = slides.length
}
if (n > slides.length) {
slideIndex = 0
}
slides[slideIndex].style.display = 'block';
slideIndex = n;
}
function incrementSlides(n) {
showSlides(slideIndex += n)
}
//add event listeners
next.addEventListener('click', function () {
incrementSlides(1);
})
prev.addEventListener('click', function () {
incrementSlides(-1);
})
showSlides(slideIndex);
#section-one .categories {
height: 80px;
background: rgba(0, 0, 0, 0.9);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#section-one .categories li {
background: -webkit-gradient(linear, left top, right top, from(#0d0d0d), to(#202020));
background: linear-gradient(to right, #0d0d0d, #202020);
height: inherit;
width: 12.5%;
border-left: 1px solid black;
-webkit-transition: all ease-in 0.3s;
transition: all ease-in 0.3s;
}
#section-one .categories li:hover {
background: green;
}
#section-one .categories li a {
display: inline-block;
font-size: 0.95rem;
height: inherit;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#section-one .slideshow-container {
height: 1000px;
margin: auto;
position: relative;
background: grey;
}
#section-one .slideshow-container .prev,
#section-one .slideshow-container .next {
top: 50%;
background: blue;
font-size: 18px;
border-radius: 0 3px 3px 0;
width: auto;
position: absolute;
padding: 16px;
}
#section-one .slideshow-container .next {
right: 0;
border-radius: 3px 0 0 3px;
}
#section-one .slideshow-container .prev:hover,
#section-one .slideshow-container .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
<!-- Section-one -->
<section id="section-one">
<ul class="categories">
<li>HEADPHONES</li>
<li>EARPHONES</li>
<li>BLUETOOTH</li>
<li>WATERPROOF</li>
<li>SPORTS</li>
<li>METALLIC</li>
<li>WOODEN/BAMBOO</li>
<li>EARMUFF</li>
</ul>
<div id="slideshow-container">
<div class="product">
<p class="description"></p>
<div class="img">
<img
src="https://i.pinimg.com/originals/5a/e5/8f/5ae58f5036997cfd4636917403c3c951.jpg"
alt="image1"
style="width:100%"
/>
</div>
WIEW MORE
</div>
<div class="product">
<p class="description"></p>
<div class="img">
<img
src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
alt="image2"
style="width:100%"
/>
</div>
WIEW MORE
</div>
<div class="product">
<p class="description"></p>
<div class="img">
<img
src="https://cdn.pixabay.com/photo/2017/02/22/20/02/landscape-2090495_960_720.jpg"
alt="image3"
style="width:100%"
/>
</div>
WIEW MORE
</div>
</div>
</section>
I'm trying to build a page with an image slider.
I watched some youtube videos, I combined the code and tried to make something to work but I came across an error. When I change for next or prev image I get a blank page and I don't know why.
I will create a code snippet to show you. I do not want just the problem to be solved but also the explanation, please!
Cheers!!!

You need to change your 2 " if " statements , since they dont consider the 0-based index on the array :
if (n < 0) {
slideIndex = slides.length - 1
}
if (n > slides.length - 1) {
slideIndex = 0
}

Here's the working jsFiddle with a few fix on your code:
https://jsfiddle.net/0mrpbv6c/
Basically,
I added some text to your a links to be able to click on them
PREV
NEXT
I fixed your 2 if conditions inshowSlides to continue the carousel as expected. Here you forgot the - 1, as your slides start from 0
if (n < 0) {
slideIndex = slides.length - 1;
}
if (n > slides.length - 1) {
slideIndex = 0;
}
I removed the following instruction, as you don't want to update slideIndex from n because it's already being updated when calling showSlides in incrementSlides, and also it overwrites the value you possibly got from the 2 if.
slideIndex = n;

I have tried fix your code.
function showSlides(n) {
console.log(n)
const slides = document.getElementsByClassName('product');
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = 'none';
}
slideIndex = n; // edited
if (n < 0) {
slideIndex = slides.length
}
if (n >= slides.length) { // edited
slideIndex = 0
}
slides[slideIndex].style.display = 'block';
}

JS and JQuery script conflicts

I am experiencing issues when implementing two sets of code for two functions on a webpage I am designing. I am rather new to JS and JQuery, but none of the similar threads lead to a solution.
On my webpage I have a series of 100vh slideshows (code below) as well as one fullpage "welcome"screen above them. To transition between them, I am using a package that offers block scrolling.
Here is my code:
// Slideshow code, help from w3schools
var slideIndex = 1;
showDivs(slideIndex, show);
function plusDivs(n, show) {
showDivs(slideIndex += n, show);
}
function showDivs(n, show) {
var i;
var x = document.getElementsByClassName("mySlides"+show);
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "inline";
}
// blockScroller code from the docs on the linked package.
$(function() {
var blockScroller = $("#main-wrap").blockScroll();
});
I can, depending on which block of code is physically higher up in the script, get one of them to work at a time. However, when the block scrolling works, the slideshow breaks and none of that javascript has any effect on the page. This should tell you that for the sake of each individual scripts, all HTML and CSS requirements are met.
Any help to resolve this conflict would be great, and since this is my first question on stackoverflow if I butchered anything about location or related just tell me. If there is any more information I can provide I will gladly do so.
Here is a sampler of what I am talking about:
<!DOCTYPE html>
<html>
<head>
<!--style>
.slideshow{
z-index: 500;
position: relative;
height: 100vh;
width: 100%;
margin:auto;
overflow: hidden;
}
.slideshow > p{
position: absolute;
color: white;
background-color: black;
padding: 5px;
font-size: 24px;
margin: 0;
}
.mySlides1,.mySlides2{
width: 100%;
height: 100vh;
overflow: hidden;
object-fit: cover;
object-position: center center;
}
.slides_button{
position: absolute;
display: inline-block;
border: none;
padding:8px 16px;
cursor: pointer;
background-color: white;
}
.slides_button:hover{
background-color: black;
color: white;
}
.display_left{
position: absolute;
bottom: 50%;
left: 0%;
}
.display_right{
position: absolute;
bottom: 50%;
right: 0;
}
</style-->
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="SCRIPT HERE"></script> <script>
$(function () {
var blockScroller = $("#main-wrap").blockScroll();
$(function () {
function showDivs(n, show) {
var i;
var x = document.getElementsByClassName("mySlides"+show);
if (n > x.length) {slideIndex = 1};
if (n < 1) {slideIndex = x.length};
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
};
x[slideIndex-1].style.display = "block";
console.log(x[slideIndex-1])
};
var slideIndex = 1;
showDivs(2, 1);
showDivs(2, 2);
$(function () {
function plusDivs(n, show) {
showDivs(slideIndex += n, show);
};
})
});
});
</script>
<div id="main-wrap">
<div style="height:100vh;background-image:url(https://www.planwallpaper.com/static/images/518164-backgrounds.jpg)">
</div>
<div class="slideshow">
<p>slideshow 1</p>
<img class="mySlides1" src="https://cdn.pixabay.com/photo/2015/10/31/00/43/background-texture-1014963_960_720.jpg">
<button class="slides_button display_left" onclick="plusDivs(-1,1)">❮</button>
<button class="slides_button display_right" onclick="plusDivs(1,1)">❯</button>
<img class="mySlides1" src="https://image.freepik.com/free-vector/orange-geometric-background-with-halftone-dots_1035-7243.jpg">
<img class="mySlides1" src="https://cdn.pixabay.com/photo/2015/10/31/00/43/background-texture-1014963_960_720.jpg">
<img class="mySlides1" src="https://image.freepik.com/free-vector/orange-geometric-background-with-halftone-dots_1035-7243.jpg">
</div>
<div class="slideshow">
<p>slideshow 2</p>
<img class="mySlides2" src="https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg">
<button class="slides_button display_left" onclick="plusDivs(-1,2)">❮</button>
<button class="slides_button display_right" onclick="plusDivs(1,2)">❯</button>
<img class="mySlides2" src="http://images.all-free-download.com/images/graphiclarge/flower_pink_background_vector_art_148632.jpg">
<img class="mySlides2" src="http://images.all-free-download.com/images/graphiclarge/clouds_in_sky_background_192377.jpg">
</div>
</div>
</body>
</html>
blockerScoll js script

not work because show in showDivs(slideIndex, show); is undefined, it should be like this
showDivs(slideIndex, 1);
showDivs(slideIndex, 2);
demo
//This is only for the block scrolling. If you move this
//ABOVE the previous section, then it will take over.
$(function() {
var blockScroller = $("#main-wrap").blockScroll();
});
//This is the slideshow section. Move this above the block scroll
//and this works.
function showDivs(n, show) {
var i;
var x = document.getElementsByClassName("mySlides" + show);
if(n > x.length) {
slideIndex = 1
}
if(n < 1) {
slideIndex = x.length
}
for(i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "inline";
//console.log(x[slideIndex - 1])
}
var slideIndex = 1;
showDivs(slideIndex, 1);
showDivs(slideIndex, 2);
function plusDivs(n, show) {
showDivs(slideIndex += n, show);
}
.slideshow {
z-index: 500;
position: relative;
height: 100vh;
width: 100%;
margin: auto;
overflow: hidden;
}
.slideshow>p {
position: absolute;
color: white;
background-color: black;
padding: 5px;
font-size: 24px;
margin: 0;
}
.mySlides1,
.mySlides2 {
width: 100%;
height: 100vh;
overflow: hidden;
object-fit: cover;
object-position: center center;
}
.slides_button {
position: absolute;
display: inline-block;
border: none;
padding: 8px 16px;
cursor: pointer;
background-color: white;
}
.slides_button:hover {
background-color: black;
color: white;
}
.display_left {
position: absolute;
bottom: 50%;
left: 0%;
}
.display_right {
position: absolute;
bottom: 50%;
right: 0;
}
<link rel="stylesheet" type="text/css" href="//www.dominikgorecki.com/p/block-scroll/blockScroll.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//www.dominikgorecki.com/p/block-scroll/js/blockScroll.js"></script>
<div id="main-wrap">
<div style="height:100vh;background-image:url(https://www.planwallpaper.com/static/images/518164-backgrounds.jpg)">
</div>
<div class="slideshow">
<p>slideshow 1</p>
<img class="mySlides1" src="https://cdn.pixabay.com/photo/2015/10/31/00/43/background-texture-1014963_960_720.jpg">
<button class="slides_button display_left" onclick="plusDivs(-1,1)">❮</button>
<button class="slides_button display_right" onclick="plusDivs(1,1)">❯</button>
<img class="mySlides1" src="https://image.freepik.com/free-vector/orange-geometric-background-with-halftone-dots_1035-7243.jpg">
<img class="mySlides1" src="https://cdn.pixabay.com/photo/2015/10/31/00/43/background-texture-1014963_960_720.jpg">
<img class="mySlides1" src="https://image.freepik.com/free-vector/orange-geometric-background-with-halftone-dots_1035-7243.jpg">
</div>
<div class="slideshow">
<p>slideshow 2</p>
<img class="mySlides2" src="https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg">
<button class="slides_button display_left" onclick="plusDivs(-1,2)">❮</button>
<button class="slides_button display_right" onclick="plusDivs(1,2)">❯</button>
<img class="mySlides2" src="http://images.all-free-download.com/images/graphiclarge/flower_pink_background_vector_art_148632.jpg">
<img class="mySlides2" src="http://images.all-free-download.com/images/graphiclarge/clouds_in_sky_background_192377.jpg">
</div>
</div>