I have follow tutorial from w3school
Now I want to improve it with prev / next for the indicators, not for the slider
This is what I want to achieve
Also this is my code
example
OR
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-opacity-off", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-opacity-off";
}
#indi {
width: 200px;
float:left;
}
<body>
<div class="w3-content" style="max-width:1200px">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%">
<img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%">
<div class="w3-row-padding w3-section">
<div id="indi" class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" style="width:100%" onclick="currentDiv(1)">
</div>
<div id="indi" class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" style="width:100%" onclick="currentDiv(2)">
</div>
<div id="indi" class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" style="width:100%" onclick="currentDiv(3)">
</div>
</div>
</div>
</body>
Thanks before, any help appreciated
Next:
$("#next").click(function () {
$("#container div:eq(" + num + ")").slideUp(450);
num = (num + 1) % 4;
$("#container div:eq(" + num + ")").fadeIn(450);
});
Last:
$("#last").click(function () {
$("#container div:eq(" + num + ")").slideUp(450);
num = 4;
$("#container div:eq(" + num + ")").fadeIn(450);
});
This has already been asked and answered - How do I add buttons to my Javascript/Jquery Slider?
If you need any more specific help please don't hesitate to ask though.
Related
I'm new in front end development and I want some help with this error
can you please help me fix the problem im facing
var index = 1; show(index);
function move(n) { show(index = index + n); }
function show(n) { var i; var x =
document.getElementsByClassName("slides"); for (i = 0; i < x.length;
i++) { x[i].style.display = "none"; } x[index].style.display =
"block"; }
.w3-content{max-width:980px;margin:auto}
.w3-center{text-align:center!important}
.w3-btn-floating:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-button{color:#000;background-color:#f1f1f1;padding:8px 16px}.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-btn,.w3-btn-floating{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.w3-btn-floating{display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:24px}
.w3-btn-floating{width:40px;height:40px;line-height:40px}
.w3-btn-floating:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn-floating{-webkit-transition:background-color .25s,color .15s,box-shadow .25s,opacity 0.25s,filter 0.25s,border 0.15s;transition:background-color .25s,color .15s,box-shadow .15s,opacity .25s,filter .25s,border .15s}
<!DOCTYPE html>
<html>
<body>
<div class="w3-content" style="max-width:400px;position:relative">
<img class="slides" src="https://i.stack.imgur.com/Qypol.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/yU7fs.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/xxLmR.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/YiIiQ.jpg" style="width:100%">
<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="move(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="move(1)">❯</a>
</div>
</body>
</html>
So the problem with your JS code is that you don't consider changing index based on length of the slides which are your clicks to the right and left buttons.
What I mean to say you should think what will happen when you keep clicking the right button so every time the index will increase so you need to set it back to the first image or slide in this case with this condition if (n > x.length) {index = 1}
and vice versa if (n < 1) {index = x.length} for the case when you decrease the images or slides (left button).
Here is the JS code you need to solve this problem:
var index = 1;
show(index);
function move(n) {
show(index = index + n);
}
function show(n) {
var i;
var x = document.getElementsByClassName("slides");
if (n > x.length) {index = 1}
if (n < 1) {index = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[index-1].style.display = "block";
}
Fiddle(View):
var index = 1;
show(index);
function move(n) {
show(index = index + n);
}
function show(n) {
var i;
var x = document.getElementsByClassName("slides");
if (n > x.length) {index = 1}
if (n < 1) {index = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[index-1].style.display = "block";
}
.w3-content{max-width:980px;margin:auto}
.w3-center{text-align:center!important}
.w3-btn-floating:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-button{color:#000;background-color:#f1f1f1;padding:8px 16px}.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-btn,.w3-btn-floating{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.w3-btn-floating{display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:24px}
.w3-btn-floating{width:40px;height:40px;line-height:40px}
.w3-btn-floating:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn-floating{-webkit-transition:background-color .25s,color .15s,box-shadow .25s,opacity 0.25s,filter 0.25s,border 0.15s;transition:background-color .25s,color .15s,box-shadow .15s,opacity .25s,filter .25s,border .15s}
<!DOCTYPE html>
<html>
<body>
<div class="w3-content" style="max-width:400px;position:relative">
<img class="slides" src="https://i.stack.imgur.com/Qypol.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/yU7fs.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/xxLmR.jpg" style="width:100%">
<img class="slides" src="https://i.stack.imgur.com/YiIiQ.jpg" style="width:100%">
<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="move(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="move(1)">❯</a>
</div>
</body>
</html>
I have a little bit problem while using variables of two functions together. In this both functions are not working at once.
Here are my two functions :
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(" red", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " red";
}
var slideIndex = 1;
showDivs2(slideIndex);
function plusDivs2(n) {
showDivs2(slideIndex += n);
}
function currentDiv2(n) {
showDivs2(slideIndex = n);
}
function showDivs2(n) {
var i;
var x = document.getElementsByClassName("mySlides2");
var dots = document.getElementsByClassName("demo2");
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(" red", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " red";
}
.mySlides {
display: none;
}
.mySlides2 {
display: none;
}
<div class="content">
<img class="mySlides" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/43288.png" style="width: 300px;height: 200px;">
<img class="mySlides" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/17874.jpg" style="width: 300px;height: 200px;">
<img class="mySlides" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/blog.jpg" style="width: 300px; height: 200px;">
</div>
<div class="center">
<div class="section">
<button class="button light-grey" onclick="plusDivs(-1)">❮ Prev</button>
<button class="button light-grey" onclick="plusDivs(1)">Next ❯</button>
</div>
</div>
<div class="content2">
<img class="mySlides2" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/43288.png" style="width: 300px;height: 200px;">
<img class="mySlides2" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/17874.jpg" style="width: 300px;height: 200px;">
<img class="mySlides2" src="http://www.i-am-bhaskar.com/panel/assets/img/blogs/blog.jpg" style="width: 300px;height: 200px;">
</div>
<div class="center">
<div class="section">
<button class="button light-grey" onclick="plusDivs2(-1)">❮ Prev</button>
<button class="button light-grey" onclick="plusDivs2(1)">Next ❯</button>
</div>
</div>
In this, I have two div containing images with next and prev button, images of first function is loading by default but when i click on button then second image is appear. I just want to fix it i.e images of both div will load default.
I added a button to my website that pop up a gallery, my problem is that the gallery is loading the image from the code, so when my client needs to upload a new image I need to add it for him in the code also. how can I make it update auto? I mean when the client will add an image to “media” in WordPress, so the gallery will update auto, thanks!
here is the code im using right now:
<!DOCTYPE html>
<html>
<body>
<img class="alignnone size-full wp-image-133 aligncenter" style="border: 5px solid white; border-radius: 50%; background: white; box-shadow: 1px 1px 5px gray;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" alt="" width="72" height="72" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"><strong>try</strong>
</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 / 4</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" alt="Nature and sunrise" 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>
<script>
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').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>
</body>
</html>
use this shotcode it's going to work i think
<?php
function your_custom_gallery() {
$attachments = get_posts( array(
'post_type' => 'attachment',
'posts_per_page' => 4,
'post_status' => null,
'post_mime_type' => 'image'
) );
?>
<div id="imyModal" class="modal" style="direction: ltr!important;">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<?php
$i = 0;
foreach ( $attachments as $attachment ) {
$image_attributes = wp_get_attachment_image_src( $attachment->ID, 'original' );
echo '<div class="mySlides">';
echo '<div class="numbertext"> ' . $i . ' / 4</div>';
echo '<img src="' . $image_attributes[0] . '" style="width:100%">';
echo '</div>';
$i ++;
}
?>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<?php
}
function add_script_to_head() {
?>
<script>
function openModal() {
document.getElementById('imyModal').style.display = "block";
}
function closeModal() {
document.getElementById('imyModal').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>
<?php
}
add_action( 'wp_head', 'add_script_to_head' );
add_shortcode( 'custom_gallery', 'your_custom_gallery' );
I have created this slider for my website but I need to apply a fadeIn/out when go next/prev. Can anyone explain me how to do this or show me the code?
JS
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";
}
HTML
<div class="container">
<img class="mySlides" src="http://placehold.it/600x200">
<img class="mySlides" src="http://placehold.it/600x150" style="display:none">
<img class="mySlides" src="http://placehold.it/600x100" style="display:none">
<img class="mySlides" src="http://placehold.it/600x200" style="display:none">
<button onclick="plusDivs(-1)">❮</button>
<button onclick="plusDivs(1)">❯</button>
</div>
I think you can replace this:
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
With this:
$('.mySlides:visible').fadeOut(function() {
$(x[slideIndex-1]).fadeIn();
});
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}
$('.mySlides:visible').fadeOut(function() {
$(x[slideIndex-1]).fadeIn();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img class="mySlides" src="http://placehold.it/600x200">
<img class="mySlides" src="http://placehold.it/600x150" style="display:none">
<img class="mySlides" src="http://placehold.it/600x100" style="display:none">
<img class="mySlides" src="http://placehold.it/600x200" style="display:none">
<button onclick="plusDivs(-1)">❮</button>
<button onclick="plusDivs(1)">❯</button>
</div>
I am looking to create an HTML color visualizer for steel buildings. This will be placed on my company's website. I'm wanting to see if it is possible (in HTML) to load image layers (in their fixed positions) onto a canvas background, after a visitor clicks on a color swatch.
Here is a similar solution I am seeking.
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-red", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " w3-red";
}
.mySlides {
display: none
}
<button class="w3-button demo" onclick="currentDiv(2)">Tan Wall</button>
<button class="w3-button demo" onclick="currentDiv(3)">Red Roof</button>
<button class="w3-button demo" onclick="currentDiv(4)">Black Garage</button>
<button class="w3-button demo" onclick="currentDiv(5)">Black Trim</button>
<div class="w3-content" style="max-width:800px">
<img class="mySlides" src="http://metaldepotinc.com/Canvas-Background.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Wall-Tan.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Roof-Red.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Garage-Black.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Trim-Black.png" style="width:100%">
</div>
For example, when a visitor clicks on the "Red Roof" swatch I want the "Red-Roof.png" layer to load on top of the white building canvas. The positioning would be perfect since it is positioned correctly in the image file already. From there, I'd like the customer to add more image layers such as "Tan Wall" until the building combination fits their preferences. The final image should look like this after clicking all of the buttons.
Thanks for your time!
You can achieve this by css absolute positioning.
Additionally I recommend to use .classList.toggle instead of replacing the .className:
var slideIndex = 1;
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
}
x[slideIndex - 1].classList.toggle("active");
dots[slideIndex - 1].classList.toggle("w3-red")
}
.mySlides {
display: none;
position:absolute;
}
.mySlides.active{
display:block;
}
<button class="w3-button demo" onclick="currentDiv(1)">Tan Wall</button>
<button class="w3-button demo" onclick="currentDiv(2)">Red Roof</button>
<button class="w3-button demo" onclick="currentDiv(3)">Black Garage</button>
<button class="w3-button demo" onclick="currentDiv(4)">Black Trim</button>
<div class="w3-content" style="max-width:800px;position: relative;">
<img src="http://metaldepotinc.com/Canvas-Background.png" style="width:100%;position: absolute ;z-index:-1">
<img class="mySlides" src="http://metaldepotinc.com/Wall-Tan.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Roof-Red.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Garage-Black.png" style="width:100%">
<img class="mySlides" src="http://metaldepotinc.com/Trim-Black.png" style="width:100%">
</div>
EDIT:
According to the asker's comment...
Use absolute position on every image, and...
Use toggle buttons (checkbox behavior) instead of hiding all images on button click and showing only one (radio button behavior)