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.
Related
I am currently building a website and I want a aesthetically pleasing landing page with a background fade in and out slideshow comprised of pictures that repeat y and x. I have the fading slideshow working perfectly and all I need is to repeat the image across the screen. Adding background: repeat to the CSS does not work. Below is may code:
HTML:
<div class="mybody" id="slider">
<div>
<h2>Dog Adoption</h2>
<p>Find the perfect match for your new four legged companion</p>
</div>
</div>
JavaScript:
var curIndex = 0,
imgDuration = 3000,
slider = document.getElementById("slider"),
slides = slider.childNodes; //get a hook on all child elements, this is live so anything we add will get listed
imgArray = [
'../../static/main/images/slideshow/dog2.jpg',
'../../static/main/images/slideshow/dog3.jpg',
'../../static/main/images/slideshow/dog4.jpg',
'../../static/main/images/slideshow/dog1.jpg',
];
//
// Dynamically add each image frame into the dom;
//
function buildSlideShow(arr) {
for (i = 0; i < arr.length; i++) {
var img = document.createElement('img');
img.src = arr[i];
slider.appendChild(img);
}
// note the slides reference will now contain the images so we can access them
}
//
// Our slideshow function, we can call this and it flips the image instantly, once it is
called it will roll
// our images at given interval [imgDuration];
//
function slideShow() {
function fadeIn(e) {
e.className = "fadeIn";
};
function fadeOut(e) {
e.className = "";
};
fadeOut(slides[curIndex]);
curIndex++;
if (curIndex === slides.length) {
curIndex = 0;
}
fadeIn(slides[curIndex]);
setTimeout(function () {
slideShow();
}, imgDuration);
};
buildSlideShow(imgArray);
slideShow();
CSS:
.mybody{
width: 100%;
min-height: 100vh;
max-height: fit-content;
top: 0px;
left: 0px;
padding: 0px;
/*background: url(../images/slideshow/dog1.jpg);*/
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0px;
position: relative;
background-repeat: repeat;
}
.mybody img {
transition: opacity 1.5s;
position: absolute;
left: 0;
top: 0;
opacity:0;
background-repeat: repeat;
}
.mybody img.fadeIn {
opacity:1;
}
When I just set the background image as a fixed image (no JS) I get the desired result:
However when I comment out the backgorund image (as in above code) and just have the JS slideshow as the background, this is the result:
I essentially just need this image from the second picture to repeat as in the first picture and cannot figure out how to make this happen although I am sure there is a simple fix/solution. If anyone could be of help it would be much appreciated. Thanks in advance!
You can't repeat an image without duplicating it. But you can repeat background so, you can make the slide using divs with background. Note the usage of css classes instead of jquery fade.
slide = 1;
setInterval(function() {
$(".slide").removeClass("active");
$(".div" + slide).addClass("active");
slide++
if (slide == 4) {
slide = 1;
}
}, 1000)
body {
height: 100vh;
width: 100%;
position: relative;
padding: 0;
margin: 0;
text-align: center;
padding: 30px;
}
.slide {
background-repeat: repeat;
background-size: 100px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
transition: 1000ms all;
}
.slide.active {
opacity: 1;
}
.div1 {
background: url('https://picsum.photos/id/101/200');
}
.div2 {
background: url('https://picsum.photos/id/102/200');
}
.div3 {
background: url('https://picsum.photos/id/103/200');
}
.text {
position: relative;
z-index: 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
<div class="slide div1">
</div>
<div class="slide div2">
</div>
<div class="slide div3">
</div>
<div class="text">
<h1>dog trainer</h1>
<p>best in the world</p>
</div>
</body>
<!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; }
}
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.
How can I make the 2nd image(the bottom) stay in place till the 1st image(the active) completely finish transition in place? and then start the loop again without reordering the array? I don't know if this is completely wrong or if I'm missing something, I've been trying for a while! please explain your comment/answer, thanks for helping.
var slideIndex = 0;
carousel();
function carousel() {
var i;
var slideShowSlide = document.querySelector('.slideshow__slide');
var slideBgFigure = Array.from(slideShowSlide.children);
var slideWidth = slideBgFigure[0].getBoundingClientRect().width;
for (i = 0; i < slideBgFigure.length; i++) {
slideBgFigure[i].style.transform = "translateX(-" + slideWidth + "px)";
}
slideIndex++;
if (slideIndex > slideBgFigure.length) {
slideIndex = 1;
}
slideBgFigure[slideIndex - 1].style.transform = "translateX(0px)";
setTimeout(carousel, 3000);
};
.slideshow__slide {
overflow: hidden;
height: 359px;
position: relative;
}
.slide__bg {
position: absolute;
width: 100%;
margin: 0;
color: #fff;
background: #333;
overflow-x: hidden;
-webkit-box-shadow: inset 0 0 0 1px #f0f0f0;
box-shadow: inset 0 0 0 1px #f0f0f0;
transition: all 1.5s ease;
}
.slide__bg img {
display: block;
}
<section class="slideshow__slide slide">
<figure class="slide__bg current">
<img src="https://via.placeholder.com/620x200/070" />
</figure>
<figure class="slide__bg">
<img src="https://via.placeholder.com/620x200/700" />
</figure>
<figure class="slide__bg">
<img src="https://via.placeholder.com/620x200/007" />
</figure>
</section>
I don't know why this question got 2 downvotes? Maybe it wasted people's time? It wasted my whole morning too, damn...
Here might be what the OP wants to get. I used CSS animation to control animation instead of javascript, setInterval instead of setTimeout. I use javascript to control which slide whose the class current. But it turned out the most tricky time-consuming part of me is not animation, but z-index. I got a typo and it messed up too. Holy damn, took a lot of time to do this looks easy problem.
Edit: The simpler code, use CSS transition instead of animation, the javascript code just permutate the classes.
var slideShowSlide = document.querySelector('.slideshow__slide');
var slideBgFigure = Array.from(slideShowSlide.children);
function permutateClassname(array) {
var tmp = array[0].className;
for (let i = 0; i < array.length - 1; i++) {
array[i].className = array[i + 1].className;
}
array[array.length - 1].className = tmp;
}
function carousel() {
permutateClassname(slideBgFigure);
}
setInterval(carousel, 3000);
.slideshow__slide {
overflow: hidden;
height: 359px;
position: relative;
}
.slide__bg {
position: absolute;
width: 100%;
margin: 0;
color: #fff;
background: #333;
overflow-x: hidden;
-webkit-box-shadow: inset 0 0 0 1px #f0f0f0;
box-shadow: inset 0 0 0 1px #f0f0f0;
}
.slide__bg img {
display: block;
opacity: .3;
}
.slide__bg {
transition: transform 1.5s ease-in;
}
.slide__bg.slide-out {
transform: translateX(-100%);
z-index: 0;
}
.slide__bg.slide-in {
transform: translateX(0);
z-index: 2;
}
.slide__bg.middle {
transform: translateX(0);
z-index: 1;
}
<section class="slideshow__slide slide">
<figure class="slide__bg slide-out">
<img src="https://via.placeholder.com/620x200/070" />
</figure>
<figure class="slide__bg slide-in">
<img src="https://via.placeholder.com/620x200/700" />
</figure>
<figure class="slide__bg middle">
<img src="https://via.placeholder.com/620x200/007" />
</figure>
</section>
Useful link: https://css-tricks.com/controlling-css-animations-transitions-javascript/
Anyone know how can I set auto-scroll (with loop) in div with overflow:hidden; ?
Example
<div class="container" style="width:500px; max-width:500px; height:100px; max-height:100px; background:#F00; overflow:hidden;">
<div class="element_01" style="width:500px; height:100px; float:left;"></div>
<div class="element_02" style="width:500px; height:100px; float:left;"></div>
</div>
final effect?
Show element_01 -> wait 5 sec -> smooth scroll to element_02 -> wait 5 sec // and repeat
This example uses positioning instead of scrolling.
Scrolling with an overflow hidden element works, but can be buggy.
http://codepen.io/anon/pen/tqgyA
$(document).ready(function() {
var numSlides = $('ul.scroller').children().length,
counter = 0;
windowHeight = $('.window').height();
setInterval(function() {
counter++;
if (counter == numSlides) {
counter = 0;
$('.scroller').css('top', '0');
} else {
var toMove = (counter * windowHeight);
$('.scroller').css('top', '-'+toMove.toString()+'px');
}
}, 2000)
});
html { font-family: Helvetica, Arial }
.window {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
border: 2px solid skyblue;
}
ul.scroller {
width: 100%;
position: absolute;
top: 0;
left: 0;
list-style-type: none;
padding: 0;
margin: 0;
-webkit-transition: top .5s ease;
transition: top .5s ease;
}
ul.scroller li {
width: 100%;
height: 200px;
box-sizing: border-box;
padding: 80px 0;
text-align: center;
font-size: 28px;
}
ul.scroller li:nth-child(2n+2) { background: #F5F5F5 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="window">
<ul class="scroller">
<li>
First Item
</li>
<li>
Second Item
</li>
<li>
Third Item
</li>
<li>
Fourth Item
</li>
</ul>
</div>
You can use scrollTo jQuery plugin:
http://demos.flesler.com/jquery/scrollTo/
and repeat a function using setTimeout(function(){ $.scrollTo('#element'); }, 5000);
With core javascript:
<div class="container" style="width:500px; max-width:500px; height:100px; max-height:100px; background:#F00; overflow:hidden;">
<div class="element_01" style="width:500px; height:100px; float:left;">aaa</div>
<div class="element_02" style="width:500px; height:100px; float:left;">bbb</div>
</div>
<script>
var container=document.getElementsByClassName('container')[0];
var start = 0;
var smoothVal = 20;
var waitVal = 5000;
function smooth(){
var interval=setInterval(function(){
start++;
container.scrollTop = start;
if(start>100) {
clearInterval(interval);
wait();
}
},smoothVal)
}
function wait(){
start = 0;
container.scrollTop = start;
setTimeout(function(){
smooth();
},waitVal)
}
smooth();
</script>