I am trying to make a slideShow kind of thing but I have problems with margin and/or position absolute when I try to reposition buttons When I write:
<style="position: absolute; left: somepx; etc:"></style>
or
<div style="position: absolute; left: somepx; etc:"></div>
my code that is in div breaks For example My button has this code :
<button class="slide" onclick="plusDivs(-1)"
style="margin: 265px;">❮</button>
I have jsCode here :
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";
}
I ALSO have some text They are in class: mySlides
When I run the code The button is repositioned but it doesnt work
Same thing with margin
Help please
It's kinda hard to tell from the code you posted, where the mistake is because it's not included. Please check these things:
The script must be loaded before the html if you want to use onclick
Your Slide-Elements don't have the class mySlides (maybe you gave it accidentaly to the container)
Alternatively you can use an Event on the button instead, because the script you posted works fine:
document.getElementById('btn').addEventListener('click', function() {
plusDivs(-1);
});
Here is a complete Snipptet
var slideIndex = 1;
showDivs(slideIndex);
document.getElementById('btn').addEventListener('click', function() {
plusDivs(-1);
});
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";
}
<div style="position: absolute; left: 50px;"></div>
<div class="mySlides">1</div>
<div class="mySlides">2</div>
<div class="mySlides">3</div>
<button id="btn" class="slide" style="margin: 8px;">❮</button>
Related
I don't know javascript and could use some help. I have a lightbox that pops up but I can't change the slide index # - it works if it's not hidden. is there a way to fix it? I have 10 images numbered 1-10 for the light box and looking for the first one to pop up to be #10 instead of #1
EXAMPLE:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_lightbox - trying to change the "currentSlider" to show in descending order when popped up
<script>
// Open the Modal
function openModal() {
$('#myModal').toggleClass('mod-act');
$("#popOverlay").fadeIn();
}
// Close the Modal
function closeModal() {
$('#myModal').removeClass('mod-act');
$("#popOverlay").fadeOut();
}
var slideIndex = 3;// MY ISSUE STARTS HERE
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");
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";
}
</script>
If you can't work with the hidden element, so you can set opacity = 0 instead of display none and set position absolute to make them place in the same line.
I hope to get some help here. I think the solution can be very easy but I can't find the problem.
I created an image slider with changing buttons on click. I have the code from the internet and it works fine. The problem is that the carousel doesn't start automatically on the website starter page. The slideshow loop only starts if I click on the first picture.
This is how my .js code looks like. Regards :)
/*SLIDESHOW*/
var slideIndex = 0;
showSlide(slideIndex);
function plusSlides(n){
showSlide(slideIndex += n);
}
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n){
var i;
var slides = document.getElementsByClassName("myslides fade");
var dots = document.getElementsByClassName("dots");
if (n > slides.length) { slideIndex = 3};
if (n < 3) { slideIndex = slides.length};
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(showSlide, 3000);
}
Add your code inside a document.ready function and try,
$( document ).ready(function() {
//Your Code
});
I have a local website with .html file and I want my slideshow to automatically display pictures from a folder and display them without the need to add it manually one by one.
Right now I have to add for every new image I want.
Here is my code:
<img class="mySlides myImg" src="Images/Image_01.jpeg" alt="01" width="620" height="340">
<img class="mySlides myImg" src="Images/Image_02.jpeg" alt="02" width="620" height="340">
<!-- Slider Image Script -->
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
}
</script>
Hi I would like to display one javascript slider but if the size is less that 825px the fonction to be disable I created one code but they don't work. I search here but i dont found any answer about that.
here my code
$(window).ready(function() {
var wi = $(window).width();
$(window).resize(function() {
var wi = $(window).width();
if (wi < 825){
} else {
// Slide function
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";
}
}
});
});
thank you for any help the slide function work perfect but i dont arrive to detect the windows size.
Define a function to do the slide, add a condition to return
function doSlide() {
if (window.innerWidth < 825) {
return
}
// Slide function
...your code
}
As people suggested, call it directly. Attach resize event if you want.
$(window).ready(function() {
doSlide()
window.addEventListener('resize', doSlide)
}
I have the following html, css and script and would like the carousel to switch between the 3 slides automatically as well as give users the option to jump around using the dots. What am I missing?
Live here – https://www.assemblyresearch.co.uk/
Thanks!
<script>
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("dot");
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";
}
</script>
How about you try something like this:
<script>
var slideIndex = 1;
setInterval(function(){
showSlides(slideIndex);
slideIndex++;
}, 1000);
...
</script>
This just adds a setInterval() function that iterates every second that just calls the showSlides function and increases the index by one. If you are not familiar with the setInterval function you can think it as a timer that ticks every X milliseconds where X is the number at the end of the function. This one for example ticks every second.
EDIT
I also suggest you think how to manage when the counter goes higher than your maximum slide number. I would just do a simple math function like so: slideIndex = (slideIndex + 1) % slides.lenght. The problem is that you do not have the object slides at that scope so you should bring it out of the showSlides function.