I want more than one image slider on same page with same class name using JavaScript. I have done for one image slider.
The issues are when I'm using more than one image slider it is not working properly.I tried with childNodes also it doesn't work. How can I solve this problem?
And I'm trying to make sliding animation also(left and right) for that image slider.
If you need some more explanation, let me know.
I have given the code below;
HTML
<div class="container slider">
<div class="slides">
<img src="images-/b3.jpg">
</div>
<div class="slides">
<img src="images-/b2.jpg">
</div>
<div class="slides">
<img src="images-/b1.jpg">
</div>
<a class="prev" onclick="controlSlide(-1)">❮</a>
<a class="next" onclick="controlSlide(1)">❯</a>
</div>
<div class="container slider">
<div class="slides">
<img src="images-/b3.jpg">
</div>
<div class="slides">
<img src="images-/b2.jpg">
</div>
<div class="slides">
<img src="images-/b1.jpg">
</div>
<a class="prev" onclick="controlSlide(-1)">❮</a>
<a class="next" onclick="controlSlide(1)">❯</a>
</div>
CSS
.slides{
position: relative;
display:none;
}
img{
width: 100%;
vertical-align:middle;
}
.container
{
max-width: 100%;
position: relative;
margin: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
color: black;
font-size: 20px;
}
.prev{
left: 2%;
}
.next{
right: 2%;
}
.prev:hover, .next:hover {
background-color: #f1f1f1;
text-decoration: none;
color: black;
}
JAVASCRIPT
var slides = document.getElementsByClassName("slides");
var position=[1,-1];
var slideIndex=0;
showSlides();
function showSlides() {
controlSlide(position[0]);
setTimeout(showSlides,3000);
}
function controlSlide(position) {
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex +=position;
if (slideIndex>slides.length) {
slideIndex = 1;
}
else if(slideIndex<=0){
slideIndex=slides.length;
}
slides[slideIndex-1].style.display= "block";
}
The problem is that you select all the slides at once, with document.getElementsByClassName("slides").
You want to alter you JS methods to work with the sorrounding element
<div class="container slider">
and then select and pass theese to controlSlide form showSlides.
Not tested:
var sliders = document.getElementsByClassName("slider");
var position=[1,-1];
var slideIndex=0;
sliders.forEach(function(slider){
showSlides(slider);
})
function showSlides(slider) {
let slides = slider.childNodes;
controlSlide(slides, position[0]);
setTimeout(showSlides,3000);
}
function controlSlide(slides, position) {
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex +=position;
if (slideIndex>slides.length) {
slideIndex = 1;
}
else if(slideIndex<=0){
slideIndex=slides.length;
}
slides[slideIndex-1].style.display= "block";
}
Related
I have created two changing image galleries side by side but my right image changes slides but the left one is stuck on the first slide. does anyone know why? I have found the code on W3.CSS but I changed the class "changing-photo-right" and "changing-photo-left" to one of my own class (which can be found in my css stylesheet) and did not link the style sheet of W3.css.
.section2 {
background: #F5DAD3;
display: flex;
height: 750px;
position: relative;
}
.changing-photo-left {
float: left;
margin-left: 125px;
margin-top: -390px;
position: relative;
display: block;
}
.changing-photo-right {
float: right;
margin-right: 125px;
margin-top: -390px;
position: relative;
display: block;
}
.section3 {
height: 440px;
width: 2px;
top: 160px;
left: 50%;
position: absolute;
border: 0px solid black;
background-color: black;
border-radius: 20px;
}
<div class="hmm">
<div class="section2"></div>
<div class="section3" ></div>
<div>
<p class="text-12">The interieur</p>
<p class="text-11">Discover the lovely interieur that was built since 1948.</p>
<a class="button-intro-below-left" href="">Click here for more</a>
<div class="changing-photo-left" style="max-width:500px">
<img class="mySlides" src="009.jpg" style="width:100%">
<img class="mySlides" src="062.jpg" style="width:100%">
<img class="mySlides" src="027.jpg" style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2500); // Change image every 3 seconds
}
</script>
</div>
<div>
<p class="text-13">The exterior</p>
<p class="text-14">Discover the lovely exterior that was built since 1948.</p>
<a class="button-intro-below-right" href="">Click here for more</a>
<div class="changing-photo-right" style="max-width:500px">
<img class="mySlides1" src="009.jpg" style="width:100%">
<img class="mySlides1" src="012.jpg" style="width:100%">
<img class="mySlides1" src="013.jpg" style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides1");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2500); // Change image every 3 seconds
}
</script>
</div>
You're using the same names for the variables and functions in both of the loops. If you change the names of the variables and functions in the second loop, everything should work just fine.
.section2 {
background: #F5DAD3;
display: flex;
height: 750px;
position: relative;
}
.changing-photo-left {
float: left;
margin-left: 125px;
margin-top: -390px;
position: relative;
display: block;
}
.changing-photo-right {
float: right;
margin-right: 125px;
margin-top: -390px;
position: relative;
display: block;
}
.section3 {
height: 440px;
width: 2px;
top: 160px;
left: 50%;
position: absolute;
border: 0px solid black;
background-color: black;
border-radius: 20px;
}
<div class="hmm">
<div class="section2"></div>
<div class="section3" ></div>
<div>
<p class="text-12">The interieur</p>
<p class="text-11">Discover the lovely interieur that was built since 1948.</p>
<a class="button-intro-below-left" href="">Click here for more</a>
<div class="changing-photo-left" style="max-width:500px">
<img class="mySlides" src="https://images.unsplash.com/photo-1672426142068-c2103a852426?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&w=1000&q=80" style="width:100%">
<img class="mySlides" src="https://media.istockphoto.com/id/1409254639/photo/autumn-drive.jpg?b=1&s=170667a&w=0&k=20&c=phQOICvfLifPWESZu3AioY7sKM9s_HQnCozMKF6g120=" style="width:100%">
<img class="mySlides" src="https://media.istockphoto.com/id/1427249962/photo/tropical-leaves-abstract-green-leaf-texture-in-garden-nature-background.jpg?b=1&s=170667a&w=0&k=20&c=40KcV7mbAQWihuO0At8GSOTIKp-TvIoHGIhurHBeUq0=" style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2500); // Change image every 3 seconds
}
</script>
</div>
<div>
<p class="text-13">The exterior</p>
<p class="text-14">Discover the lovely exterior that was built since 1948.</p>
<a class="button-intro-below-right" href="">Click here for more</a>
<div class="changing-photo-right" style="max-width:500px">
<img class="mySlides1" src="https://images.unsplash.com/photo-1672426142068-c2103a852426?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&w=1000&q=80" style="width:100%">
<img class="mySlides1" src="https://media.istockphoto.com/id/1409254639/photo/autumn-drive.jpg?b=1&s=170667a&w=0&k=20&c=phQOICvfLifPWESZu3AioY7sKM9s_HQnCozMKF6g120=" style="width:100%">
<img class="mySlides1" src="https://media.istockphoto.com/id/1427249962/photo/tropical-leaves-abstract-green-leaf-texture-in-garden-nature-background.jpg?b=1&s=170667a&w=0&k=20&c=40KcV7mbAQWihuO0At8GSOTIKp-TvIoHGIhurHBeUq0=" style="width:100%">
</div>
<script>
var myIndex1 = 0;
carousel1();
function carousel1() {
var j;
var y = document.getElementsByClassName("mySlides1");
for (j = 0; j < y.length; j++) {
y[j].style.display = "none";
}
myIndex1++;
if (myIndex1 > y.length) {myIndex1 = 1}
y[myIndex1-1].style.display = "block";
setTimeout(carousel1, 2500); // Change image every 3 seconds
}
</script>
</div>
I am trying to make multiple slideshows on my website, making use of some old w3schools code. The issue with their code is that it only allows a single slideshow per page which is not quite what i'm going for. To make it clear, I want to be able to have an infinite amount of slideshows per page but I don't want to copy and paste my code multiple times if possible
CSS:
* {
box-sizing: border-box;
}
/* Position the image container (needed to position the left and right arrows) */
.container2 {
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;
}
JS:
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
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;
}
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;
}
HTML:
<h3>Minigame Mania:</h3>
<div class = "container2" >
<div class ="mySlides">
<div class ="numberText">1/3</div>
<img src="assets/img/SameLevelPrototypeGameplay1.png" style="width: 100%">
</div>
<div class ="mySlides">
<div class ="numberText">2/3</div>
<img src="assets/img/SameLevelPrototypeGameplay2.png" style="width: 100%">
</div>
<div class ="mySlides">
<div class ="numberText">3/3</div>
<img src="assets/img/SameLevelPrototypeGameplay3.png" 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="row">
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay1.png" style="width:100%" onclick="currentSlide(1)" alt="Gameplay">
</div>
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay2.png" style="width:100%" onclick="currentSlide(2)" alt="Gameplay">
</div>
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay3.png" style="width:100%" onclick="currentSlide(3)" alt="Gameplay">
</div>
</div>
</div>
<!-- Same Level Prototype info, description etc -->
<h3>Same Level Prototype:</h3>
<div class = "container2">
<div class ="mySlides">
<div class ="numberText">1/3</div>
<img src="assets/img/SameLevelPrototypeGameplay1.png" style="width: 100%">
</div>
<div class ="mySlides">
<div class ="numberText">2/3</div>
<img src="assets/img/SameLevelPrototypeGameplay2.png" style="width: 100%">
</div>
<div class ="mySlides">
<div class ="numberText">3/3</div>
<img src="assets/img/SameLevelPrototypeGameplay3.png" 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="row">
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay1.png" style="width:100%" onclick="currentSlide(1)" alt="Gameplay">
</div>
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay2.png" style="width:100%" onclick="currentSlide(2)" alt="Gameplay">
</div>
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay3.png" style="width:100%" onclick="currentSlide(3)" alt="Gameplay">
</div>
</div>
I have tried a few methods such as adding gallery ID's but they weren't successful. I'm rather new to html, css and js so that's why i'm stumped on a problem that probably seems simple to some of you. Any help is greatly appreciated, thanks in advance!
This question already has answers here:
Making a slideshow with arrays Javascript
(3 answers)
Closed 3 years ago.
I'm trying to finish my first website, I have short deadline, I know html css and a bit of JQuery, but right JS is still difficult for me
I would like to have a slideshow in my website, that's why I went to the w3school and tried to replicate the example in my visual studio code.
$(document).ready(() => {
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("myslides");
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";
}
});
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
.myslides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.fade {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container">
<div class="myslides fade">
<img src="./IMAGENS/CASA A (1).jpg" width="100%">
</div>
<div class="myslides fade">
<img src="./IMAGENS/CASA B (3).jpg" width="100%">
</div>
<div class="myslides fade">
<img src="./IMAGENS/MUDA_L11_02_FINAL.jpg" width="100%">
</div>
<div class="myslides fade">
<img src="./IMAGENS/MUDA_L11_05_FINAL.jpg" width="100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
When I try to refresh the page everything looks fine but when I click in the button to change slides nothing happens. What you think should I do?
I tried to make a slideshow with arrays and it didn´t work. So I think it´s a problem with my VSCODE not assuming these two elements.
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
In my program when I do onclick="plusSlides(-1)" the first quote appears in yellow but the second one in white it seems that onclick is not asssigned
Just as #edinhajdarevic said, using an array is a better approach due to many advantages, some of those are the following:
Rendering your slides in the DOM using an array makes your structure dynamic. Dynamic means, everytime you want to add a new slide, you could append a new slide object to your array of slides, instead of writting an HTML and a JavaScript every slide by hand.
Once you have all of your slide code defined, you will be able to mantain your code with ease, instead of reading multiple lines, you just have to care about your JavaScript code.
Less error prone, every time you copy/paste HTML or JavaScript to build another slide, you will have to change values based on the new slide, sometimes this turns into a messy work causing bugs in a future.
A nice tutorial can be found in the following W3Schools link:
Slideshow Tutorial
Your functions are declared on scope of $(document).ready's callback, so onclick cannot reach them.
Solution 1: Move your declarations outside $(document).ready's callback.
var slideIndex = 1;
$(document).ready(() => {
showSlides(slideIndex);
});
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("myslides");
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";
}
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
.myslides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.fade {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container">
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+1" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+2" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+3" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+4" width="100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
Solution 2: Remove onclick attributes and add click listeners in $(document).ready's callback
$(document).ready(() => {
var slideIndex = 1;
showSlides(slideIndex);
$(".prev").click(function() {
plusSlides(-1);
});
$(".next").click(function() {
plusSlides(1);
});
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("myslides");
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";
}
});
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
.myslides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.fade {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container">
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+1" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+2" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+3" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+4" width="100%">
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
I have a few problems with the sliding gallery I added:
the buttons stuck below the gallery instead of its sides. (I tried to give them 'display: inline-block' (?)).
I want to divide the #gallrey div into 2. Which contain the #slideGallery & #galleryDescription. The div #galleryDescription contains <p> that is stuck at the bottom instead of top or center.
This is the format I want #gallery to have:
[button left][#slideGallery DIV][button right][#galleryDescription DIV]
Hope you understand me. :)
Here is my code:
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
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";
}
.mySlides {
height: 300px;
width: 300px;
}
#gallery {
width: 620px;
border: 1px solid black;
margin: 0 auto;
}
#gallerySlide {
display: inline-block;
width: 49%;
top: 0;
left: 0;
}
#galleryDescription {
display: inline-block;
width: 49%;
top: 0;
right: 0;
}
#glryDesc {
/* (glryDesc = gallery description) */
padding-left: 5px;
width: 90%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="gallery">
<div id="gallerySlide">
<img class="mySlides" src="images/slide1.png" />
<img class="mySlides" src="images/slide2.png" />
<img class="mySlides" src="images/slide3.jpg" />
<img class="mySlides" src="images/slide4.jpg" />
<button class="btn" onclick="plusDivs(-1)">❮</button>
<button class="btn" onclick="plusDivs(1)">❯</button>
</div>
<div id="galleryDescription">
<p id="glryDesc">This is gonna be the description of the slide gallery. The gallery is very nice. Also the description !</p>
</div>
</div>
Is this what you wanted?
You had way too many widths that were contradicting with each other. I had to compromise a little on the different sizes. Try adjusting them yourself.
left, top and right are properties do not work on elements that do not have a specific position set (relative, absolute or fixed). Default position is static.
I used flex containers and justify-content, align-items to align the items accordingly. Read up on them.
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
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";
}
.mySlides {
height: 280px;
width: 280px;
display: none;
}
#gallery{
display: flex;
justify-content: center;
align-items: center;
width: 660px;
border: 1px solid black;
margin:0 auto;
}
#gallerySlide {
display: flex;
width: 49%;
}
#glryDesc { /* (glryDesc = gallery description) */
padding-left: 5px;
}
<div id="gallery">
<div id="gallerySlide">
<button class="btn" onclick="plusDivs(-1)">❮</button>
<img class="mySlides" src="images/slide1.png" />
<img class="mySlides" src="images/slide2.png" />
<img class="mySlides" src="images/slide3.jpg" />
<img class="mySlides" src="images/slide4.jpg" />
<button class="btn" onclick="plusDivs(1)">❯</button>
</div>
<div id="galleryDescription">
<p id="glryDesc">This is gonna be the description of the slide gallery. The gallery is very nice. Also the description !</p>
</div>
</div>
I'm trying to create an image slider with controls "Next" and "Previous". Next should slide the image left using a negative margin-left property so as to reveal the second image. All the list elements holding individual images are set to display: inline-block so each list element can stand next to each other instead of stacking.
However, I found out that when the first image slides left it still reveals a little out of it while showing the second image, on and on and on like that, everything slides but never fully. the distance they slide is equal to the width of the image.
Also, when I get to the last image and click on next it should go back to the first image, the problem is that it displays each image along the way to the first image.
window.onload = function () {
var nextBtn = document.getElementsByClassName("nextBtn")[0],
prevBtn = document.getElementsByClassName("prevBtn")[0];
var i = 0;
var imgList = document.querySelectorAll(".slide");
var slideLength = imgList.length;
var lastchild = imgList[slideLength - 1];
nextBtn.addEventListener("click", Next, false);
prevBtn.addEventListener("click", Previous, false);
function Next() {
console.log(slideLength)
imgList[i].style.marginLeft = "-600px";
if (imgList[i].classList.contains("active")) {
imgList[i].classList.remove("active");
}
if (imgList[i] !== lastchild) {
i++;
}
else if (imgList[i] === lastchild) {
i = 0;
for (var j = 0; j < slideLength; j++) {
imgList[j].style.marginLeft = "0";
}
}
imgList[i].classList.add("active");
}
function Previous(e) {
console.log(i);
if (i !== 0) {
imgList[i - 1].style.marginLeft = "0";
i--;
console.log(i);
}
else {
console.log(i);
}
}
}
ul{
width: 100%;
height: 350px;
border: solid 3px white;
margin:100px auto;
overflow: hidden;
}
li{
display:inline-block;
position: relative;
transition: all 1s cubic-bezier(1,-0.01, 0, 1.13);
list-style: none;
}
li img{
width:600px;
height:350px
}
.slide h2{
position: absolute;
bottom:80px;
text-align: center;
margin: 0 auto;
left: 250px;
color: #fff;
font-size: 4em;
font-weight: 900;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<ul class="slide-wrapper">
<li class="slide active">
<img src="http://placehold.it/350x150" alt="">
<h2>1</h2>
</li>
<li class="slide">
<img src="http://placehold.it/350x150" alt="">
<h2>2</h2>
</li>
<li class="slide">
<img src="http://placehold.it/350x150" alt="">
<h2>3</h2>
</li>
<li class="slide">
<img src="http://placehold.it/350x150" alt="">
<h2>4</h2>
</li>
<li class="slide">
<img src="http://placehold.it/350x150" alt="">
<h2>5</h2>
</li>
</ul>
</div>
<!--<div class="test">
</div>-->
<button class="nextBtn">Next</button>
<button class="prevBtn">Previous</button>
How can I make this work well strictly with vanilla javascript? Here is the link to the jsfiddle . However, it doesn't seem to work at all there.
Reference : https://jsfiddle.net/a2bk4bwu/3/
Replace your CSS with lines with the for ul & li
ul{
width: 100%;
height: 350px;
border: solid 3px white;
margin:100px auto;
overflow: hidden;
padding-left: 0;
font-size: 0px;
}
li{
font-size : 20px;
display:inline-block;
position: relative;
transition: all 1s cubic-bezier(1,-0.01, 0, 1.13);
list-style: none;
}
Things to note :
'Ul' was taking extra padding by default {webkit-padding-start: 40px}
"display : inline-block" items are dependent on "white-space". So give "0px" to the parent element to remove that white space between slides.
These will fix your CSS issues.