Changing a CSS Class using Javascript If / Then

Changing a CSS Class using Javascript If / Then - javascript

I am looking for help making an Image Carousel work that only uses HTML, CSS, and Javascript. I was able to get it to function rather well;however, it does not display the 1st image on load.
Script is provided below:
HTML:
<div class="slideshow-container" style="max-width:400px;">
<img class="original-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAPFBMVEX8AgT8AAD9oKD9o6P9qqr9tLT9vr39vLv+3t79mpv9nJz//v7+8/L95uX92dj90dH9ysn9rq79p6f9rKwROItaAAABX0lEQVR4nO3dO1LDUBAFUVm25A8fG3v/e8UBCSRQZP10zg46nqm608vr2/v1dlvX9bg8Hb7c99/M/7f/1f1x+N3H8hfrT8fTtOzGdn4WTiPbzQrrnoUHhW0K+xT2KexT2LeJwsfwhffhC/cK2xT2KexT2KewT2Gfwj6FfQr7FPYp7FPYp7BPYZ/CPoV9myicFbYp7FPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KexT2KewbxMfQwrjFPYp7FPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KexT2LeJnZnxt4IUxinsU9insE9hn8I+hX0K+xT2KexT2KewT2Gfwj6FfQr7FPZt4o6/KGxT2KewT2Gfwj6FfQr7FPYp7FPYp7BPYZ/CPoV9CvsU9insU9i3icJVYZvCPoV9CvsU9insU9insG8Thcfd2C7T6TyP7HL9BHu1DksiYTASAAAAAElFTkSuQmCCg" style="width:100%">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAPFBMVEX8AgT8AAD9oKD9o6P9qqr9tLT9vr39vLv+3t79mpv9nJz//v7+8/L95uX92dj90dH9ysn9rq79p6f9rKwROItaAAABX0lEQVR4nO3dO1LDUBAFUVm25A8fG3v/e8UBCSRQZP10zg46nqm608vr2/v1dlvX9bg8Hb7c99/M/7f/1f1x+N3H8hfrT8fTtOzGdn4WTiPbzQrrnoUHhW0K+xT2KexT2LeJwsfwhffhC/cK2xT2KexT2KewT2Gfwj6FfQr7FPYp7FPYp7BPYZ/CPoV9myicFbYp7FPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KexT2KewbxMfQwrjFPYp7FPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KexT2LeJnZnxt4IUxinsU9insE9hn8I+hX0K+xT2KexT2KewT2Gfwj6FfQr7FPZt4o6/KGxT2KewT2Gfwj6FfQr7FPYp7FPYp7BPYZ/CPoV9CvsU9insU9i3icJVYZvCPoV9CvsU9insU9insG8Thcfd2C7T6TyP7HL9BHu1DksiYTASAAAAAElFTkSuQmCC" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7vnGsgBgV8QW50dp-wZ4GoCNWu4egKYuxAw&usqp=CAU" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAP1BMVEUEggQAfQCgw6Cqz6oAewCjyKO01bS9273e7d4AeQAAdQCbwJv+//7y9/Ll8eXY6tjR5tHJ4smu0q4AcQDQ4dBHeLN8AAABbElEQVR4nO3dSUoDARRF0UpX6ewS3f9azUAEcWAIhHiq7lnBu/MPf3h6fnl9O522F+PF6svmp+XtNn9aXeM8XmP7y24Y3/f7/frb4r9a3+ZwHMb1MGWL5QwKz5MvXC0ePeKuKvRV6KvQV6GvQl+FvkvhpkJbhb4KfRX6KvRV6KvQV6GvQl+Fvgp9Ffoq9FXoq9BXoW8WhcsKbRX6KvRV6KvQV6GvQl+Fvgp9Ffoq9FXoq9BXoa9CX4W+Cn0V+ir0VeibxcVQhbgKfRX6KvRV6KvQV6GvQl+Fvgp9Ffoq9FXoq9BXoa9CX4W+Cn0V+ir0zeILS4W4Cn0V+ir0Veir0Fehr0Jfhb4KfRX6KvRV6KvQV6GvQl+FvlkUnidfOK4fPeKuKvRV6KvQV6GvQl+Fvgp9Ffoq9FXoq9BXoa9CX4W+Cn0V+ir0Vei7FG4rtFXoq9BXoa9CX4W+Cn0V+uZReFhM2f447I7LKTt+fAID6BDSZpXAFwAAAABJRU5ErkJggg==" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS40B-kTX7c_MdtnIt_NetW2HFHgPlQP-nGbw&usqp=CAU" style="width:100%">
<div class="text">Caption Four</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
CSS:
.original-image {
z-index: 66 !important;
display: block;
position: absolute;
}
.original-image-gone {
display: none !important;
}
* {box-sizing:border-box}
.slideshow-container {
max-width: 280px;
position: relative;
margin: auto;
width: 100%;
min-height: 274px;
max-height: 274px;
}
.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;
display: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
display: none;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
display: none;
}
.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 16px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
Javascript:
<script>
let slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
document.getElementById('original-image').classList.replace("original-image-gone");
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
let original-image = document.getElementById('original-image');
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>
I was hoping the initial slide would load, and so I added a "original image" static image above the slideshow, with the idea of changing its class on click, so it disappears. You can see this with "original-image" and then "original-image-gone"

The way to add a class with JavaScript is just:
document.getElementById("Demo").classList.add("Demo-Class");
The way to remove a class with JavaScript is:
document.getElementById("Demo").classList.remove("Demo-Class");
You could use those like this:
let demo = document.getElementById("demo");
function demoFunction() {
if (demo.classList.contains("Blue-Background")) {
demo.classList.remove("Blue-Background");
demo.classList.add("Pink-Background");
}
else {
demo.classList.remove("Pink-Background");
demo.classList.add("Blue-Background");
}
}
.Blue-Background {
background-color: blue;
color: pink;
}
.Pink-Background {
background-color: pink;
color: blue;
}
<!DOCTYPE html>
<html>
<body>
<p id="demo" class="Blue-Background">Hello!</p>
<button onclick="demoFunction()">Change Paragraph.</button>
</body>
</html>
I'm not sure if this helps but it might.

Related

Multiple Slider With same Class and same Controller using shopify liquid and javascript

I want to make multiple slider but slider should stop on last slide of first slider.
as well for all slider's last slide.
i'm creating dynamic sections in liquid file but my basic need is something like this. how can i solve that?
My Need: Shopify dynamic section with multiple block. each block contain sliders. how can i start and stop slider for perticular block. if i add section twice. or block twice. all slider work same as below.
`<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
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;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.myModal{
display:none;}
</style>
<body>
<h2 style="text-align:center">Lightbox</h2>
<div>
<button onclick="activeMe();">Here click </button>
<div id="myModal" class="">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_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 id="caption"></p>
</div>
</div>
<div id="left">
<button onclick="activeMe();">Here click </button>
<div id="myModal" class="">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_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 id="caption"></p>
</div>
</div>
</div>
</div>
<script>
function activeMe(){
var element = document.getElementById("myModal");
element.classList.toggle("myModal");
}
function openModal() {
document.getElementByClassName("myModal").style.display = "block";
}
function closeModal() {
document.getElementByClassName("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 = slides.length}
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>
`

Two css code is overleapping each other and can't see one of them

I want to create a webpage where i can see my videos and some pictures from something. I get some free examples from w3schools for the gallery page and some video embedding code from somewhere else. These codes are working on their own but i can't figure out where is the problem exactly when i put them together.
In the style tags there is a
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
The problem lies in here i think.
Here is my code
/* video */
$(document).ready(function() {
$('#videos a').each(function() {
var data = $(this).attr('data');
$(this).append('<img src="http://img.youtube.com/vi/'+data+'/maxresdefault.jpg" />');
});
$('#videos a').click(function() {
var data = $(this).attr('data');
$('#loader').append('<iframe src="https://www.youtube.com/embed/'+data+'" frameborder="0" allowfullscreen></iframe>');
$('#overlay').fadeIn(250);
});
$('#close').click(function() {
$('#overlay').fadeOut(250,function() {
$('#loader').html('');
});
});
});
/* VIDEÓ */
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;
}
#videos a {
display: block;
width: 25%;
margin-bottom: 20px;
box-sizing: border-box;
padding: 0 10px;
float: left;
cursor: pointer;
text-decoration: none;
outline: 0;
}
#videos a:hover {
opacity: 0.7;
}
#videos a img {
width: 100%;
height: auto;
}
#overlay {
background: rgba(0,0,0,0.8);
position:fixed;
top: 0;
right: 0;
left:0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 99999;
display: none;
}
#overlay .modal {
background: #fff;
border-radius: 5px;
width: 90%;
margin: 100px auto;
max-width: 800px;
min-height: 100px;
position: relative;
padding: 30px 20px 15px;
}
#overlay .modal #close {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
#overlay iframe {
width: 100%;
}
/* VIDEÓ VÉGE */
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
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;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,300' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<h1 style="text-align:center">Lightbox</h1>
<div class="row">
<div class="column">
<img src="img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_snow.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</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="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_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 id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="img_snow_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<br>
<h2 style="text-align:center">Videos</h2>
<div id="videos">
<a data="uT6YOI6JcRs"></a>
<a data="B9FzVhw8_bY"></a>
<a data="d0K436vUM4w"></a>
<a data="PhbWIFDqQfk"></a>
</div>
<div id="overlay">
<div class="modal">
<div id="close">X</div>
<div id="loader"></div>
</div>
</div>
I don't get errors. I wanted to be able to click to the images separated from the videos and vice-versa. If you delete the css from VIDEÓ to VIDEÓ VÉGE You can see that the image gallery is working. And if you delete the css from VIDEÓ VÉGE to the bottom of the style you can see that the video page is working too.
I tried to modify the z-indexes for both of the css codes.

Okay the problem was that i used two of the same .modal in the css. I renamed the video's css modal to modale in both the css and in the html and everything is working. Thank you all!

Function does not run without element[index -1]

First of all, I'm sorry for the inappropriate title.
So I have a code here for a slider, It's copied from w3schools.com and I understand most of the code beside the last line of code from the showSlides function.
slides[slideIndex-1].style.display='block';
Why if I replace slideIndex-1 with 0 or 1 the function does not work anymore.
I have no idea about the use of that, but if it isn't there, the function does not work. (I know the slideIndex is the index of my image).
Why instead of that code I can't use slides[0].style.display='block';
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";
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.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;
}
/* 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);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
So here is the link from the source https://www.w3schools.com/howto/howto_js_slideshow.asp

Slideshow with auto play and the ability to select via dots

I've made a slideshow, which works perfectly fine on its own, without the auto play function I've added to it. But as soon as I add the auto play function its loading pictures in below it and changing the look of my page.
The idea is to have five images in a slideshow which will automatically scroll, but if the user wants to select one of the particular images, they can do via the dots on the bottom.
I feel like I'm missing something quiet obvious, anyone got any ideas?
var slideIndex = 1;
showSlides(slideIndex);
window.plusSlides = function(n) {
showSlides(slideIndex += n);
};
window.currentSlide = function(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";
}
$(".slideshow-container > .mySlides:gt(0)").hide();
setInterval(function() {
$('.slideshow-container > .mySlides:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('.slideshow-container');
}, 3000);
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 130em;
position: relative;
margin: auto;
width: 100%;
img {
#include curvededges();
width: 130em;
object-fit: cover;
margin-top: 0.5em;
max-height: 85em;
}
}
/* Next & previous buttons */
.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;
}
/* 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,
.next {
display: none;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
display: none;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
display: none;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 3em;
width: 3em;
margin: 0 1em;
background-color: transparent;
border: solid $white 2px;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: $white;
}
.dot_box {
position: absolute;
top: 89em;
left: 52em;
text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=350" />
<div class="text">Providing a safe home for animals since 1988</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 5</div>
<img src="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" />
<div class="text">Providing a safe home for animals since 1988</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 5</div>
<img src="https://images.unsplash.com/photo-1533738699159-d0c68059bb61?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0bb9888db1d270eab08c77f41120dfca&w=1000&q=80" />
<div class="text">Providing a safe home for animals since 1988</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Gatto_europeo4.jpg/250px-Gatto_europeo4.jpg" />
<div class="text">Providing a safe home for animals since 1988</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 5</div>
<img src="https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg" />
<div class="text">Providing a safe home for animals since 1988</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div class="dot_box">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
</div>

try this carousal
owl carousal
downlaod the carousal then add these css files
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
html format
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
add these js files
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
now call the carousal
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
now you are done. follow the documentation for more options

Changing SlideShow Indicator Into Other Shape

Sorry to change the question midway but there is also something more that I would like to ask.
I'm currently using a default shape of slideshow indicator which is a dot/bullet shaped indicator.
Questions :
Is there anyway to change it into other shape like rectangular shape ?
Because of time constraint I don't have much time to make a slideshow from scratch so I just grab this code mostly from W3School sites and used it as it is.
Here's a part of the HTML code :
<div class="slideshow-container">
<h1 class="page_title">IR</h1>
<div class="mySlides fade">
<img src="/ir/images/slider_img02.jpg" alt="A" style="width:100%">
<div class="text">A</div>
</div>
<div class="mySlides fade">
<img src="/ir/images/slider_img01.jpg" alt="A" style="width:100%">
<div class="text">A</div>
</div>
<div class="mySlides fade">
<img src="/ir/images/slider_img03.jpg" alt="IRA" style="width:100%">
<div class="text">IRA</div>
</div>
<div class="mySlides fade">
<img src="/ir/images/slider_img04.jpg" alt="A" style="width:100%">
<div class="text">A</div>
</div>
<div class="mySlides fade">
<img src="/ir/images/slider_img05.jpg" alt="A" style="width:100%">
<div class="text">A</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
Here's the javascript
<script>
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
clearTimeout(timer);
showSlides(slideIndex += n);
}
function currentSlide(n) {
clearTimeout(timer);
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n==undefined){n = ++slideIndex}
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";
timer = setTimeout(showSlides, 4000);
}
</script>
And the CSS :
* {box-sizing: border-box}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: black;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Caption text */
.text {
background-color: #424242;
color: #ffffff;
opacity: 0.8;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 0px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .1}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .1}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}

You can do it if you change a bit in your CSS. Try this code.
.dot {
cursor: pointer;
height: 10px;
width: 30px;
margin: 0 2px;
background-color: #bbb;
display: inline-block;
transition: background-color 0.6s ease;
}
This is to remove underline in arrow while hover,
.prev:hover,
.next:hover {
text-decoration: none;
}

Please use this code
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
clearTimeout(timer);
showSlides(slideIndex += n);
}
function currentSlide(n) {
clearTimeout(timer);
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n==undefined){n = ++slideIndex}
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";
timer = setTimeout(showSlides, 4000);
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: black;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Caption text */
.text {
background-color: #424242;
color: #ffffff;
opacity: 0.8;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 0px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .1}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .1}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
.dot {
cursor: pointer;
height: 30px;
width: 30px;
margin: 0 2px;
border-radius:0px;
background-color: #bbb;
display: inline-block;
transition: background-color 0.6s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow-container">
<h1 class="page_title">IR</h1>
<div class="mySlides fade">
<img src="/ir/images/slider_img02.jpg" alt="A" style="width:100%">
<div class="text">A</div>
</div>
<div class="mySlides fade">
<img src="/ir/images/slider_img01.jpg" alt="A" style="width:100%">
<div class="text">A</div>
</div>
<div class="mySlides fade">
<img src="/ir/images/slider_img03.jpg" alt="IRA" style="width:100%">
<div class="text">IRA</div>
</div>
<div class="mySlides fade">
<img src="/ir/images/slider_img04.jpg" alt="A" style="width:100%">
<div class="text">A</div>
</div>
<div class="mySlides fade">
<img src="/ir/images/slider_img05.jpg" alt="A" style="width:100%">
<div class="text">A</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Changing a CSS Class using Javascript If / Then - javascript

Related

Multiple Slider With same Class and same Controller using shopify liquid and javascript

Two css code is overleapping each other and can't see one of them

Function does not run without element[index -1]

Slideshow with auto play and the ability to select via dots

Changing SlideShow Indicator Into Other Shape

Categories

Resources