I have a javascript that changes the IMG every 5 seconds and it works fine. The issue is I tried to add a fade transition effect on it but it is not being applied to it. Where did I go wrong? Any help is appreciated. Thanks in advance.
let images = ['Img2.jpg', 'Img3.jpg', 'Img4.jpg', 'Img5.jpg'];
let index = 0;
const imgElement = document.querySelector('#mainDisplayImg');
function change() {
imgElement.src = images[index];
index > 1 ? index = 0 : index++;
}
window.onload = function() {
setInterval(change, 5000);
};
.mainDisplay {
display: flex;
justify-content: center;
position: absolute;
top: 2%;
}
.mainDisplay img {
width: 75%;
height: 600px;
}
.slide {
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.active {
opacity: 1;
z-index: 2;
}
<div class="mainDisplay">
<img id="mainDisplayImg" src="Img1.jpg">
<img class="slide active" src="Img2.jpg" style="display: none">
<img class="slide" src="Img3.jpg" style="display: none">
<img class="slide" src="Img4.jpg" style="display: none">
<img class="slide" src="Img5.jpg" style="display: none">
</div>
First of all, if you want any kind of transitions, don't use display: none it just doesn't play nice. You can "hide" elements by placing them outside of view area instead;
Second since you already have predefined images in the html, you don't have to duplicate them in javascript, you can cycle through html elements instead and set active class:
let index = 0;
const imgElement = document.querySelector('#mainDisplayImg');
const slides = document.querySelectorAll(".mainDisplay .slide");
function change() {
if (++index >= slides.length)
index = 0;
for(let i = 0; i< slides.length; i++)
slides[i].classList.toggle("active", i == index);
}
window.onload = function() {
setInterval(change, 2000);
};
.mainDisplay {
display: flex;
justify-content: center;
position: absolute;
top: 2%;
}
.mainDisplay img {
width: 75%;
height: 600px;
}
.slide {
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
position: absolute;
top: -100wh; /* hide from view */
}
.active {
opacity: 1;
z-index: 2;
position: initial;
}
<div class="mainDisplay">
<img class="slide active" src="https://lh3.googleusercontent.com/IlhDxQVsR17dwwER5xYZJej867KrdSx0K5eyRP2RFP4eQJMD2pi0ZGBhrMOcajBUP9M54lpmIr90JecPUFGPaRe3sDZ82RvHBSw1rw-YJvQs7J8K3g=w1024-h683-n-l50-sg-rj">
<img class="slide" src="https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj">
<img class="slide" src="https://lh3.googleusercontent.com/dTH5_J82_TqXaLW_Hzq1rbMVqfzRWG9PkcKgHdjXphAy9M4MZF5Q7_cQZeM1kbqEYMysrBLlY4szACDZwIbP7Jm17BnGNjT0Tht8Qw=w1024-h683-n-l50-sg-rj">
<img class="slide" src="https://lh3.googleusercontent.com/fl-GT6w3Ls6RT4vYnbkuYUyLY3lZJH8VtZ7xzxiym9YYaoVRCnZehdz6Icd0oAf6i3H9-O5cCNs6eunlxWr_Csstgsb98DdzNdLFBOlhw9NUfHdyuQjI=w768-h1024-n-l50-sg-rj">
</div>
This should work for you.
const imgElement = document.querySelectorAll('.slide');
let i = 1;
window.onload = function () {
setInterval(function () {
i = i % 5;
imgElement[i].classList.add('active');
imgElement[i].previousElementSibling?.classList.remove('active');
if (i == 0 && imgElement[4].classList.contains('active')) {
imgElement[4].classList.remove('active');
}
i++;
}, 5000);
};
.mainDisplay {
display: flex;
justify-content: center;
position: absolute;
top: 2%;
}
.mainDisplay img {
width: 75%;
height: 600px;
}
.slide {
width: 100%;
height: 100%;
display: none;
}
.active {
display: block;
animation: fadeIn 1s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="mainDisplay">
<!-- <img id="mainDisplayImg" src="./Img1.jpg" /> -->
<img class="slide active" src="./Img1.jpg" />
<img class="slide" src="./Img2.jpg" />
<img class="slide" src="./Img3.jpg" />
<img class="slide" src="./Img4.jpg" />
<img class="slide" src="./Img5.jpg" />
</div>
Related
I'm trying to make autoslide images. I've searched but haven't found a solution that can help me.
I have var slideImages to keep all the images and set setInterval but my images still don't move.
Maybe there is something that I'm missing. Some advice would be much appreciated, thank you.
Please take a look at my code (When i posted my code here i don't know why my images didn't show just only one image)
// slideshow
let slideImages = document.getElementsByClassName("slide");
let i = 0;
function showImages() {
for (i = 0; i < slideImages.length; i++) {
slideImages[0].style.display = 'block';
}
};
function slideshow() {
if (i < slideImages.length - 1) {
i++;
}
else {
i = 0;
}
}
setInterval(slideshow(), 2000);
/*slideshow*/
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
#slideshow {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 800px;
height: 400px;
margin: 0 auto;
max-width: 100%;
z-index: 1;
}
.slidecontent {
position: absolute;
color: white;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>
<div id="slideshow">
<div id="slide1" class="slide">
<span class="slidecontent">SlideImage1</span>
</div>
<div id="slide2" class="slide">
<span class="slidecontent">SlideImage2</span>
</div>
<div id="slide3" class="slide">
<span class="slidecontent">SlideImage3</span>
</div>
</div>
<script src="jquery.js"></script>
<script src="index2.js"></script>
</body>
</html>
Here's the Demo
let is EcmaScript6, i change using var.
Html
// Nothing change...
Js
// slideshow
var slideImages = document.getElementsByClassName("slide");
var counter = 0; //set index for timer
var duration = 2000; //set duration
//Hide each slide at first
function hideAllImages() {
for (var i = 0; i < slideImages.length; i = i + 1) {
/* console.log(slideImages[i]); */
slideImages[i].style.opacity = 0;
}
}
function slideshow() {
hideAllImages();
/* go to next slide */
counter = counter + 1;
/* reset to first slide when looping */
if (counter > slideImages.length - 1) {
counter = 0;
}
console.log(counter);
/* show the current slide */
slideImages[counter].style.opacity = 1;
}
setInterval(function() {
slideshow();
}, duration);
Css
/*slideshow*/
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
#slideshow {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.slide {
position: absolute;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 800px;
height: 400px;
margin: 0 auto;
max-width: 100%;
transition: opacity 300ms;
z-index: 1;
}
.slidecontent {
position: absolute;
color: white;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* 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 {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
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}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://preview.ibb.co/mV3TR7/1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://preview.ibb.co/bSCBeS/2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://preview.ibb.co/kgG9Yn/3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</body>
</html>
You can refer the following link for the solution.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto
You can use javascript, but I would suggest using bootstrap to do this. I suffered while trying to make this work on my website and I would highly suggest using bootstrap because of its ease of use and if something goes wrong with it, it is a lot easier to fix. I recommend the w3schools article that was mentioned in the comments. https://www.w3schools.com/bootstrap/bootstrap_carousel.asp . If you do continue to want to use JS I wish you all the best :)
When I click <div class="itemBox"> it's will be show the correspond <div class="workItem> with slide up effect.(every workItem has different id, itemBox also has different href, and it works correctly)
Every workItem has button to close itself, it look like fadeOut...but I need them close with slide down effect.
There is my code, and I need some suggestion.
HTML
<div class="itemBox">
<div class="wrap" style="background-image:url('img/01.jpg')"></div>
<div>titletitle</div>
</div>
<div class="itemBox">
<div class="wrap" style="background-image:url('img/02.jpg')"></div>
<div>titletitle</div>
</div>
<div class="itemBox">
<div class="wrap" style="background-image:url('img/01.jpg')"></div>
<div>titletitle</div>
</div>
The workItem ↓
<div class="workContent">
<div class="workItem customScroll" id="work1" style="background-color:#999999;">
<div class="wrapper" id="workBox1"></div>
</div>
<div class="workItem customScroll" id="work2" style="background-color:#333333;">
<div class="wrapper" id="workBox2"></div>
</div>
<div class="workItem customScroll" id="work3" style="background-color:#333333;">
<div class="wrapper" id="workBox3"></div>
</div>
</div>
JS
var refElement = [];
$('.workItem').each(function(index,el){
refElement[index] = $(this).attr('id');
$(".itemBox").each(function(index, el) {
$(this).on('click', 'a', function(e) {
var target = $(this).attr('href');
$('.workItem').removeClass('workOpen');
$('.workItem').removeClass('workClose');
$('.workItem').attr('style','');
if(refElement[index]=target) {
$(refElement[index]).removeClass('workClose');
$(refElement[index]).addClass('workOpen');
$('body').addClass('lockBody');
}
$('html, body').scrollTop(0);
return false;
});
});
});
function closeWork(){
$('.close').click(function(){
var workItem = $(this).parents('.workItem');
if(workItem.hasClass('workOpen')){
workItem.hide("slow",function(){
workItem.removeClass('workOpen');
workItem.addClass('workClose');
});
$('body').removeClass('lockBody');
}
});
}
CSS(SCSS)
.workItem {
display: none;
bottom:0;
&.workOpen {
display: block;
opacity: 1;
position: absolute;
color:#ffffff;
background-color: #787878;
z-index: 5;
overflow: auto;
height: calc(100% - 102px);
width: 100% !important;
left: 0;
animation-name: slide;
animation-duration: 1s;
animation-fill-mode: forwards;
-webkit-animation-name: slide;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
}
&.workClose {
bottom: 0;
opacity: 1;
height: 0;
}
img {
width: 100%;
margin-bottom: 40px;
}
}
#keyframes slide {
from {
height: 0;
}
to {
height: calc(100% - 102px);
}
}
I'm trying to create section with couple images.Idea is to dynamically change those images, but my problem is: when section is loaded and animation is complete whole process stop but it should continue all over again.
Can somebody help me to achieve that?
Thank you.
Here is my code so far:
$(document).ready(function(){
setInterval(function(){
var $slide = $('div.slideUp');
$slide.removeClass('slideUp');
$slide.next().addClass('slideUp');
},2000);
});
.slideSection{
background: #000;
float: left;
width: 100%;
padding: 25px;
position: relative;
overflow: hidden;
}
.block{
width: 100%;
float: left;
display: none;
}
.block img {
float: left;
width: 25%;
height: 100px;
padding: 10px;
margin: 0;
}
.slideUp{
display: block;
animation: slideUp 1s 1;
position: relative;
}
#keyframes slideUp{
from{
opacity: .0;
transform: translate(0, 300px);
}
to{
opacity: 1;
transform: translate(0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slideSection">
<div class="block slideUp ">
<img src="img/css.png" alt="css">
<img src="img/js.png" alt="js">
<img src="img/css.png" alt="css">
<img src="img/query.png" alt="js">
</div>
<div class="block">
<img src="img/java.png" alt="css">
<img src="img/sql.png" alt="js">
<img src="img/js.png" alt="js">
</div>
<div class="block">
<img src="img/query.png" alt="js">
<img src="img/java.png" alt="css">
</div>
</section>
You could keep the interval running, but change the way you look for the next slide: check if there is a next one, if so, take it, otherwise pick the first one:
$slide = $slide.next().length ? $slide.next() : $slide.siblings(':first')
$slide.addClass('slideUp');
Your loop is not infinite because last element do not have next() elements. You should check for that to appear and then take first element of collection instead.
Check the snippet below.
$(document).ready(function(){
setInterval(function(){
var $slide = $('div.slideUp');
$slide.removeClass('slideUp');
var $nextSlide = $slide.next();
if(!$nextSlide.length) {
$nextSlide = $('div.block').eq(0);
}
$nextSlide.addClass('slideUp');
}, 2000);
});
.slideSection{
background: #000;
float: left;
width: 100%;
padding: 25px;
position: relative;
overflow: hidden;
}
.block{
width: 100%;
float: left;
display: none;
}
.block img {
float: left;
width: 25%;
height: 100px;
padding: 10px;
margin: 0;
}
.slideUp{
display: block;
animation: slideUp 1s 1;
position: relative;
}
#keyframes slideUp{
from{
opacity: .0;
transform: translate(0, 300px);
}
to{
opacity: 1;
transform: translate(0, 0);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="slideSection">
<div class="block slideUp ">
<img src="img/css.png" alt="css">
<img src="img/js.png" alt="js">
<img src="img/css.png" alt="css">
<img src="img/query.png" alt="js">
</div>
<div class="block">
<img src="img/java.png" alt="css">
<img src="img/sql.png" alt="js">
<img src="img/js.png" alt="js">
</div>
<div class="block">
<img src="img/query.png" alt="js">
<img src="img/java.png" alt="css">
</div>
</section>
Thank you all for help I appreciate that.
Here is the another function that working properly.
Sincerly
$(document).ready(function(){
var currentIndex = 0,
items = $('.block'),
itemAmt = items.length;
function cycleItems() {
var item = $('.block').eq(currentIndex);
items.removeClass('slideUp');
item.addClass('slideUp');
}
var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 2000);
});
Goal:
To have a slideshow in this frame.
Here's a jsfiddle of it:
https://jsfiddle.net/kf3cqk6y/2/
$slides:4;
$time_per_slide:4;
$total_animation_time:$time_per_slide * $slides;
body {
background: #000;
}
.container {
margin: 50px auto;
width: 500px;
height: 300px;
overflow: hidden;
border: 10px solid;
border-top-color: #856036;
border-left-color: #5d4426;
border-bottom-color: #856036;
border-right-color: #5d4426;
position: relative;
}
.photo {
position: absolute;
animation: round # {
$total_animation_time
}
s infinite;
opacity:0;
}
#keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
#for $index from 1 to $slides + 1 {
img: nth-child(# {
$index
}
) {
animation-delay: # {
$total_animation_time - $time_per_slide * $index
}
s
}
}
<body>
<div class="container">
<img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
</div>
</body>
Question:
How do I have the images display in the container?
You need to set the fiddle styling to be scss not css
Here's an updated fiddle
And if you want to include it in your web page, use the code from this fiddle
I just made a very simple "imageslider" but it does not slide, so lets call it a "imageswapper".
Alright. My question is now, how can I make it slide in and slide out so its smooth.
JSFIDDLE
[JS]
document.getElementById('atwo').style.display = "none";
function ImgSwap(){
if(document.getElementById('one').style.display == "block"){
document.getElementById('one').style.display = "none";
document.getElementById('two').style.display = "block";
}else{
document.getElementById('two').style.display = "none";
document.getElementById('one').style.display = "block";
}
}
[HTML]
<div id="wrapper">
<a onclick="ImgSwap()" id="aone"><img src="one.jpg" alt="one" class="img" id="one" /></a>
<a onclick="ImgSwap()" id="atwo"><img src="two.gif" alt="two" class="img" id="two" /></a>
</div>
[CSS]
img.img
{
height: 200px;
width: 300px;
}
#one
{
display: block;
}
#two
{
display:none;
}
a:hover
{
cursor: pointer;
}
div#wrapper
{
width: 300px;
}
There are many ways to achieve this effect, one way to do this is by applying css transition to your css class. You can change the opacity and position of the image to create the slides in effect.
function ImgSwap() {
document.getElementById('one').classList.toggle('show');
document.getElementById('two').classList.toggle('show');
}
div#wrapper {
width: 300px;
height: 200px;
position: relative;
background-color: black;
}
.img {
height: 200px;
width: 300px;
position: absolute;
top: 0;
left: -300px;
opacity: 0;
}
a:hover {
cursor: pointer;
}
.show {
left: 0;
opacity: 1;
transition: left 1s;
}
<div id="wrapper">
<a onclick="ImgSwap()" id="aone">
<img src="https://c2.staticflickr.com/6/5120/5824578555_d239d42195_b.jpg" alt="one" class="img show" id="one" />
</a>
<a onclick="ImgSwap()" id="atwo">
<img src="http://petsadviser.supercopyeditors.netdna-cdn.com/wp-content/uploads/2012/06/why-is-cat-scared-rain-thunder.png" alt="two" class="img" id="two" />
</a>
</div>