Image carousel in css not working properly - html

I'm making a carousel of a website but I'm having problem with the width. I want each image to take full width of the viewport but the last image is appearing below the first image. Even the slider animation is not sliding the images properly, by sliding extra content on the right. Any help would be appreciated
/*carousel container*/
.carousel {
overflow: hidden;
}
/*figure tag containing carousel*/
.carousel figure {
position: relative;
width: 600vw;
animation: 25s slider infinite;
}
/*carousel images*/
.carousel figure img {
width: 100vw;
}
/*animations for carousel*/
#keyframes slider {
0% {
left: 0vw;
}
14% {
left: 0vw;
}
15% {
left: -100vw;
}
29% {
left: -100vw;
}
30% {
left: -200vw;
}
44% {
left: -200vw;
}
45% {
left: -300vw;
}
59% {
left: -300vw;
}
60% {
left: -400vw;
}
74% {
left: -400vw;
}
75% {
left: -500vw;
}
90% {
left: -500vw;
}
100% {
left: 0vw;
}
}
<div class="carousel">
<figure>
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/a341a61df77a5715.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/971922653b729a9e.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/4075d3bac7ced1e9.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/411e38f49c1486b4.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/8c30d1a38636e9fa.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/ce435d49852d2b8c.jpg?q=50">
</figure>
</div>


The problem was with the default parameters of the figure tag, which set the spacing between the images. In order to override these rules, add the display: flex and these other rules to the .carousel figure selector.
It should look like this:
.carousel figure {
position: relative;
width: 600vw;
animation: 25s slider infinite;
display: flex;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
or like this:
.carousel figure {
position: relative;
width: 600vw;
animation: 25s slider infinite;
display: flex;
margin: 0;
}
/*carousel container*/
.carousel {
overflow: hidden;
}
/*figure tag containing carousel*/
.carousel figure {
position: relative;
width: 600vw;
animation: 25s slider infinite;
display: flex;
margin: 0;
}
/*carousel images*/
.carousel figure img {
width: 100vw;
}
/*animations for carousel*/
#keyframes slider {
0% {
left: 0vw;
}
14% {
left: 0vw;
}
15% {
left: -100vw;
}
29% {
left: -100vw;
}
30% {
left: -200vw;
}
44% {
left: -200vw;
}
45% {
left: -300vw;
}
59% {
left: -300vw;
}
60% {
left: -400vw;
}
74% {
left: -400vw;
}
75% {
left: -500vw;
}
90% {
left: -500vw;
}
100% {
left: 0vw;
}
}
<div class="carousel">
<figure>
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/a341a61df77a5715.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/971922653b729a9e.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/4075d3bac7ced1e9.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/411e38f49c1486b4.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/8c30d1a38636e9fa.jpg?q=50">
<img src="https://rukminim1.flixcart.com/flap/1688/280/image/ce435d49852d2b8c.jpg?q=50">
</figure>
</div>

Related

crop an image in a slider animation with html/css

I have been trying to make an image slider that would fit into a side bar in my website im building, however, its been coming out with different pictures with different aspect ratios making it look all messy. I want to try having it where it will automatically crop (maybe even round it) with my current slider I'm using. Thanks in advance!
<head>
<style type="text/css">
#slider {
overflow: hidden;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 20s slider infinite;
}
#slider figure img {
float: left;
width: 20%;
}
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
</style>
</head>
<body>
<div id="slider">
<figure>
<img src="img/plant.png">
<img src="img/plant2.png">
<img src="img/plant3.png">
<img src="img/plant4.png">
<img src="img/plant.png">
</figure>
</div>
</body>
</html>

The trick is to force all images to inherit the height of the parent element by min-height: 100%; and height: auto; and then use object-fit: cover; to keep the aspect ratio.
#slider {
overflow: hidden;
height: 180px; /* or any value depending on how high you want it to be. 100% for matching the longest image */
}
#slider figure {
display: flex;
width: 500%;
height: 100%;
margin: 0;
position: relative;
animation: 20s slider infinite;
}
#slider figure img {
display: block;
width: 20%;
min-height: 100%;
object-fit: cover;
height: auto;
}
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
<div id="slider">
<figure>
<img src="http://placekitten.com/700/300">
<img src="http://placekitten.com/600/600">
<img src="http://placekitten.com/500/300">
<img src="http://placekitten.com/700/400">
<img src="http://placekitten.com/700/300">
</figure>
</div>
and one more thing, position: relative; does not take left, right, ... values. That works only on absolute and fix positioned elements.

Editing a slider as so it will support on click effects

I have been developing a responsive image slider for my website im building, it's meant to sit neatly in a pop up menu as well. Anyways, I have been trying to add functions to this, but ultimately it breaks as soon as I add anything else to the <img> brackets. I'm trying to add onclick="window.open(this.src)"> to the img brackets. Any way this could work? Thanks
overflow: hidden;
height: 180px;
}
#slider figure {
display: flex;
width: 500%;
height: 100%;
margin: 0;
position: relative;
animation: 20s slider infinite;
}
#slider figure img {
display: block;
width: 20%;
min-height: 100%;
object-fit: cover;
height: auto;
}
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
 
 
<div id="slider">
<figure>
<img src="http://placekitten.com/700/300">
<img src="http://placekitten.com/600/600">
<img src="http://placekitten.com/500/300">
<img src="http://placekitten.com/700/400">
<img src="http://placekitten.com/700/300">
</figure>
</div>
 

Why is there a white page on my image slider?

So I know very little about coding and was trying to make a html and css only slider. I was able to create a really basic slideshow with three images. However, the code places a white image after the third for some weird reason. Can anyone tell me what I did wrong? Why is there a white page after the last image? Also if possible, how can I make it so that after the last image it doesn't look choppy when it cuts back to the first?
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
#slider {
overflow: hidden;
width: 60%;
margin: 0 auto;
}
#slider figure img {
width: 20%;
float: left;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 15s infinite slider;
}
<div id="slider">
<figure>
<img src="http://thewallpaper.co/wp-content/uploads/2016/03/fire-beach-widescreen-high-definition-wallpaper-pictures-download-full-free-download-wallpaper-high-resolution-colorful-2048x1367-736x459.jpg">
<img src="http://thewallpaper.co/wp-content/uploads/2016/03/awesome-malaysiwide-hdesktop-backgrounphotos-windows-desktop-images-mac-wallpapers-colorful-2048x1367-736x459.jpg">
<img src="https://s-media-cache-ak0.pinimg.com/originals/bf/2e/c5/bf2ec5d03e6ddb65bbff4c98ae367a36.jpg">
</figure>
</div>
</body>
</html>

Since you only have 3 images if you put left: -300%; the last image is out of the container.
Here is the fix:
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: 0;
}
95% {
left: 0;
}
100% {
left: 0;
}
}
#slider {
overflow: hidden;
width: 60%;
margin: 0 auto;
}
#slider figure img {
width: 20%;
float: left;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 15s infinite slider;
}
<div id="slider">
<figure>
<img src="http://thewallpaper.co/wp-content/uploads/2016/03/fire-beach-widescreen-high-definition-wallpaper-pictures-download-full-free-download-wallpaper-high-resolution-colorful-2048x1367-736x459.jpg">
<img src="http://thewallpaper.co/wp-content/uploads/2016/03/awesome-malaysiwide-hdesktop-backgrounphotos-windows-desktop-images-mac-wallpapers-colorful-2048x1367-736x459.jpg">
<img src="https://s-media-cache-ak0.pinimg.com/originals/bf/2e/c5/bf2ec5d03e6ddb65bbff4c98ae367a36.jpg">
</figure>
</div>
Note that when you are on the last image - the next slide (to the first one) will not be from the right to the left. To get that visual effect you will have to use javascript.

Image slider going invisible after last image?

So I have an image slider and it works... kind of. My problem lies that I have 3 images. The slider slides through those images, but when it slides off the 3rd image (last one) it just dissappears, but then it slides back to the first image again? I need it so it slides from the last one to the first one, instead of going invisible for an interval. Here is my code for it currently:
#imgslide {
width: 550px;
height: 300px;
border-radius: 10px;
position: relative;
top: 25%;
left: 50%;
margin-top: -150px;
margin-left: -225px;
overflow: hidden;
}
#imgslide figure img {
width: 20%;
float: left;
}
#imgslide figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 15s slidy infinite;
}
/* Keyframes */
#keyframes slidy {
0% {
left: 0%;
}
20% {
left: 0%;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
<div id="imgslide">
<figure>
<img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt="">
<img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt="">
<img src="http://www.indraneelghosh.com/img/sport/sport_318_test-201.gif" alt="">
</figure>
</div>

try this
#imgslide {
width: 450px;
height: 300px;
border-radius: 10px;
position: relative;
top: 25%;
left: 50%;
margin-top: 100px;
margin-left: -225px;
overflow: hidden;
}
#imgslide figure img {
width: 20%;
float: left;
}
#imgslide figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 15s slidy infinite;
}
/* Keyframes */
#keyframes slidy {
0% {
left: 0%;
}
20% {
left: 0%;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: 0%;
}
}
<div id="imgslide">
<figure>
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
<img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
</figure>
</div>

your images filling only 60% of space(3x 20%), add 2 more images to fill space or stretch your images to 33.33% of width and figure to 300%(adjust animation to 0%,100% and 200%)

CSS3 infinite loop back to first image

I have a 5 image css3 infinite slider which is on a continuous loop (there is no jQuery or JS involved here and I don't want any either), however as soon as the last image has slid into position it jumps back to the first image. I have tried adding the first image as the 6th image in the group but this hasn't made any difference, can someone look over my CSS3 calculations to see what I'm doing wrong?
HTML
<div id="slider">
<figure>
<img src="banner01.jpg" alt="">
<img src="banner02.jpg" alt="">
<img src="banner03.jpg" alt="">
<img src="banner04.jpg" alt="">
<img src="banner05.jpg" alt="">
</figure>
</div>
CSS3
#keyframes slidr {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden; width:710px; height:300px; float:center; margin:auto; }
div#slider figure img {float: left; }
div#slider figure {
position: relative;
height:100%;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidr;
transition:.7s;
}
Thanks in advance

Your 100% part of the animation - the -400% value - is actually only being displayed for exactly... 0 seconds before it gets rewound to the 0% value. Try adding a gap that keep the -400% value active for longer:
#keyframes slidr {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
85% { left: -300%; }
90% { left: -400%; }
100% { left: -400%; }
}
/* Sorry, I'm on Safari */
#-webkit-keyframes slidr {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
85% { left: -300%; }
90% { left: -400%; }
100% { left: -400%; }
}
body {
margin: 0;
}
div#slider {
overflow: hidden;
width:710px;
height:300px;
/* I dont think this is actually a thing: */
float:center;
margin:auto;
}
div#slider figure img {
float: left;
}
div#slider figure {
position: absolute;
height:100%;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
/* And again, I'm on Safari. Also, speed it up for development purposes. */
-webkit-animation: 10s slidr infinite;
animation: 10s slidr infinite;
transition:.7s;
}
img {
width: 100vw;
height: 400px;
}
<div id="slider">
<figure>
<img src="http://placehold.it/350x150" alt="">
<img src="http://placehold.it/350x150" alt="">
<img src="http://placehold.it/350x150" alt="">
<img src="http://placehold.it/350x150" alt="">
<img src="http://placehold.it/350x150" alt="">
</figure>
</div>
Notice that it actually snaps back to 0 and not animates. You could create a transition again - if you want to - by adding another gap that restores the left value to 0%.
Update to return to start
To return to start, just make sure that:
The total of different steps equals the amount of frames + 1
The last and first step start at 0
In SASS we could easily automate this process:
#mixin keyframes-slider($name, $frames){
// Create keyframes wrapper
#keyframes #{$name} {
// Loop through the amount of frames (-1)
#for $i from 0 through ($frames - 1) {
// Divide the 100% by the amount of frames
// The first frame is 0, and the last will return to 0
#{100% / $frames * $i} { left: -100% * $i; }
}
// Add the final frame
100% { left: 0; }
}
}
Simply use it by including it and it will generate the keyframes you want:
#include keyframes-slider(slidr, 8);
As an example (pre-generated with 8):
/* Thos following is my compressed SASS output. */
#-webkit-keyframes slidr{0%{left:0%}12.5%{left:-100%}25%{left:-200%}37.5%{left:-300%}50%{left:-400%}62.5%{left:-500%}75%{left:-600%}87.5%{left:-700%}100%{left:0}}#keyframes slidr{0%{left:0%}12.5%{left:-100%}25%{left:-200%}37.5%{left:-300%}50%{left:-400%}62.5%{left:-500%}75%{left:-600%}87.5%{left:-700%}100%{left:0}}
/* This is a quick way to give a good example. */
ul {
width: 800px;
height: 100px;
padding: 0;
margin: 0;
list-style: none;
-webkit-animation: slidr 10s infinite;
animation: slidr 10s infinite;
position: absolute;
left: 0;
top: 0;
}
div, li {
width: 100px;
height: 100px;
float: left;
font-size: 30px;
background: #ececec;
}
li:nth-child(2n){
background: #dd0300;
}
div {
position: relative;
overflow: hidden;
}
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>