<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Document</title>
<link href="index.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div class="slideshow-container">
<div class="mySlideDiv fade active">
<img src="bg.jpg">
</div>
<div class="mySlideDiv fade">
<img src="lemon.jpg">
</div>
<div class="mySlideDiv fade">
<img src="pear.webp">
</div>
<a class="prev" onclick="prevSlide()">❮</a>
<a class="next" onclick="nextSlide()">❯</a>
</div>
</body>
</html>
body{
margin: 0;
}
/* Slideshow container */
.slideshow-container {
/*max-width: 1440px;*/
position: relative;
margin: auto;
margin-left: 0%;
margin-top: 0%;
}
/* effect */
.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}
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 45%;
width: auto;
padding: 16px;
margin-top: -22px;
color: red;
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:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
img{
width:100%;
height: 30%important;
}
$(document).ready(function () {
$(".mySlideDiv").not(".active").hide();
setInterval(nextSlide, 4000);
});
function prevSlide() {
$(".mySlideDiv").hide();
var allSlide = $(".mySlideDiv");
var currentIndex = 0;
$(".mySlideDiv").each(function(index,item){
if($(this).hasClass("active")) {
currentIndex = index;
}
});
var newIndex = 0;
if(currentIndex <= 0) {
newIndex = allSlide.length-1;
} else {
newIndex = currentIndex-1;
}
$(".mySlideDiv").removeClass("active");
$(".mySlideDiv").eq(newIndex).addClass("active");
$(".mySlideDiv").eq(newIndex).show();
}
function nextSlide() {
$(".mySlideDiv").hide();
var allSlide = $(".mySlideDiv");
var currentIndex = 0;
$(".mySlideDiv").each(function(index,item){
if($(this).hasClass("active")) {
currentIndex = index;
}
});
var newIndex = 0;
if(currentIndex >= allSlide.length-1) {
newIndex = 0;
} else {
newIndex = currentIndex+1;
}
$(".mySlideDiv").removeClass("active");
$(".mySlideDiv").eq(newIndex).addClass("active");
$(".mySlideDiv").eq(newIndex).show();
}
Screenshot on mobile
I want to make a responsive web application, but mobile window isn't filled with the image, and I don't know how to edit the code to make it. I assume that I have to embed the code targeted with mobile web, but I don't know how to do. I attach the image file to explain my situation. Please help.
You can try to put in the css of your container:
width:100%;
height: 100%;
And in the css of your pictures :
width:100%;
height: undefined;
// figure out your image aspect ratio
aspectRatio: 50 / 32;
Add css with media query
#media(max-width:480px) {
img {
width:100% !important;
height: 100% !important;
object-fit: cover; }
}
Related
I'm trying to clone the Flickr homepage and I want the first image to drop in in .3s and then for the images to change every 4 seconds taking 1 second to transition unless ArrowLeft or ArrowRight is pressed, in the case of ArrowLeft the image should have a drop in animation to the previous image in the cycle and in the case of ArrowRight being pressed the image should drop in to the next image in the cycle and in the case of both the images should stay for 4 seconds NOT TRANSITIONING IN LESS TIME IF THE INTERVAL THAT STARTS ON PAGE LOAD IS INTERRUPTED. You can see what I mean on the Flickr homepage.
the following is a distillation of the problem in code.
html document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel="stylesheet" href="test.css">
<script src="test.js" defer></script>
</head>
<body>
<div id="background"></div>
<div id='grid'>
<header>header</header>
<main>main</main>
<footer>footer</footer>
</div>
</body>
</html>
css document
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(50, 50, 50);
display: grid;
}
#background {
height: 100vh;
width: 100%;
background-image: url(./test_images/meditation.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
animation-duration: .3s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
animation-name: slideIn;
transition: background-image 1s;
z-index: 0;
}
#keyframes slideIn {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0%);
}
}
#grid {
display: grid;
grid-template-rows: 65px 1fr minmax(65px, auto);
height: 100vh;
width: 100%;
z-index: 1;
}
header {
background-color: rgba(0, 0, 0, .5);
color: white;
}
main {
color: white;
}
footer {
color: white;
background-color: black;
}
#grid, #background {
grid-area: 1 / 1;
}
javascript document
let i = 0;
const backgroundImages = ['meditation.jpg', 'fish.jpg', 'fern.jpg', 'stars.jpg', 'northernLights.jpg', 'forest.jpg', 'mountains.jpg', 'horse.jpg', 'lion.jpg', 'engineer.jpg', 'computers.jpg'];
function changeImages () {
i++;
if (i == backgroundImages.length) {i = 0}
document.getElementById('background').style.backgroundImage = 'url(./test_images/' + backgroundImages[i] + ')';
}
window.onload = function () {
window.setInterval(changeImages, 4000);
}
document.addEventListener('keydown', (event) => {
if (event.key == "ArrowLeft") {
i--;
} else if (event.key == "ArrowRight") {
i++;
}
if (i == -1) {
i = backgroundImages.length - 1;
} else if (i >= backgroundImages.length) {
i = 0;
}
document.getElementById('background').style.backgroundImage = 'url(./test_images/' + backgroundImages[i] + ')';
document.getElementById('background').animate([
{transform: "translateY(-100%)"},
{transform: 'translateY(0%)'}
], {
duration: 300,
iterations: 1
})
window.setInterval(changeImages, 4000);
}, false)
Each time you set a new interval, cancel the old interval using clearInterval:
let intervalId;
window.onload = function () {
intervalId = window.setInterval(changeImages, 4000);
}
document.addEventListener('keydown', (event) => {
.....
clearInterval(intervalId);
intervalId = window.setInterval(changeImages, 4000);
}, false)
hey i try to fade in pause for a sec and fade out a span , im using class add and remove through timeout and interval . i cant figure it out someone can help?
i tried to do it with active class but i didnt make it .
i searched for it on google and found nothing with JS only Jquery that i dont want to use ATM
--------HTML----
<div class="desgin">
<div class="im__desgin"><h1>I'm Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds ">WebSite's</span>
<span class="design-kinds">Logos</span>
<span class="design-kinds">Brands</span>
</div>
</div>
-----CSS-----
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
opacity: 0;
visibility: hidden;
position: absolute;
}
/* .design-kinds.active {
opacity: 1;
visibility: visible;
animation: fade 3s ease-in-out 3s 1;
} */
.design-kinds.fadein {
animation: fadeIn 1s ease-in;
visibility: visible;
}
.design-kinds.fadeout {
animation: fadeOut 1s ease-out;
visibility: hidden;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
#keyframes fadeOut {
0% {
opacity: 100;
}
100% {
opacity: 0;
}
}
---JS---
const changeText = document.querySelector(".what__design");
const textToShow = document.querySelectorAll(".design-kinds");
//Fade in First span and fade out Last span
let index = 0;
let doneOrNot = "not";
function showText() {
const spans = [...textToShow];
if (index === spans.length - 1) {
index = 0;
}
if (doneOrNot === "done") {
doneOrNot = "not";
setTimeout(() => {
spans[index].classList.remove("fadein");
spans[index].classList.add("fadeout");
}, 4000);
index++;
console.log(doneOrNot);
}
if (doneOrNot === "not") {
spans[index].classList.add("fadein");
doneOrNot = "done";
console.log(doneOrNot);
}
}
setInterval(showText, 4000);
THANKS <3
If you want to animate it for a single time, than you don't want to need javascript.
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
position: absolute;
}
.web{
animation: animate1 4s 2s 1 ease-in-out ;
color: black;
opacity: 0;
}
.logo{
animation: animate1 4s 8s 1 ease-in-out ;
opacity: 0;
}
.brand{
animation: animate1 4s 14s 1 ease-in-out ;
opacity: 0;
}
#keyframes animate1{
0%,100%{
opacity: 0;
}
50%{
opacity: 10;
}
}
#keyframes animate2{
0%,100%{
opacity: 0;
}
50%{
opacity: 10;
}
}
#keyframes animate3{
0%,100%{
opacity: 0;
}
50%{
opacity: 10;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="desgin">
<div class="im__desgin"><h1>I'm Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds web">WebSite's</span>
<span class="design-kinds logo">Logos</span>
<span class="design-kinds brand">Brands</span>
</div>
</div>
<!-- <script src="index.js"></script> -->
</body>
</html>
The given JS checks whether done is set, if it is immediately sets it to not and then checks if it's not and acts on that. This probably needs changing to an if...else combination.
Although you can do the animation by JS you may like to consider doing it with CSS as that should optimise the system's use of for example the GPU as you are only changing an animatable property (opacity).
While the specific example given here could be done entirely by CSS - setting up one set of keyframes which fade in, pause and fadeout a text for 33.3333% of the total animation time of 3*whatever seconds you choose - to be more general it adds a bit of JS which is run just once at the start to set up the keyframes to give the right %s however many texts there are.
This is done by setting CSS variables which are used in CSS calcs to give the overall animation time and the delay times - each text starts its animation offset depending on its index and then it runs forever.
<head>
<style>
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
opacity: 0;
/*visibility: hidden;*/
position: absolute;
animation: fadeInOut calc(var(--num) * var(--t)) infinite linear;
animation-delay: calc(var(--n) * var(--t));
animation-fill-mode: forwards;
}
</style>
<style id="keyframes">
</style>
</head>
<body>
div class="desgin">
<div class="im__desgin">
<h1>I'm Desgin.</h1>
</div>
<div class="what__design">
<span class="design-kinds ">WebSite's</span>
<span class="design-kinds">Logos</span>
<span class="design-kinds">Brands</span>
</div>
</div>
<script>
const showFor = 6; // set this to the number of seconds each text takes to fade in, pause for 1 second and fade out again
const whatDesign = document.querySelector('.what__design');
const designKinds = document.querySelectorAll('.design-kinds');
const len = designKinds.length;
whatDesign.style.setProperty('--num', len);
whatDesign.style.setProperty('--t', showFor + 's');
for (let n = 0; n < len; n++) {
designKinds[n].style.setProperty('--n', n);
}
const pcEachGets = 100 / len; // the percentage of total cycle time each bit of text gets
const pcForOneSecond = pcEachGets / showFor; // the % of total cycle time that equals 1 second - 1 second is the required pause time
const pcFadeInOrOut = (pcEachGets - pcForOneSecond) / 2;
document.querySelector('#keyframes').innerHTML = `#keyframes fadeInOut {
0% {
opacity: 0;
}
` + pcFadeInOrOut + `% {
opacity: 1;
}
` + (pcFadeInOrOut + pcForOneSecond) + `% {
opacity: 1;
}
` + pcEachGets + `% {
opacity: 0;
}
100% {
opacity: 0;
}
}`;
</script>
</body>
I think this will help you.
if you want this animation as a infinite loop.
const changeText = document.querySelector(".what__design");
const textToShow = document.querySelectorAll(".design-kinds");
//Fade in First span and fade out Last span
let index = 0;
function showText() {
setInterval(() => {
if (index < 2) {
textToShow[index].classList.add("fadeinOut");
index++;
}
else {
textToShow[index].classList.add("fadeinOut");
setTimeout(() => {
textToShow[2].classList.remove("fadeinOut");
}, 4000);
index = 0;
}
if (index > 0) {
setTimeout(() => {
textToShow[index - 1].classList.remove("fadeinOut");
}, 4000);
}
}, 5000);
}
showText();
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
opacity: 0;
visibility: hidden;
position: absolute;
}
/* .design-kinds.active {
opacity: 1;
visibility: visible;
animation: fade 3s ease-in-out 3s 1;
} */
.design-kinds.fadeinOut {
animation: fadeInOut 4s ease-in;
visibility: visible;
}
#keyframes fadeInOut {
0%,100% {
opacity: 0;
}
20%,80% {
opacity: 100;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="desgin">
<div class="im__desgin"><h1>I'm Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds ">WebSite's</span>
<span class="design-kinds">Logos</span>
<span class="design-kinds">Brands</span>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
I figure some out but still i have a delay that i doest succeed to manage the delay after the function is done
<div class="im__desgin"><h1>I Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds" id="Kind-1">WebSite's</span>
<span class="design-kinds" id="Kind-2">Logos</span>
<span class="design-kinds" id="Kind-3">Brands</span>
</div>
</div>
.desgin {
text-align: center;
font-size: 40px;
color: aliceblue;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
position: relative;
}
.design-kinds {
text-align: center;
opacity: 0;
position: absolute;
}
.effect {
animation: animate1 4s 2s 1 ease-in-out;
transform: scale(0.5);
opacity: 0;
}
#keyframes animate1 {
0%,
100% {
transform: scale(0.5);
opacity: 0;
}
30%,
50% {
transform: scale(1);
opacity: 10;
}
30% {
transform: scale(1);
opacity: 10;
}
}
const spans = document.querySelectorAll(".design-kinds");
//call function before page load
showText();
//Changing Text
function showText() {
//Kind --1--
$("#Kind-1").addClass("effect");
setTimeout(() => {
$("#Kind-1").removeClass("effect");
}, 6000);
//Kind --2--
setTimeout(() => {
$("#Kind-2").addClass("effect");
}, 3700);
setTimeout(() => {
$("#Kind-2").removeClass("effect");
}, 9800);
//Kind --3--
setTimeout(() => {
$("#Kind-3").addClass("effect");
}, 7700);
setTimeout(() => {
$("#Kind-3").removeClass("effect");
}, 14000);
}
setInterval(showText, 13000);
I have created an image slider with many images using some javascript and css. I just used client width to get the size of the image (which vary slightly) and calculated the translateX distance with a counter variable. Added a css transition in the end. However I can't seem to get the slider to translate the whole image correctly. I don't know why it's going wrong. I have used 'vw' in the calculations for responsiveness. I am new to javascript and would love any tips for other parts for other parts of code as well.
here is the JS fiddle link- https://jsfiddle.net/n6smpv2j/15/
HTML
<div id="lookbook" data-tab-content class="black-text">
<div class="lookbook-nav">
<button id="left">←</button>
<button id="right">→</button>
</div>
<div class="lookbook">
<div class="slider">
<img src="https://loremflickr.com/640/360" id="lastClone" alt="">
<img src="https://picsum.photos/640/400">
<img src="https://loremflickr.com/640/360">
<img src="https://picsum.photos/640/400">
<img src="https://loremflickr.com/640/360">
<img src="https://picsum.photos/640/400">
<img src="https://loremflickr.com/640/360">
<img src="https://picsum.photos/600/400">
<img src="https://fillmurray.com/600/330">
<img src="https://picsum.photos/600/400">
<img src="https://fillmurray.com/600/330">
<img src="https://picsum.photos/600/400">
<img src="https://loremflickr.com/640/360">
<img src="https://picsum.photos/600/400">
<img src="https://loremflickr.com/640/360">
<img src="https://picsum.photos/600/400" id="firstClone" alt="">
</div>
</div>
</div>
JS
const slider = document.querySelector('.slider');
const sliderImages = document.querySelectorAll('.slider img');
const leftbtn = document.querySelector('#left');
const rightbtn = document.querySelector('#right');
let counter = 1;
const size = sliderImages[0].clientWidth;
slider.style.transform = 'translateX(' + (-size * counter) + 'vw)';
rightbtn.addEventListener('click', () => {
if (counter >= sliderImages.length - 1) return;
slider.style.transition = "transform 0.4s ease-in";
counter++;
slider.style.transform = 'translateX(' + (-size * counter) + 'vw)'
})
leftbtn.addEventListener('click', () => {
if (counter <= 0) return;
slider.style.transition = "transform 0.4s ease-in";
counter--;
slider.style.transform = 'translateX(' + (-size * counter) + 'vw)'
})
slider.addEventListener('transitionend', () => {
if (sliderImages[counter].id === "lastClone") {
slider.style.transition = "none";
counter = sliderImages.length - 2;
slider.style.transform = 'translateX(' + (-size * counter) + 'vw)'
}
if (sliderImages[counter].id === "firstClone") {
slider.style.transition = "none";
counter = sliderImages.length - counter;
slider.style.transform = 'translateX(' + (-size * counter) + 'vw)'
}
})
CSS
#lookbook {
width: 100vw;
height: 100vh;
}
.lookbook-nav {
width: 70vw;
height: 10vh;
margin-left: 15vw;
margin-top: 45vh;
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
}
button {
border: none;
outline: none;
background: transparent;
font-size: 2rem;
/* font-weight: bold; */
cursor: pointer;
}
.lookbook-nav button {
border: none;
outline: none;
background: transparent;
font-size: 2rem;
/* font-weight: bold; */
cursor: pointer;
}
button:hover {
opacity: 0.4;
}
.lookbook {
width: 56vw;
height: 91vh;
margin: auto;
overflow: hidden;
}
.lookbook img {
width: 100%;
height: auto !important;
}
.slider {
margin-top: 10vh;
display: flex;
width: auto;
}
The answer from #DecjazMach solves the most important problem but doesn't cover everything. For example, the solution also still uses the width of the first image to set the width of the visible slider. This will be fine in many cases, but what if the first image is a skinny tall portrait and the rest landscape or vice versa?
#Laiqa Mohid also welcomed any other suggestions so here are some which come out of trying to simplify things, for example minimising the calculation needed in the JS and the 'work' the system has to do on a click.
You can try it here http://bayeuxtapestry.rgspaces.org.uk/slider
Notes:
The size of the visible portion of the slider is not dependent on the dimensions of the first image
imgs have been replaced with divs + background-image so that different sizes/aspect ratios can be accommodated without any need for javascript calculation - this automatically helps responsiveness
these divs are all of the same dimensions so the amount the slider needs to move does not depend on the size of the image
images that do not fill the whole width (because they are too tall relatively) will be centred
images are also centred vertically. This can be changed if required (e.g. to align to the top of the slider) by changing the background-position in .slider div
Using a transform:translateX works but requires a calculation in the Javascript. We can use CSS animation instead and need only move the currently visible slide and the one that is to be shown next.
The image serving services sometimes did not serve an image so I have used my own - deliberately of different sizes and aspect ratios (including portrait)
Using this method it is possible to have a continuous slider - showing the first slide if the user clicks past the last one.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<meta charset="utf-8">
<style>
#lookbook {
width: 100vw;
height: 100vh;
margin:0;
padding:0;
overflow:hidden;
}
.lookbook-nav {
width: 70vw;
height: 10vh;
margin-left: 15vw;
margin-top: 45vh;
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
}
button {
border: none;
outline: none;
background: transparent;
font-size: 2rem;
/* font-weight: bold; */
cursor: pointer;
}
.lookbook-nav button {
border: none;
outline: none;
background: transparent;
font-size: 2rem;
/* font-weight: bold; */
cursor: pointer;
}
button:hover {
opacity: 0.4;
}
div .lookbook {
width: 56vw;
}
.lookbook {
height: 91vh;
margin: auto;
overflow: hidden;
}
div.slider{
margin:0;
margin-top: 10vh;
height:81vh;/* this is height of (lookbook - margin-top) - probably better done through flex */
position:relative;
top:0;
padding:0;
width:100%;
}
#keyframes slideouttoleft {
from {
left: 0;
visibility:visible;
}
to {
left: -100%;
visibility:hidden;
}
}
#keyframes slideinfromright {
from {
left: 100%;
visibility:visible;
}
to {
left: 0;
visibility:visible;
}
}
#keyframes slideouttoright {
from {
left: 0;
visibility:visible;
}
to {
left: 100%;
visibility:hidden;
}
}
#keyframes slideinfromleft {
from {
left: -100%;
visibility:visible;
}
to {
left: 0;
visibility:visible;
}
}
.slider div {
position:absolute;
top:0;
left:0;
overflow:hidden;
visibility:hidden;
margin: 0;
padding: 0;
width:100%;
height:100%;
background-size: contain;
background-position: center center;
background-repeat: no-repeat no-repeat;
animation-duration: 0.4s;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<div id="lookbook" data-tab-content class="black-text">
<div class="lookbook-nav">
<button id="left">←</button>
<button id="right">→</button>
</div>
<div class="lookbook">
<div class="slider">
<!-- images taken from Reading (UK) Museum's Victorian copy of the Bayeux Tapestry -->
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/boat-and-horses-768x546.png);"></div>
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/two-horses-300x212.png);"></div>
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/woman-and-child-1200x901.png);"></div>
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/archer-2-768x1100.png);"></div>
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/boat-builder-2-878x1024.png);"></div>
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/group-1-768x603.png);"></div>
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/pointing-horseman-768x853.png);"></div>
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/group-2-768x619.png);"></div>
<div style="background-image:url(https://rgspaces.org.uk/bayeuxtapestry/wp-content/uploads/carrying-casket-768x556.png);"></div>
</div>
</div>
</div>
<script>
const slider = document.querySelector('.slider');
const sliderImages = document.querySelectorAll('.slider div');
const leftbtn = document.querySelector('#left');
const rightbtn = document.querySelector('#right');
const numImgs=sliderImages.length;
let curImg = 0;
rightbtn.addEventListener('click', () => {
sliderImages[curImg].style.animationName='slideouttoleft';
curImg=(curImg+1)%numImgs;
sliderImages[curImg].style.animationName='slideinfromright';
})
leftbtn.addEventListener('click', () => {
sliderImages[curImg].style.animationName='slideouttoright';
curImg=curImg==0? numImgs-1 : Math.abs((curImg-1)%numImgs);
sliderImages[curImg].style.animationName='slideinfromleft';
})
function initialize() {
sliderImages[0].style.animationName='slideinfromright';
}
window.onload=initialize;
</script>
</body>
</html>
That is because the size is being calculated in pixels as you can see here. So to get the width in vw you can use the following function as
const size = vw(sliderImages[0].clientWidth);
function vw(v) {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
return (v * w) / 100;
}
For some reason, the images loaded from that source didn't work so I downloaded them locally and they did work and I've done some modification to your CSS as well.
var slider = document.getElementById("slider");
var slides = slider.childElementCount;
var i = 0;
document.getElementById("right").addEventListener("click", function () {
i == slides - 1 ? (i = 0) : i++;
slider.style.transform = "translate(-" + 600 * i + "px)";
});
body {
background-color: aqua;
}
#lookbook {
position: relative;
box-sizing: content-box;
height: auto;
max-width: 600px;
margin: auto;
}
.lookbook-nav {
position: absolute;
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
}
button {
border: none;
outline: none;
background: transparent;
font-size: 2rem;
cursor: pointer;
}
.lookbook-nav button {
border: none;
outline: none;
background: transparent;
font-size: 2rem;
/* font-weight: bold; */
cursor: pointer;
color: beige;
z-index: 2;
}
button:hover {
opacity: 0.4;
}
.lookbook {
width: auto;
height: 91vh;
margin: auto;
overflow: hidden;
}
.lookbook img {
width: 600px;
height: auto !important;
}
.slider {
margin-top: 10vh;
display: flex;
/* align-items: flex-end; */
width: auto;
/* height: 700px; */
transition: 0.5s ease-in-out;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Slider</title>
</head>
<body>
<div id="lookbook" data-tab-content class="black-text">
<div class="lookbook-nav">
<button id="left">←</button>
<button id="right">→</button>
</div>
<div class="lookbook">
<div class="slider" id="slider">
<img src="https://picsum.photos/600/360" alt="" />
<img src="https://picsum.photos/600/360" alt="" />
<img src="https://picsum.photos/600/360" alt="" />
<img src="https://picsum.photos/600/360" alt="" />
<img src="https://picsum.photos/600/360" alt="" />
<img src="https://picsum.photos/600/360" alt="" />
</div>
</div>
</div>
</body>
</html>
I just made one navigation arrow work but should be the same thing just in reverse order also you don't have to worry about the counter as it will detect how many images you have inside the slider.
I'm trying to get a looping slideshow to stop looping after 3 times and have it end on the last frame. It's a 300x250 web banner with 3 different frames.
Any help would be appreciated, thank you!
<style>
#frames {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
width: 300px;
height: 250px;
}
#frames a {
position: absolute;
}
#frames a:nth-of-type(1) {
animation-name: fader;
animation-delay: 3s;
animation-duration: 1s;
z-index: 20;
}
#frames a:nth-of-type(2) {
z-index: 10;
}
#frames a:nth-of-type(n+3) {
display: none;
}
#keyframes fader {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
</style>
<div id="frames">
<img src="01.jpg">
<img src="02.jpg">
<img src="03.jpg">
</div>
<script>
window.addEventListener("DOMContentLoaded", function(e) {
var frames = document.getElementById("frames-1");
var fadeComplete = function(e) { frames.appendChild(arr[0]); };
var arr = frames.getElementsByTagName("a");
for(var i=0; i < arr.length; i++) {
arr[i].addEventListener("animationend", fadeComplete, false);
}
}, false);
</script>
Hey I made an example how you could animate 3 iterations. Note that I wrote some dummy code that is not refactored or a fully implemented slider at all. But it shows the principle.
What happens is that if you click the button it will 'plan' 3 animation cycles at a 5000ms interval.
Alternatively you could recurse the animations instead of planning them to make the code a bit more flexible.
var currentlySelectedNode = 0;
var nodes = document.querySelectorAll('#container>div');
var nextButton = document.getElementById('next');
function showNode( node ) {
node.classList.add('show');
}
function hideNode( node ) {
node.classList.remove('show');
}
function showNextNode() {
hideNode( nodes[currentlySelectedNode] );
if( currentlySelectedNode < nodes.length - 1 )
currentlySelectedNode++;
else
currentlySelectedNode = 0;
showNode( nodes[currentlySelectedNode] );
}
function showNext3Nodes() {
showNextNode();
window.setTimeout( ()=>{
showNextNode();
}, 5000);
window.setTimeout( ()=>{
showNextNode();
}, 10000);
}
nextButton.addEventListener('click', function() {
showNext3Nodes();
});
showNode(nodes[0]);
#container{
position: relative;
height: 100px;
width: 100px;
}
#container>div {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0;
transition: opacity 2s;
}
#container>div.show{
opacity: 1;
}
<div id='container'>
<div class='show' style='background: red'></div>
<div style='background: blue'></div>
<div style='background: green'></div>
<div style='background: yellow'></div>
<div style='background: purple'></div>
<div style='background: orange'></div>
</div>
<button id='next'>Next(3)</button>
Note: You can do the same with css by setting various animation delays to different elements. This would however be quite inflexible.
please add Jquery to your code and use my snippet code.
setTimeout(function(){
$('#frames a').addClass('stop_animation');
},17000);
$('#frames a').click(function(){
$('#frames a').addClass('stop_animation');
});
#frames{
width: 300px;
height: 250px;
overflow:hidden;
position:relative;
}
#frames a{
position:absolute;
animation: fader 6s 3;
-webkit-animation: fader 6s 3;
opacity:0;
width:100%;
height: 100%;
}
#frames a:nth-child(1){-webkit-animation-delay:0s;}
#frames a:nth-child(2){-webkit-animation-delay:2s;}
#frames a:nth-child(3){-webkit-animation-delay:4s;}
#-webkit-keyframes fader{
25%{opacity:1;}
40%{opacity:0;}
}
#frames a.stop_animation{
animation-play-state: paused;
opacity: 1;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Teste</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="frames">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Ad-MediumRectangle-300x250.jpg">
<img src="http://transativafm.com.br/wp-content/uploads/2018/03/anuncie-300x250.png">
<img src="https://www.portalmongagua.com.br/images/anuncios/54dc18565648636b421710d98b2def02.png">
</div>
</body>
</html>
I have made a simple image slider based on this tutorial here. Looks like this:
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;
function cycleItems() {
var item = $('.container div').eq(currentIndex);
items.hide();
item.css('display', 'inline-block');
}
var autoSlide = setInterval(function() {
currentIndex += 0;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);
$('.next').click(function() {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
slide();
});
$('.prev').click(function() {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = itemAmt - 1;
}
cycleItems();
slide();
});
.container {
width: 100%;
height: 100%;
}
.container div {
display: inline-block;
display: none;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.galer-btn {
position: absolute;
z-index: 2;
top: 50%;
}
.next {
right: 40px;
padding: 20% 2% 20% 40%;
margin: -20% -1%;
}
.prev {
left: 40px;
padding: 20% 40% 20% 2%;
margin: -20% -2%;
}
.fa {
font-size: 4vw;
color: #ffd2cf;
}
.fa:hover {
cursor: pointer;
-webkit-animation: bounceright .3s alternate ease infinite;
animation: bounceright .3s alternate ease infinite;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<section class="about">
<i class="fa fa-chevron-right galer-btn next"></i>
<i class="fa fa-chevron-left galer-btn prev"></i>
<div class="container">
<div style="display: inline-block;">
<img src="https://placeimg.com/1000/600/tech" />
</div>
<div>
<img src="https://placeimg.com/1000/600/tech" />
</div>
<div>
<img src="https://placeimg.com/1000/600/tech" />
</div>
<div>
<img src="https://placeimg.com/1000/600/tech" />
</div>
</div>
</section>
</body>
</html>
The result gives me full-screen image slider, which in tutorial is intended to auto slide, but I have managed to disable that by changing currentIndex += 1; to currentIndex += 0; in javascript code. Btw, any recommendations on how to remove the auto slide properly are welcomed.
However, the main question is how do I add some transition effects between images like fade-out etc.?
Also, for left and right buttons I have simply used FontAwesome icons, and it kinda works, but something tells me that might not be the best approach.. Should I use <button> or smthn instead?
So far I have only been learning HTML and CSS, and javascript (or jQuery) is a complete mystery to me right now, so I appreciate any help.