I am using the Responsive CSS Image Slider from:
https://codepen.io/dudleystorey/pen/ehKpi
It worked fine when I used 2, 4, or 5 pics. However, when I tried using 6 photos the first and last photo stack together, the last slide is completely blank, and all the slides between have white space under them.
The following is the CSS code after I revised it:
#keyframes slidy{
0% { left: 0%; }
9.09% { left: 0%; }
18.18% { left: -100%; }
27.27% { left: -100%; }
36.36% { left: -200%; }
45.45% { left: -200%; }
54.54% { left: -300%; }
63.63% { left: -300%; }
72.72% { left: -400%; }
81.81% { left: -400%; }
90.90% { left: -500%; }
100% { left: -500%; }
}
.slide {
margin: 0 auto ;
max-width: 700px;
overflow: hidden;
border-style: solid;
border-width: 5px;
border-color: #f6a51c;
}
.slide figure {
position: relative;
width: 500%;
margin: 0 auto;
animation: 30s slidy infinite;
}
.slide figure img {
width: 20%;
float: left;
}
The following is the HTML code after I revised it:
<div class="slide">
<figure>
<img src="http://inmodemd.com/images/bodyfx-ba1.jpg" alt="" />
<img src="http://inmodemd.com/images/bodyfx-ba2.jpg" alt="" />
<img src="http://inmodemd.com/images/bodyfx-ba3.jpg" alt="" />
<img src="http://inmodemd.com/images/bodyfx-ba4.jpg" alt="" />
<img src="http://inmodemd.com/images/bodyfx-ba5.jpg" alt="" />
<img src="http://inmodemd.com/images/bodyfx-ba6.jpg" alt="" />
</figure>
</div>
Your image is 20%, the total width max is 700 and your trying to squeeze into that percentage. 5 is your max because each image is 20% of the 100% width. 20 x 5 is 100. 6 / 100 = 16.66666 , which means your images wont fit 100% across. Nice slider though. Hope this helps.
Related
Hello guys I would like to know how can I add text in my image slider. I would like to add text to each image. I could do it in Photoshop, but I wont to be able to edit the text in the HTML in future in case it needs changing. How would I go about doing that?
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -115%; }
45% { left: -115%; }
50% { left: -225%; }
70% { left: -225%; }
75% { left: -335%; }
95% { left: -335%; }
100% { left: -445%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 22%; float: left; }
div#slider figure {
position: relative;
width: 500%;
height: 34px;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
#slider {
max-width: 75%;
left: 12.5%;
max-height: 55%;
}
</div>
previously -->
<div class="container center-block">
<div class="col-xs-12" id="slider">
<figure>
<img src="imgs/rdp.jpg" class="img-responsive" />
<img src="imgs/wires.jpg" class="img-responsive" />
<img src="imgs/speed.jpg" class="img-responsive" />
<img src="imgs/tech.jpg" class="img-responsive" />
</figure>
</div>
</div>
I have created a slideshow with much input derived from other very talented individuals (I'm learning). However, my code seems to go all of the way to the fifth image, but quickly shifts right back to the first instead of staying on the same schedule as the previous four slides. I am trying to avoid the use of JS or jQuery. I feel it is easier to read, especially for me considering I have very little Java background.
Here is the code I am currently using:
#import url(http://fonts.googleapis.com/css?family=Istok+Web);
#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%;
}
}
body,
figure {
margin: 0;
background: #101010;
font-family: Istok Web, sans-serif;
font-weight: 100;
}
div#captioned-gallery {
width: 100%;
overflow: hidden;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 60s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: 95%;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
color: #fff;
width: 100%;
font-size: 2rem;
padding: .6rem;
}
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="http://lorempixel.com/800/600/nature/1">
</figure>
<figure>
<img src="http://lorempixel.com/800/600/nature/2">
</figure>
<figure>
<img src="http://lorempixel.com/800/600/nature/3">
</figure>
<figure>
<img src="http://lorempixel.com/800/600/nature/4">
</figure>
<figure>
<img src="http://lorempixel.com/800/600/nature/5">
</figure>
<figure>
<img src="http://lorempixel.com/800/600/nature/6">
</figure>
</figure>
</div>
So I figure there has to be something wrong with the keyframes part. However, I think I may just be horrible at that and am having a lot of trouble finding a good reference that makes sense to me. I've messed with the percentages, but can't seem to get it right. I mainly need to know how keyframes work and how the job is divided up amongst each slide. I would even like to know how to add another slide into the mix, but tackling this first issue would be a great start. I appreciate you taking the time to dissect this. All help is greatly appreciated.
Before I get to the reason why the last image shows up only for a split second, there are a few other changes that need to be made in-order for the slideshow to work properly:
The CSS posted in question seems to have been coded with the assumption that there would be only 5 images but the HTML markup has six .slider figure elements. I am not sure if this was intentional or it is a mistake but I will explain the changes based on the HTML provided.
First, the width of figure.slider should be changed to 600% from 500% because there are six images and each have to be 100% width (that is, cover the entire body). This should always be calculated as (no. of elements * 100%). If this is not done, some of the images would wrap to the next line and will get hidden due to the overflow: hidden setting on the parent.
Next, the width of figure.slider figure should be changed from 20% to 16.67% because we have six images now and so each image should have 1/6th of 100% as its width.
When we have 5 images, at left: 0%, the first image would be shown, at left: -100%, the 2nd image would be shown and so only at left: -400% the 5th image would be shown. As per code provided in question, the left: -300% to left: -400% movement happens only between 95% to 100% and so the 5th image comes fully into view only at 100% which is the same time as the end of the animation and this is why the last image is displayed only for a split second.
In-order to address the aforementioned issue, the keyframe rules should be changed. Since for our case we have taken 6 images, we need 5 (n-1) slide movements and each slide movement is done over 5% of the animation's duration. This means that a total of 25% of the duration is used up by the slide movements. Now the remaining 75% should be split up equally among the image elements so that each of them would be visible for x seconds before disappearing. So, we arrive at 12.5% stay time for each image and 5% slide movement time. Once we do this modification to #keyframes, we can see that each image gets their screen time (which is 12.5% of 60s = 7.5s).
#import url(http://fonts.googleapis.com/css?family=Istok+Web);
#keyframes slidy {
0% {
left: 0%;
}
12.5% {
left: 0%;
}
17.5% {
left: -100%;
}
30% {
left: -100%;
}
35% {
left: -200%;
}
47.5% {
left: -200%;
}
52.5% {
left: -300%;
}
65% {
left: -300%;
}
70% {
left: -400%;
}
82.5% {
left: -400%;
}
87.5% {
left: -500%;
}
100% {
left: -500%;
}
}
body,
figure {
margin: 0;
background: #101010;
font-family: Istok Web, sans-serif;
font-weight: 100;
}
div#captioned-gallery {
width: 100%;
overflow: hidden;
}
figure.slider {
position: relative;
width: 600%;
font-size: 0;
animation: 60s slidy infinite;
}
figure.slider figure {
width: 16.66%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: 95%;
}
figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
color: #fff;
width: 100%;
font-size: 2rem;
padding: .6rem;
}
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="http://lorempixel.com/800/600/nature/1">
</figure>
<figure>
<img src="http://lorempixel.com/800/600/nature/2">
</figure>
<figure>
<img src="http://lorempixel.com/800/600/nature/3">
</figure>
<figure>
<img src="http://lorempixel.com/800/600/nature/4">
</figure>
<figure>
<img src="http://lorempixel.com/800/600/nature/5">
</figure>
<figure>
<img src="http://lorempixel.com/800/600/nature/6">
</figure>
</figure>
</div>
I was going through pure CSS sliders on codepen and I stumbled upon this -> http://codepen.io/dudleystorey/pen/ehKpi
<div id="slider">
<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/ibiza.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
</figure>
</div>
#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%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
So how does this achieve responsive design, without the use of #media queries at all? Also how exactly does it manage to control height of the image, even though there is no mention of height or sizing?
Simple, the wrapper of the images has 500% width = 100% * numberOfImages.
Then with CSS it does the slideshow animating the position of that same wrapper, each keyframe = 100% / numberOfSlides.
The height is not defined, it's adjusted proportionally, based on the width of the screen (the 20% you see = wrapper's width / numberOfSlides = 100% of the screen's width)
The final image/container size in terms of height can be controlled by specifying the width itself, as through this approach, the height and width tied to each other.
I´ve seen that there are already a few questions about CSS Sliders but none of them were like the one I wanted. I´ve already used and edited code from https://codepen.io/dudleystorey/pen/ehKpi . I added two buttons in form of arrows and arranged at the border of the page. But I don´t know how to let the buttons move the banner via CSS and couldn´t find something on the internet. I cannot use JavaScript because the people visiting the website all wouldn´t have much knowledge of Computing. Can you help me? Here is the code I´ve already used:
#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%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
#previous, #next{
position:absolute;
top:30%;
z-index:500;
opacity:0.7;
border:none;
background:none;
}
#previous{
left:5%;
}
#next{
right:5%;
}
<html>
<link rel="stylesheet" href="/layout/style/slider.css" type="text/css">
<div id="slider">
<button type="button" id="previous"><img src="/layout/previous.png" id="imgprev"></button>
<button type="button" id="next"><img src="/layout/next.png" id="imgnext"></button>
<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/ibiza.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
</figure>
</div>`
Am I right that I only have to say the buttons that they make the banner move +/- 100% ?
Thanks for your efforts
Tim
I'm trying to implement this responsive css image slider, but it doesn't seem to working on mobile devices at all.. Demo review
It works when I visit Codepen page on my phone, but on my url it just hangs on the first image for some reason..(only on mobile, works fine on desktop) And I've tried different browsers on different phones..
Now the code is exactly the same as on codepen, there's no tags clashing or anything like that and it's fairly simple.
Is there something else you need to add to make it mobile friendly? I can't imagine what, because it's just CSS..
So, maybe I need another pair of eyes, but I'm just not getting what could be affecting it??
So here's the code:
HTML
<div id="slider">
<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/ibiza.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
</figure>
</div>
CSS
#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%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
Thanks!!
Usually in these cases, the culprit is viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1">
Have you added this, in your webpage?