If this is a duplicate apologies I could not find an answer.
I am making a Pure Javascript Slideshow and have nearly done it. However I am facing an issue i cannot seem to resolve.
I cannot get the images to fill the div with 100% width and 100% height. Which once done should slide all images separately, ultimately finishing my slideshow.
Steps taken to resolve:
I have played with the CSS, and changed the position styles between relative and absolute. I have added width:100%; to the divs. I have added in an extra style for the images - #slide li img {width:100%; height:100%}; Yet nothing seems to work. If #slide li img & #slide li & #slide all have width/height at 100% then the first image scales to 100% of the combined images width and height set in the Javascript, Which blows it way out of proportion and will only slide that one image.
I have tried setting the width/height separately in the javascript using document.getElementsByClassName, Yet it still does not fill the contaning div
Here is the code:
function Slide() {
ul = document.getElementById("slide");
liItems = ul.children;
liNumber = liItems.length;
imageNumber = 0;
sliderWidth = 0;
currImg = 0;
// Left + Right Arrows
leftArrow = document.getElementById("left");
rightArrow = document.getElementById("right");
for (i = 0; i < liNumber; i++) {
imageWidth = liItems[i].children[0].clientWidth;
sliderWidth += imageWidth;
imageNumber++;
}
// Set UL's Width as total width of all images in slider.
ul.style.width = parseInt(sliderWidth) + "px";
slider(ul);
function slider(ul) {
animate({
delay: 1000 / 60,
duration: 3000,
delta: function(p) {
return Math.max(0, -1 + 2 * p)
},
step: function(delta) {
ul.style.left = '-' + parseInt(currImg * imageWidth + delta * imageWidth) + "px";
},
callback: function() {
currImg++;
//Keep sliding if not last image
if (currImg < liNumber - 1) {
slider(ul);
}
// Slide back to first image, if last image
else {
leftPosition = (liNumber - 1) * imageWidth;
//after set seconds, call goback for first image
setTimeout(function() {
goBack(leftPosition)
}, 2000);
setTimeout(function() {
slider(ul)
}, 3000);
}
}
});
function goBack(leftPosition) {
currImg = 0;
setInterval(function() {
if (leftPosition >= 0) {
ul.style.left = '-' + parseInt(leftPosition) + "px";
leftPosition -= imageWidth;
}
}, 1000 / 60);
}
function animate(opts) {
start = new Date;
id = setInterval(function() {
timePassed = new Date - start;
progress = timePassed / opts.duration
if (progress > 1) {
progress = 1;
}
delta = opts.delta(progress);
opts.step(delta);
if (progress == 1) {
clearInterval(id);
opts.callback();
}
}, opts.delay || 1000 / 60);
}
}
}
window.onload = Slide;
#slidecontainer {
height: 100%;
width: 100%;
overflow: hidden;
}
#slide {
position: relative;
z-index: 0;
list-style-type: none;
padding: 0;
}
#slide li {
position: relative;
left: 0;
top: 4%;
margin: 0;
padding: 0;
float: left;
width: 25%;
/* Adjust this value within the range of images i.e 4 images = 25%, 5 images = 20% */
}
.slideimg {
width: 100%;
height: 100%;
}
<div id="slidecontainer">
<ul id="slide">
<li>
<img src="images/style.jpg" alt="1" class="slideimg" />
</li>
<li>
<img src="images/style1.jpg" alt="2" class="slideimg" />
</li>
<li>
<img src="images/style2.jpg" alt="3" class="slideimg" />
</li>
<li>
<img src="images/style3.jpg" alt="4" class="slideimg" />
</li>
</ul>
</div>
Please do not give a jquery solution, It needs to be Vanilla.
1. 100% height
If you want to scale things to 100% of the height of the window, you'll need to make sure enough (when using position: static) or all (when using position: relative) parent elements also use 100% of the height.
In a stack snippet, this means adding these rules to both html and body, and to all of your own elements.
2. 100% width
The width is a bit easier, because every display: block element will automatically fill up its parent. To be certain, you can just add a width: 100% rule to all of the previously mentioned elements.
The problem your css had, was that each float had a width of 25% relative to its parent, which only had a width of 100%. Changing this to 400% (the number of slides * 100), fixes the width.
Here's an example of just the full screen slides. Note:
I'd swap the tag and id selectors with class selectors if I were you
I'd use display: flex on the ul and flex-grow: 1 on the lis instead of float, but both will work.
html,
body,
#slidecontainer,
#slide,
li,
img {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
position: relative;
}
/* turn this rule on and scroll via js to slide */
#slidecontainer {
/* overflow-x: hidden; */
}
#slide {
width: 400%; /* (100 * slideCount) */
}
li {
float: left;
width: 25%; /* (100 / slideCount) */
list-style: none;
}
img {
display: block;
background: #efefef;
}
<div id="slidecontainer">
<ul id="slide">
<li>
<img src="images/style.jpg" alt="1" class="slideimg" />
</li>
<li>
<img src="images/style1.jpg" alt="2" class="slideimg" />
</li>
<li>
<img src="images/style2.jpg" alt="3" class="slideimg" />
</li>
<li>
<img src="images/style3.jpg" alt="4" class="slideimg" />
</li>
</ul>
</div>
Bonus: without javascript
Now, just for fun, here's an implementation without javascript :) It's quite some work to change the number of slides though, so I'd go with a hybrid approach or use a css pre-processor to generate the animation keyframes if I were you. (Only tested in chrome)
html, body, #slidecontainer {
width: 100%;
height: 100%;
overflow-x: hidden;
}
* {
padding: 0;
margin: 0;
position: relative;
box-sizing: border-box;
}
#slide {
position: relative;
width: 400%;
height: 100%;
display: flex;
animation-duration: 7s;
animation-name: slide;
animation-iteration-count: infinite;
}
#slide > li {
flex-grow: 1;
list-style: none;
}
.slideimg {
width: 100%;
height: 100%;
}
#keyframes slide {
0% {
transform: translate3d(0, 0, 0);
}
20% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(-25%, 0, 0);
}
45% {
transform: translate3d(-25%, 0, 0);
}
50% {
transform: translate3d(-50%, 0, 0);
}
70% {
transform: translate3d(-50%, 0, 0);
}
75% {
transform: translate3d(-75%, 0, 0);
}
95% {
transform: translate3d(-75%, 0, 0);
}
}
<div id="slidecontainer">
<ul id="slide">
<li style="background: green;">
<img src="images/style.jpg" alt="1" class="slideimg" />
</li>
<li style="background: blue;">
<img src="images/style1.jpg" alt="2" class="slideimg" />
</li>
<li style="background: yellow;">
<img src="images/style2.jpg" alt="3" class="slideimg" />
</li>
<li style="background: red;">
<img src="images/style3.jpg" alt="4" class="slideimg" />
</li>
</ul>
</div>
Related
I am making a vanilla js carousel. I have laid out basic previous and next functionality using js along with html and css.
Now I tried to use css-animations (keyframes) to do left and right slide-in/slide-out animations but the code became messy for me. So here I am asking that what minimal changes would be needed to get the same animation effects in this implementation ?
Will you go for pure JS based or pure CSS based or a mix to do the same ?
My goal is get proper animation with minimal code.
(function () {
let visibleIndex = 0;
let carousalImages = document.querySelectorAll(".carousal__image");
let totalImages = [...carousalImages].length;
function makeNextVisible() {
visibleIndex++;
if (visibleIndex > totalImages - 1) {
visibleIndex = 0;
}
resetVisible();
renderVisible();
}
function makePrevVisible() {
visibleIndex--;
if (visibleIndex < 0) {
visibleIndex = totalImages - 1;
}
resetVisible();
renderVisible();
}
function resetVisible() {
for (let index = 0; index < totalImages; index++) {
carousalImages[index].className = "carousal__image";
}
}
function renderVisible() {
carousalImages[visibleIndex].className = "carousal__image--visible";
}
function renderCarousel({ autoplay = false, autoplayTime = 1000 } = {}) {
if (autoplay) {
[...document.querySelectorAll("button")].forEach(
(btn) => (btn.style.display = "none")
);
setInterval(() => {
makeNextVisible();
}, autoplayTime);
} else renderVisible();
}
renderCarousel();
// Add {autoplay:true} as argument to above to autplay the carousel.
this.makeNextVisible = makeNextVisible;
this.makePrevVisible = makePrevVisible;
})();
.carousal {
display: flex;
align-items: center;
}
.carousal__wrapper {
width: 500px;
height: 400px;
}
.carousal__images {
display: flex;
overflow: hidden;
list-style-type: none;
padding: 0;
}
.carousal__image--visible {
position: relative;
}
.carousal__image {
display: none;
}
<div class='carousal'>
<div class='carousal__left'>
<button onclick='makePrevVisible()'>Left</button>
</div>
<section class='carousal__wrapper'>
<ul class='carousal__images'>
<li class='carousal__image'>
<img src='https://fastly.syfy.com/sites/syfy/files/styles/1200x680/public/2018/03/dragon-ball-super-goku-ultra-instinct-mastered-01.jpg?offset-x=0&offset-y=0' alt='UI Goku' / width='500' height='400'/>
</li>
<li class='carousal__image'>
<img src='https://www.theburnin.com/wp-content/uploads/2019/01/super-broly-3.png' alt='Broly Legendary' width='500' height='400'/>
</li>
<li class='carousal__image'>
<img src='https://lh3.googleusercontent.com/proxy/xjEVDYoZy8-CTtPZGsQCq2PW7I-1YM5_S5GPrAdlYL2i4SBoZC-zgtg2r3MqH85BubDZuR3AAW4Gp6Ue-B-T2Z1FkKW99SPHwAce5Q_unUpwtm4' alt='Vegeta Base' width='500' height='400'/>
</li>
<li class='carousal__image'>
<img src='https://am21.mediaite.com/tms/cnt/uploads/2018/09/GohanSS2.jpg' alt='Gohan SS2' width='500' height='400'/>
</li>
</ul>
</section>
<div class='carousal__right'>
<button onclick='makeNextVisible()'>Right</button>
</div>
</div>
Updated codepen with feedback from the below answers and minor additional functionalities = https://codepen.io/lapstjup/pen/RwoRWVe
I think the trick is pretty simple. ;)
You should not move one or two images at the same time. Instead you should move ALL images at once.
Let's start with the CSS:
.carousal {
position: relative;
display: block;
}
.carousal__wrapper {
width: 500px;
height: 400px;
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.carousal__wrapper,
.carousal__images {
transform: translate3d(0, 0, 0);
}
.carousal__images {
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.carousal__image {
float: left;
height: 100%;
min-height: 1px;
}
2nd step would be to calculate the maximum width for .carousal__images. For example in your case 4 * 500px makes 2000px. This value must be added to your carousal__images as part of the style attribute style="width: 2000px".
3rd step would be to calculate the next animation point and using transform: translate3d. We start at 0 and want the next slide which means that we have slide to the left. We also know the width of one slide. So the result would be -500px which also has to be added the style attribute of carousal__images => style="width: 2000px; transform: translate3d(-500px, 0px, 0px);"
That's it.
Link to my CodePen: Codepen for Basic Carousel with Autoplay
Try this. First stack all the images next to each other in a div and only show a single image at a time by setting overflow property to hidden for the div. Next, add event listeners to the buttons. When a bottom is clicked, the div containing the images is translated by -{size of an image} * {image number} on the x axis. For smooth animation, add transition: all 0.5s ease-in-out; to the div.
When someone clicks left arrow on the first image, the slide should display the last image. So for that counter is set to {number of images} - 1 and image is translated to left size * counter px.
For every click on the right arrow, the counter is incremented by 1 and slide is moved left. For every click on the left arrow, the counter is decremented by 1.
Slide.style.transform = "translateX(" + (-size * counter) + "px)"; this is the condition which is deciding how much the slide should be translated.
const PreviousButton = document.querySelector(".Previous-Button");
const NextButton = document.querySelector(".Next-Button");
const Images = document.querySelectorAll("img");
const Slide = document.querySelector(".Images");
const size = Slide.clientWidth;
var counter = 0;
// Arrow Click Events
PreviousButton.addEventListener("click", Previous);
NextButton.addEventListener("click", Next);
function Previous() {
counter--;
if (counter < 0) {
counter = Images.length - 1;
}
Slide.style.transform = "translateX(" + (-size * counter) + "px)";
}
function Next() {
counter++;
if (counter >= Images.length) {
counter = 0;
}
Slide.style.transform = "translateX(" + (-size * counter) + "px)";
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.Container {
width: 60%;
margin: 0px auto;
margin-top: 90px;
overflow: hidden;
position: relative;
}
.Container .Images img {
width: 100%;
}
.Images {
transition: all 0.5s ease-in-out;
}
.Container .Previous-Button {
position: absolute;
background: transparent;
border: 0px;
outline: 0px;
top: 50%;
left: 20px;
transform: translateY(-50%);
filter: invert(80%);
z-index: 1;
}
.Container .Next-Button {
position: absolute;
background: transparent;
border: 0px;
outline: 0px;
top: 50%;
right: 20px;
transform: translateY(-50%);
filter: invert(80%);
z-index: 1;
}
.Container .Images {
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css2?family=Cabin&family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Carousel</title>
</head>
<body>
<div class="Container">
<button class="Previous-Button">
<svg style = "transform: rotate(180deg);" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z"/></svg>
</button>
<button class="Next-Button">
<svg xmlns="http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24"><path d="M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z"/></svg>
</button>
<div class="Images">
<img src="https://source.unsplash.com/1280x720/?nature">
<img src="https://source.unsplash.com/1280x720/?water">
<img src="https://source.unsplash.com/1280x720/?rock">
<img src="https://source.unsplash.com/1280x720/?abstract">
<img src="https://source.unsplash.com/1280x720/?nature">
<img src="https://source.unsplash.com/1280x720/?trees">
<img src="https://source.unsplash.com/1280x720/?human">
<img src="https://source.unsplash.com/1280x720/?tech">
</div>
</div>
<script src="main.js"></script>
</body>
</html>
I am new to css and html and I do not know much about javascript. I found this js code on code pen, it works fine except on touchscreen. how do I get the contents of my div to scroll on touchscreen? Probably adding some code in the script to detect the touchsreen and disable the mousemove and replace the overflow: hidden with overflow-x: auto but I have no idea how to do this.
Thank you
$(function() {
$(window).load(function() {
var $gal = $("#scrolling-wrapper"),
galW = $gal.outerWidth(true),
galSW = $gal[0].scrollWidth,
wDiff = (galSW / galW) - 1, // widths difference ratio
mPadd = 60, // mousemove Padding
damp = 20, // Mmusemove response softness
mX = 0, // real mouse position
mX2 = 0, // modified mouse position
posX = 0,
mmAA = galW - (mPadd * 2), // the mousemove available area
mmAAr = (galW / mmAA); // get available mousemove didderence ratio
$gal.mousemove(function(e) {
mX = e.pageX - $(this).parent().offset().left - this.offsetLeft;
mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;
});
setInterval(function() {
posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"
$gal.scrollLeft(posX * wDiff);
}, 10);
});
});
#scrolling-wrapper {
white-space: nowrap;
max-width: 960px;
height: 425px;
overflow: hidden;
}
#musees {
background-image: url('https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_BG.jpg');
width: 2600px;
height: 425px;
}
.muse1 {
left: 55px;
top: 90px;
}
.muse2 {
left: 340px;
top: -15px;
}
.muse3 {
left: 575px;
top: 75px;
}
.muse4 {
left: 750px;
top: 20px;
}
.muse5 {
left: 1175px;
top: 75px;
}
.muse6 {
left: 1510px;
top: 75px;
}
.muse7 {
left: 1640px;
top: 15px;
}
.muse8 {
left: 1885px;
top: 55px;
}
.muse9 {
left: 2155px;
top: 55px;
}
/* A wrapper for your images to transition */
.transition-wrapper {
position: relative;
display: inline-block
}
/* Position each image and apply a transition */
.transition-wrapper img {
position: absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
/* Automatically hide an image during hover (to reveal the other one) */
.transition-wrapper img:last-of-type:hover {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="scrolling-wrapper">
<div id="musees">
<a class="transition-wrapper muse1" href="SallesID.php?Type_No=33&ID_Article=5&SalleID=1">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle01Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle01.png">
</a>
<a class="transition-wrapper muse2" href="SallesID.php?Type_No=33&ID_Article=6&SalleID=2">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle02Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle02.png">
</a>
<a class="transition-wrapper muse3" href="SallesID.php?Type_No=33&ID_Article=7&SalleID=3">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle03Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle03.png">
</a>
<a class="transition-wrapper muse4" href="SallesID.php?Type_No=33&ID_Article=8&SalleID=4">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/images/ExpoVirtuel_Salle04Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle04.png">
</a>
<a class="transition-wrapper muse5" href="SallesID.php?Type_No=33&ID_Article=14&SalleID=5">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle05Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle05.png">
</a>
<a class="transition-wrapper muse6" href="SallesID.php?Type_No=33&ID_Article=15&SalleID=6">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle06Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle06.png">
</a>
<a class="transition-wrapper muse7" href="SallesID.php?Type_No=33&ID_Article=16&SalleID=7">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle07Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle07.png">
</a>
<a class="transition-wrapper muse8" href="SallesID.php?Type_No=33&ID_Article=22&SalleID=8">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle08Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle08.png">
</a>
<a class="transition-wrapper muse9" href="SallesID.php?Type_No=33&ID_Article=98&SalleID=28">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle09Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle09.png">
</a>
</div>
</div>
<script src="js/script.js"></script>
You need a similar event to the one you sense here:
$gal.mousemove(function(e) {
mX = e.pageX - $(this).parent().offset().left - this.offsetLeft;
mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;
});
but things are a little different on a touch screen - largely because humans have several fingers and the touch events need to be able to tell you how many are on the screen. You are only interested in the user moving along the gallery so the first setting in the touchmove event will be the one you are interested in.
e.touches[0].clientX
I am not very familiar with jQuery and can't see that it has a touchmove method in the same way that it has a mousemove, so here is a suggestion using addEventListener. The snippet is working for me on an iPad IOS 14.
$(function() {
$(window).load(function() {
var $gal = $("#scrolling-wrapper"),
galW = $gal.outerWidth(true),
galSW = $gal[0].scrollWidth,
wDiff = (galSW / galW) - 1, // widths difference ratio
mPadd = 60, // mousemove Padding
damp = 20, // Mmusemove response softness
mX = 0, // real mouse position
mX2 = 0, // modified mouse position
posX = 0,
mmAA = galW - (mPadd * 2), // the mousemove available area
mmAAr = (galW / mmAA); // get available mousemove didderence ratio
$gal.mousemove(function(e) {
mX = e.pageX - $(this).parent().offset().left - this.offsetLeft;
mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;
});
document.getElementById('scrolling-wrapper').addEventListener('touchmove',(function(e) {
mX = e.touches[0].clientX - $(this).parent().offset().left - this.offsetLeft;
mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;
}));
setInterval(function() {
posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"
$gal.scrollLeft(posX * wDiff);
}, 10);
});
});
#scrolling-wrapper {
white-space: nowrap;
max-width: 960px;
height: 425px;
overflow: hidden;
}
#musees {
background-image: url('https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_BG.jpg');
width: 2600px;
height: 425px;
}
.muse1 {
left: 55px;
top: 90px;
}
.muse2 {
left: 340px;
top: -15px;
}
.muse3 {
left: 575px;
top: 75px;
}
.muse4 {
left: 750px;
top: 20px;
}
.muse5 {
left: 1175px;
top: 75px;
}
.muse6 {
left: 1510px;
top: 75px;
}
.muse7 {
left: 1640px;
top: 15px;
}
.muse8 {
left: 1885px;
top: 55px;
}
.muse9 {
left: 2155px;
top: 55px;
}
/* A wrapper for your images to transition */
.transition-wrapper {
position: relative;
display: inline-block
}
/* Position each image and apply a transition */
.transition-wrapper img {
position: absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
/* Automatically hide an image during hover (to reveal the other one) */
.transition-wrapper img:last-of-type:hover {
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="scrolling-wrapper">
<div id="musees">
<a class="transition-wrapper muse1" href="SallesID.php?Type_No=33&ID_Article=5&SalleID=1">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle01Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle01.png">
</a>
<a class="transition-wrapper muse2" href="SallesID.php?Type_No=33&ID_Article=6&SalleID=2">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle02Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle02.png">
</a>
<a class="transition-wrapper muse3" href="SallesID.php?Type_No=33&ID_Article=7&SalleID=3">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle03Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle03.png">
</a>
<a class="transition-wrapper muse4" href="SallesID.php?Type_No=33&ID_Article=8&SalleID=4">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/images/ExpoVirtuel_Salle04Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle04.png">
</a>
<a class="transition-wrapper muse5" href="SallesID.php?Type_No=33&ID_Article=14&SalleID=5">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle05Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle05.png">
</a>
<a class="transition-wrapper muse6" href="SallesID.php?Type_No=33&ID_Article=15&SalleID=6">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle06Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle06.png">
</a>
<a class="transition-wrapper muse7" href="SallesID.php?Type_No=33&ID_Article=16&SalleID=7">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle07Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle07.png">
</a>
<a class="transition-wrapper muse8" href="SallesID.php?Type_No=33&ID_Article=22&SalleID=8">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle08Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle08.png">
</a>
<a class="transition-wrapper muse9" href="SallesID.php?Type_No=33&ID_Article=98&SalleID=28">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle09Glow.png">
<img src="https://www.pd6r.com/_DEV_charlesdaudelin/musees_test/images/ExpoVirtuel_Salle09.png">
</a>
</div>
</div>
<script src="js/script.js"></script>
I found a pen online to create image carousel, problem is I can't get it display 3 items inside a container.
I have tried removing the opacity for the carousel photo but then it messes up the display for the full container.
Here is link to my fiddle:
!(function(d) {
// Variables to target our base class, get carousel items, count how many carousel items there are, set the slide to 0 (which is the number that tells us the frame we're on), and set motion to true which disables interactivity.
var itemClassName = "carousel__photo";
items = d.getElementsByClassName(itemClassName),
totalItems = items.length,
slide = 0,
moving = false;
// To initialise the carousel we'll want to update the DOM with our own classes
function setInitialClasses() {
// Target the last, initial, and next items and give them the relevant class.
// This assumes there are three or more items.
items[totalItems - 1].classList.add("prev");
items[0].classList.add("active");
items[1].classList.add("next");
}
// Set click events to navigation buttons
function setEventListeners() {
var next = d.getElementsByClassName('carousel__button--next')[0],
prev = d.getElementsByClassName('carousel__button--prev')[0];
next.addEventListener('click', moveNext);
prev.addEventListener('click', movePrev);
}
// Disable interaction by setting 'moving' to true for the same duration as our transition (0.5s = 500ms)
function disableInteraction() {
moving = true;
setTimeout(function() {
moving = false
}, 500);
}
function moveCarouselTo(slide) {
// Check if carousel is moving, if not, allow interaction
if (!moving) {
// temporarily disable interactivity
disableInteraction();
// Preemptively set variables for the current next and previous slide, as well as the potential next or previous slide.
var newPrevious = slide - 1,
newNext = slide + 1,
oldPrevious = slide - 2,
oldNext = slide + 2;
// Test if carousel has more than three items
if ((totalItems - 1) > 3) {
// Checks if the new potential slide is out of bounds and sets slide numbers
if (newPrevious <= 0) {
oldPrevious = (totalItems - 1);
} else if (newNext >= (totalItems - 1)) {
oldNext = 0;
}
// Check if current slide is at the beginning or end and sets slide numbers
if (slide === 0) {
newPrevious = (totalItems - 1);
oldPrevious = (totalItems - 2);
oldNext = (slide + 1);
} else if (slide === (totalItems - 1)) {
newPrevious = (slide - 1);
newNext = 0;
oldNext = 1;
}
// Now we've worked out where we are and where we're going, by adding and removing classes, we'll be triggering the carousel's transitions.
// Based on the current slide, reset to default classes.
items[oldPrevious].className = itemClassName;
items[oldNext].className = itemClassName;
// Add the new classes
items[newPrevious].className = itemClassName + " prev";
items[slide].className = itemClassName + " active";
items[newNext].className = itemClassName + " next";
}
}
}
// Next navigation handler
function moveNext() {
// Check if moving
if (!moving) {
// If it's the last slide, reset to 0, else +1
if (slide === (totalItems - 1)) {
slide = 0;
} else {
slide++;
}
// Move carousel to updated slide
moveCarouselTo(slide);
}
}
// Previous navigation handler
function movePrev() {
// Check if moving
if (!moving) {
// If it's the first slide, set as the last slide, else -1
if (slide === 0) {
slide = (totalItems - 1);
} else {
slide--;
}
// Move carousel to updated slide
moveCarouselTo(slide);
}
}
// Initialise carousel
function initCarousel() {
setInitialClasses();
setEventListeners();
// Set moving to false now that the carousel is ready
moving = false;
}
// make it rain
initCarousel();
}(document));
/* Parent wrapper to carousel. Width can be changed as needed. */
.carousel-wrapper {
overflow: hidden;
width: 90%;
margin: auto;
}
.carousel-custom-section {
width: 100%;
display: flex;
}
.carousel-single-item {
width: 33%;
display: flex;
}
.carousel-single-item-row {
display: flex;
width: 33%;
flex-direction: row;
}
.carousel-wrapper * {
box-sizing: border-box;
}
.carousel {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.carousel__photo {
opacity: 0;
position: absolute;
top: 0;
width: 100%;
margin: auto;
padding: 1rem 4rem;
z-index: 100;
/* transition: transform .5s, opacity .5s, z-index .5s; */
}
.carousel__photo.initial,
.carousel__photo.active {
opacity: 1;
position: relative;
z-index: 900;
}
.carousel__photo.prev,
.carousel__photo.next {
z-index: 800;
}
/* Style navigation buttons to sit in the middle, either side of the carousel. */
.carousel__button--prev,
.carousel__button--next {
position: absolute;
top: 50%;
width: 3rem;
height: 3rem;
background-color: #FFF;
transform: translateY(-50%);
border-radius: 50%;
cursor: pointer;
z-index: 1001;
}
.carousel__button--prev {
left: 0;
}
.carousel__button--next {
right: 0;
}
/* Use pseudo elements to insert arrows inside of navigation buttons */
.carousel__button--prev::after,
.carousel__button--next::after {
content: " ";
position: absolute;
width: 10px;
height: 10px;
top: 50%;
left: 54%;
border-right: 2px solid black;
border-bottom: 2px solid black;
transform: translate(-50%, -50%) rotate(135deg);
}
.carousel__button--next::after {
left: 47%;
transform: translate(-50%, -50%) rotate(-45deg);
}
<div class="carousel-wrapper">
<div class="carousel">
<div class="carousel-custom-section">
<div class="carousel-single-item">
<img class="carousel__photo initial" src="https://via.placeholder.com/150/0000FF/808080?text=one">
</div>
<div class="carousel-single-item">
<img class="carousel__photo" src="https://via.placeholder.com/150/FF0000/808080?text=two">
</div>
<div class="carousel-single-item">
<img class="carousel__photo" src="https://via.placeholder.com/150/00FF00/808080?text=three">
</div>
</div>
<div class="carousel-custom-section">
<div class="carousel-single-item">
<img class="carousel__photo" src="https://via.placeholder.com/150/FF0000/808080?text=four">
</div>
<div class="carousel-single-item">
<img class="carousel__photo" src="https://via.placeholder.com/150/00FF00/808080?text=five">
</div>
<div class="carousel-single-item">
<img class="carousel__photo" src="https://via.placeholder.com/150/00FF00/808080?text=six">
</div>
</div>
<div class="carousel__button--next"></div>
<div class="carousel__button--prev"></div>
</div>
</div>
Can somebody please point me in right direction what I am doing wrong?
I have a website, where I want to change between images in the background very smoothly. This is my actual javaScript-code for it:
var bg=[
'images/best.jpg',
'images/61182.jpg',
'images/bg.jpg'
];
$('._container-1').css('background-image','url('+bg[2]+')');
window.setInterval(
function(){
img=bg.shift();bg.push(img);
document.getElementsByClassName('_container-1')[0].style.backgroundImage='url('+img+')';
},
10000
);
Now, I want to change the images very slowly. I have tried a lot with jQuery-fadeIn/fadeOut-methods like this:
window.setInterval(
function(){
img=bg.shift();
bg.push(img);
$('._container-1').fadeOut(600, function() {
$('._container-1').css('background-image','url('+img+')');
$('._container-1').fadeIn(600);
});
},
17000
);
The problem is, that there are buttons and text in the container and they changes with the images. I want that the text and buttons are in the front all the time, only the background should fadeIn/fadeOut. My english is not perfect, I hope you understand my problem.
Can somebody help me please?
nina_berlini
I have uses 2 elements as background to achieve the effect. Also check demo on https://jsfiddle.net/n380u3cy/1/
HTML:
<div class="container">
<div class="background"></div>
<div class="background"></div>
<button>
Test button
</button>
</div>
CSS:
.container { position: relative; line-height: 100px; }
.container > .background,
.container > .background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: contain; z-index: 0; }
.container > *:not(.background) { position: relative; z-index: 1; }
Javascript:
var bg=[
'images/best.jpg',
'images/61182.jpg',
'images/bg.jpg'
];
var Transition = 1000;
$('.background').css('background-image','url('+bg[bg.length - 1]+')');
window.setInterval(
function() {
img=bg.shift();
bg.push(img);
var $Backgrounds = $('.background');
$Backgrounds.eq(1).hide(0).css({
'background-image': 'url('+img+')'
}).fadeIn(Transition * .9);
$Backgrounds.eq(0).show(0).fadeOut(Transition, function(){
$(this).show(0).css({
'background-image': 'url('+img+')'
});
$Backgrounds.eq(1).hide(0);
});
}, 2000
);
Make a wrapper and include both the background div and button div inside it with position absolute and the following CSS styles. This way you can control and animate the background separately from the buttons.
var bg = [
'https://placehold.it/1001x201',
'https://placehold.it/1002x202',
'https://placehold.it/1003x203'
];
$('._container-1').css('background-image', 'url(' + bg[2] + ')');
window.setInterval(
function() {
img = bg.shift();
bg.push(img);
document.getElementsByClassName('_container-1')[0].style.backgroundImage = 'url(' + img + ')';
},
10000
);
window.setInterval(
function() {
img = bg.shift();
bg.push(img);
$('._container-1').fadeOut(600, function() {
$('._container-1').css('background-image', 'url(' + img + ')');
$('._container-1').fadeIn(600);
});
},
17000
);
.wrapper {
position: relative;
width: 100%;
height: 200px;
}
._container-1 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: cover;
background-position: top center;
}
.buttons {
position: absolute;
width: 100%;
text-align: center;
bottom: 0;
left: 0;
}
button {
background: red;
padding: 5px 10px;
border: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="_container-1"></div>
<div class="buttons">
<button type="button">
Button 1
</button>
<button type="button">
Button 2
</button>
</div>
</div>
thank you for your great solution. I am not well familiar with jQuery and have a question about your code:
$Backgrounds.eq(1).hide(0).css({
'background-image': 'url('+img+')'
}).fadeIn(Transition * .9);
means it that the second "background-div" first hides, then get a new background-image and after that it ist fadeIn? And means hide(0) that it immediately hides?
nina_berlini
I have a slideshow that pulls its first image from a div, then pulls the rest of the images from an array of list items. I am following a tutorial exactly from The JavaScript Pocket Guide by Burdette (2010 printing), and while everything else works I cannot get any of the pictures after the first to center or align differently. They float left and to the top of the div.
HMTL:
<!DOCTYPE html>
<hmtl class="no-js">
<head>
<title>Slideshow</title>
<link rel="stylesheet" href="slideshow.css" type="text/css" />
<script type="text/javascript">
(function(d, c) { d[c] = d[c].replace(/\bno-js\b/,"js";})(document.documentElement, "className");
</script>
</head>
<body>
<div id="slideshow">
<div class="slides">
<img src="picture01.jpg" width="450" height="336" alt="stuff" />
</div>
<ul>
<li><a href="picture02.jpg" data-size="350x263"</li>
<li><a href="picture03.jpg" data-size="350x263"</li>
<li><a href="picture04.jpg" data-size="350x263"</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript">
</script>
<script src="slideshow.js" type="text/javascript">
</script>
</body>
</hmtl>
CSS:
#slideshow {
background-color: #103f1c;
width:500px;
height:450px;
margin-left: auto;
margin-right: auto;
top:0px;
position: relative;
}
#slideshow .slides {
position: relative;
margin-left: auto;
margin-right: auto;
width: 450px;
}
#html.js #slideshow .slides img{
position: absolute;
margin-left: auto;
margin-right: auto;
}
#slideshow .next,
#slideshow .prev {
position: absolute;
top: 50%;
margin-top: -0.5em;
width: 40px;
font-size: 32px;
text-decoration: none;
}
#slideshow .next{
right: -50px;
padding-left:10px;
}
#slideshow .prev {
left:-50px;
padding-right: 10px;
text-align: right;
}
JS:
(function($) {
// Include utility jQuery plug-ins
$.fn.tallest = function(outer, margins) {
var fn = outer ? "height" : "outerHeight";
return Math.max.apply(Math, $.map(this, function(el) {
return $(el)[fn](margins);
}));
};
$.fn.widest = function(outer, margins) {
var fn = outer ? "width" : "outerWidth";
return Math.max.apply(Math, $.map(this, function(el) {
return $(el)[fn](margins);
}));
};
// Declare initial variables
var slideshow = $("#slideshow");
var slides = slideshow.find(".slides");
var currentImageIndex = 0;
// Create images from the link list
slideshow.find("ul a").each(function() {
var link = $(this);
var size = link.attr("data-size").split("x");
$("<img />").attr({
src : link.attr("href"),
width : size[0],
height : size[1],
alt : link.text()
}).hide().appendTo(slides);
});
// Collect all images in one node set and hide the list
var images = slides.find("img");
slideshow.find("ul").hide();
// Resize slides <div> to hold the largest images
var slidesWidth = images.widest();
var slidesHeight = images.tallest();
slides.css({
width : slidesWidth,
height : slidesHeight
});
// Center each image
images.each(function() {
var image = $(this);
image.css({
left: slidesHeight / 2 - image.width() / 2,
top: slidesHeight / 2 - image.height() / 2,
});
});
// Save a reference to the first image
var activeImage = images.eq(currentImageIndex);
// The function to show the next or previous image
function showImage(newIndex) {
currentImageIndex = newIndex >= images.length ? 0 : newIndex;
currentImageIndex = currentImageIndex < 0 ? images.length - 1 : currentImageIndex;
activeImage.fadeOut(0);
activeImage = images.eq(currentImageIndex).fadeIn(150);
}
// Start timer to cycle through images
var interval = setInterval(function() {
showImage(currentImageIndex + 1);
}, 5000);
// Create next and previous controls
$('\u232A').appendTo(slides).bind("click", +1, onClick);
$('\u2329').appendTo(slides).bind("click", -1, onClick);
// The event handler for the controls
function onClick(event) {
event.preventDefault();
clearInterval(interval);
showImage(currentImageIndex + event.data);
}
})(jQuery); // Self-invoking function executes automatically
The main problem here is in your CSS:
#html.js #slideshow .slides img{
position: absolute;
margin-left: auto;
margin-right: auto;
}
Margin: auto; will only work on objects that have a defined width. Since an image is a replaced inline-block, no real width exists. This is made worse by the fact that you've positioned it absolutely, which changes the way margins will work - the item will always pick up its position relative to the determined parent, and apply margins after that outside of the flow, so auto will not be relevant.
first step is to remove the absolute positioning on the image, it's not useful here.
By default, images are a type of inline-block, so simply adding "text-align:center;" to the "#slideshow .slides" selector will center the images.
Alternately, if we just want to edit the images and force them to center themselves, change the above block to:
#html.js #slideshow .slides img{
display:block;
margin-left: auto;
margin-right: auto;
}
and everything should line up like you wanted.