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
Related
I've been making a website recently and encountered an issue where the text I want to be behind the slideshow of images is behind it, and I don't know how to bring it up front. Can somebody help me with that please? I put in both HTML and CSS code because I don't know where I have to fix what.
Here's the HTML.
<section id="showcase">
<div class="container">
<p>WELCOME TO THIS WEBSITE.</p>
</div>
<div class="button">
LEARN MORE
</div>
<div id="slider">
<figure>
<img src="gallery/1.jpg">
<img src="gallery/3.jpg">
<img src="gallery/4.jpg">
</figure>
</div>
</section>
And here's the CSS
#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%;
}
}
Thank you!
You can get the text on top of the slideshow several ways. One is to draw the slideshow first, then you know that you have the height of the images there, then set your text in a div which is given absolute positioning - this means it will be positioned not immediately following the slider but in relation to the containing element that itself has a position property.
Obviously you will want to format the text so it shows up well on top of the images, but how to do that best will depend on what your images are like, what size font you want and so on.
Here's a basic snippet using your code and just putting the text into a div which is placed after the snippet.
#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%;
}
}
#showcase {
position: relative;
}
#text {
position: absolute;
top: 0;
left: 0;
}
<section id="showcase">
<div id="slider">
<figure>
<img src="https://picsum.photos/id/10/300/300">
<img src="https://picsum.photos/id/100/300/300">
<img src="https://picsum.photos/id/1001/300/300">
</figure>
</div>
<div id="text">
<div class="container">
<p>WELCOME TO THIS WEBSITE.</p>
</div>
<div class="button">
LEARN MORE
</div>
</div>
</section>
I am trying to create a CSS image slider using keyframes that has navigation without Javascript. The end goal ideally would be a forward/back link or button as found in conventional sliders (that have Javascript).
I have this so far:
<style type="text/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;
}
</style>
</head>
<body>
<div id="slider">
<figure>
<img src="https://www.leasingoptions.co.uk/filestorage/filemanager/Number_Plates/LO_Plates_Cheshire1a.jpg" alt>
<img src="https://www.leasingoptions.co.uk/filestorage/filemanager/Number_Plates/LO_Plates_Derbyshire1a.jpg" alt>
<img src="https://www.leasingoptions.co.uk/filestorage/filemanager/Number_Plates/LO_Plates_Devon1a.jpg" alt>
<img src="https://www.leasingoptions.co.uk/filestorage/filemanager/Number_Plates/LO_Plates_Essex1a.jpg" alt>
<img src="https://www.leasingoptions.co.uk/filestorage/filemanager/Number_Plates/LO_Plates_GreaterManchester1a.jpg" alt>
</figure>
</div>
</body>
</html>
I'm just gonna link you to some resources which can help you accomplish that.
First, here's how to change something onclick in pure CSS
(Scroll to "2017 Answer"
Can I have an onclick effect in CSS?
And here's some useful info for changing values of other elements, on an example with :hover, it however works with :checked as well.
How to affect other elements when a div is hovered
I hope this helps you, although you'd probably have to use transitions instead of animations and maybe the scale property.
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 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.
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?