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%)
Related
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.
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>
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>
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.
I have a slider on the homepage and other large hero images on other static pages. All 100% screen width. On smaller screens the other hero images stay larger (height wise) than my slider images. All images heights are set to auto.
I need the slider images to not just scale based on full width. I don't care if they get cut-off, the image heights are becoming too small on mobile. It seems the difference is the background-size: cover and the padding. But when I try it it doesn't work the same, I'm either putting it on the wrong element or it's messing with it because the slider width is 500%?
The hero images are built like this:
<div class="hero" style="background-image: url('/images/static/shop/hero_necklaces.jpg');">
<div class="hero-text">
<h1>Jewelry</h1>
</div>
</div>
#media (max-width: 480px)
.hero {
padding-top: 60px;
padding-bottom: 60px;
}
#media (max-width: 650px)
.hero {
padding-top: 90px;
padding-bottom: 90px;
}
.hero {
width: 100%;
height: auto;
padding-top: 140px;
padding-bottom: 140px;
display: table;
vertical-align: middle;
-webkit-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
The slider is built like this:
<div id="captioned-gallery" class="homepage-slider">
<figure class="slider">
<figure>
<img src="${request.contextPath}/images/static/home/header_hero1.jpg" alt="The 2015 Fall Collection">
<!--<figcaption class="hero-text">Sample Text 1</figcaption>-->
</figure>
<figure>
<img src="${request.contextPath}/images/static/home/header_hero2.jpg" alt="Get Paid to Share the Hope">
</figure>
<figure>
<img src="${request.contextPath}/images/static/home/header_hero3.jpg" alt="Handcrafted Artisan Made">
</figure>
<figure>
<img src="${request.contextPath}/images/static/home/header_hero1.jpg" alt="The 2015 Fall Collection">
</figure>
</figure>
</div>
div#captioned-gallery {
width: 100%;
overflow: hidden;
}
.homepage-slider {
padding-bottom: 115px;
}
figure { margin: 0; }
#-webkit-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
100% { left: -300%; }
}
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
100% { left: -300%; }
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
-webkit-animation: 40s slidy infinite;
animation: 40s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
margin: 0px;
}
The slider seems to work fine, other than a long pause at the end. I've adjusted the width of the slider to 400%, each slide to 25%, and the animation. I'm guessing that the slider originally had 5 slides in it (4 with the first repeated at the end), and you didn't adjust for it.
div#captioned-gallery {
width: 100%;
overflow: hidden;
}
.homepage-slider {
padding-bottom: 115px;
}
figure {
margin: 0;
}
#-webkit-keyframes slidy {
0% {
left: 0%;
}
30% {
left: 0%;
}
33.33% {
left: -100%;
}
63.33% {
left: -100%;
}
66.66% {
left: -200%;
}
96.66% {
left: -200%;
}
99.99% {
left: -300%;
}
100% {
left: -300%;
}
}
#keyframes slidy {
0% {
left: 0%;
}
30% {
left: 0%;
}
33.33% {
left: -100%;
}
63.33% {
left: -100%;
}
66.66% {
left: -200%;
}
96.66% {
left: -200%;
}
99.99% {
left: -300%;
}
100% {
left: -300%;
}
}
figure.slider {
position: relative;
width: 400%;
font-size: 0;
-webkit-animation: 10s slidy infinite;
animation: 10s slidy infinite;
}
figure.slider figure {
width: 25%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
margin: 0px;
}
<div id="captioned-gallery" class="homepage-slider">
<figure class="slider">
<figure>
<a href="${request.contextPath}/category/Jewelry">
<img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
</a>
<!--<figcaption class="hero-text">Sample Text 1</figcaption>-->
</figure>
<figure>
<a href="${request.contextPath}/jsp/static/joinUs.jsp">
<img src="http://placehold.it/1280x600/0ff000" alt="Get Paid to Share the Hope">
</a>
</figure>
<figure>
<a href="${request.contextPath}/jsp/static/impact.jsp">
<img src="http://placehold.it/1280x600/00ff00" alt="Handcrafted Artisan Made">
</a>
</figure>
<figure>
<a href="${request.contextPath}/category/Jewelry">
<img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
</a>
</figure>
</figure>
</div>
If you want the slider images to be "taller" on mobile, gradually as the screen sizes shrinks, then my suggestion would be to increase the size of the .slider object using a combination of calc on width and margin left (margin left half the difference of width), and add overflow:hidden on .home-page-slider.
If you don't mind a sudden shift, at say 600px width or less, then just make the margin left -10% and width 120% at that beakpoint on the img like this:
div#captioned-gallery {
width: 100%;
overflow: hidden;
}
.homepage-slider {
padding-bottom: 115px;
}
figure {
margin: 0;
}
#-webkit-keyframes slidy {
0% {
left: 0%;
}
30% {
left: 0%;
}
33.33% {
left: -100%;
}
63.33% {
left: -100%;
}
66.66% {
left: -200%;
}
96.66% {
left: -200%;
}
99.99% {
left: -300%;
}
100% {
left: -300%;
}
}
#keyframes slidy {
0% {
left: 0%;
}
30% {
left: 0%;
}
33.33% {
left: -100%;
}
63.33% {
left: -100%;
}
66.66% {
left: -200%;
}
96.66% {
left: -200%;
}
99.99% {
left: -300%;
}
100% {
left: -300%;
}
}
figure.slider {
position: relative;
width: 400%;
font-size: 0;
-webkit-animation: 10s slidy infinite;
animation: 10s slidy infinite;
}
figure.slider figure {
width: 25%;
height: auto;
display: inline-block;
position: inherit;
overflow:hidden;
}
figure.slider img {
width: 100%;
height: auto;
margin: 0px;
}
#media (max-width: 600px)
{
figure.slider img { width: 120%; margin-left: -10%; margin-right: -10% }
}
<div id="captioned-gallery" class="homepage-slider">
<figure class="slider">
<figure>
<a href="${request.contextPath}/category/Jewelry">
<img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
</a>
<!--<figcaption class="hero-text">Sample Text 1</figcaption>-->
</figure>
<figure>
<a href="${request.contextPath}/jsp/static/joinUs.jsp">
<img src="http://placehold.it/1280x600/0ff000" alt="Get Paid to Share the Hope">
</a>
</figure>
<figure>
<a href="${request.contextPath}/jsp/static/impact.jsp">
<img src="http://placehold.it/1280x600/00ff00" alt="Handcrafted Artisan Made">
</a>
</figure>
<figure>
<a href="${request.contextPath}/category/Jewelry">
<img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
</a>
</figure>
</figure>
</div>
Smooth:
div#captioned-gallery {
width: 100%;
overflow: hidden;
}
.homepage-slider {
padding-bottom: 115px;
}
figure {
margin: 0;
}
#-webkit-keyframes slidy {
0% {
left: 0%;
}
30% {
left: 0%;
}
33.33% {
left: -100%;
}
63.33% {
left: -100%;
}
66.66% {
left: -200%;
}
96.66% {
left: -200%;
}
99.99% {
left: -300%;
}
100% {
left: -300%;
}
}
#keyframes slidy {
0% {
left: 0%;
}
30% {
left: 0%;
}
33.33% {
left: -100%;
}
63.33% {
left: -100%;
}
66.66% {
left: -200%;
}
96.66% {
left: -200%;
}
99.99% {
left: -300%;
}
100% {
left: -300%;
}
}
figure.slider {
position: relative;
width: 400%;
font-size: 0;
-webkit-animation: 10s slidy infinite;
animation: 10s slidy infinite;
}
figure.slider figure {
width: 25%;
height: auto;
display: inline-block;
position: inherit;
overflow: hidden;
}
figure.slider img {
width: 100%;
height: auto;
margin: 0px;
}
#media (max-width: 600px) {
figure.slider img {
width: -webkit-calc(100% + ((600px - 100%) / 5));
width: calc(100% + ((600px - 100%) / 5));
margin-left: -webkit-calc(10% - 60px);
margin-left: calc(10% - 60px);
margin-right: -webkit-calc(10% - 60px);
margin-right: calc(10% - 60px);
}
}
<div id="captioned-gallery" class="homepage-slider">
<figure class="slider">
<figure>
<a href="${request.contextPath}/category/Jewelry">
<img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
</a>
<!--<figcaption class="hero-text">Sample Text 1</figcaption>-->
</figure>
<figure>
<a href="${request.contextPath}/jsp/static/joinUs.jsp">
<img src="http://placehold.it/1280x600/0ff000" alt="Get Paid to Share the Hope">
</a>
</figure>
<figure>
<a href="${request.contextPath}/jsp/static/impact.jsp">
<img src="http://placehold.it/1280x600/00ff00" alt="Handcrafted Artisan Made">
</a>
</figure>
<figure>
<a href="${request.contextPath}/category/Jewelry">
<img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
</a>
</figure>
</figure>
</div>