I have successfully implemented a slide show here is my code
HTML
<div id="slider">
<figure>
<img src="images/slides/1.jpg" alt>
<img src="images/slides/1.jpg" alt>
<img src="images/slides/1.jpg" alt>
<img src="images/slides/1.jpg" alt>
<img src="images/slides/1.jpg" alt>
<img src="images/slides/1.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%; }
}
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;
}
Live Demo:
https://codepen.io/RamBM/pen/PEJXqg
Now here is my question is how to implement the next button arrow and previous button arrow in the slide show.
Related
I just made a slider with the help of this site: https://la-cascade.io/un-carrousel-responsif-en-pur-css/.
it works very well only it is way too big on my site I would really like to provide the modification but I can not do it someone knows how to do it
My 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%; height: auto; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
My HTML:
<figure id="slide">
<img src="img/6.jpg" alt>
<img src="img/7.jpg" alt>
<img src="img/8.jpg" alt>
<img src="img/9.jpg" alt>
<img src="img/10.jpg" alt>
</figure>
I checked the material you linked to. This post shows how tag <figure> is wrapped in an additional div, with id slider:
<div id="slider">
...
</div>
To set dimensions, you can assign a width rule to css for #slider. Like here:
div#slider {
...
width: 500px;
}
body {
margin: 0;
}
div#slider {
overflow: hidden;
width: 500px;
}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
div#slider figure img {
width: 20%;
height: auto;
float: left;
}
#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="slider">
<figure>
<img src="https://st.depositphotos.com/2000885/1902/i/600/depositphotos_19021343-stock-photo-red-heart.jpg" alt>
<img src="https://st.depositphotos.com/2000885/1902/i/600/depositphotos_19021343-stock-photo-red-heart.jpg" alt>
<img src="https://st.depositphotos.com/2000885/1902/i/600/depositphotos_19021343-stock-photo-red-heart.jpg" alt>
<img src="https://st.depositphotos.com/2000885/1902/i/600/depositphotos_19021343-stock-photo-red-heart.jpg" alt>
<img src="https://st.depositphotos.com/2000885/1902/i/600/depositphotos_19021343-stock-photo-red-heart.jpg" alt>
</figure>
</div>
I've just copied this codepen to my page.
It works well, but I have some other content on my page as well, and the problem is that when I import this code, it destroys all links and other images on my page. Does anyone know why is this happening, and how to solve this? :)
HTML
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="ibiza.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="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;
}
It probably destroys all links and everything else because of
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
Which will make it so that your links and references are based on off of that. As per mozilla developers:
The HTML <base> element specifies the base URL to use for all relative
URLs contained within a document. There can be only one element
in a document.
Solution for you case in particular:
Remove that base href element on top of your page, and update the sources for each image in the slider individually for its absolute URL.
**here's what i have so far and it's working properly **
<div id="slider">
<div class="slider-title">
<h2>best seller</h2>
</div>
<figure>
<img src="simon-lee-TW93DCT6T_U-unsplash.jpg" alt="sample photo">
<img src="colin-cassidy-wdG7v-9pJ1A-unsplash.jpg" alt="sample photo">
<img src="massimiliano-corradini-Nylf-HeGX2w-unsplash.jpg" alt="sample photo">
<img src="studio-blackthorns-C7vX_SBPrqk-unsplash.jpg" alt="sample photo">
<img src="simon-lee-TW93DCT6T_U-unsplash.jpg" alt="sample photo">
</figure>
</div>
and this is my css
#slider {
margin-top: 25px;
background: #417378;
border-radius: 10px;
overflow: hidden;
}
#slider figure {
border-radius: 10px;
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 20s slider infinite;
}
#slider figure img {
width: 20%;
height: 400px;
float: left;
margin-top: -25px;
}
#keyframes slider {
0% {
border-radius: 10px;
left: 0;
}
20% {
border-radius: 10px;
left: 0;
}
25% {
border-radius: 10px;
left: -100%;
}
45% {
border-radius: 10px;
left: -100%;
}
50% {
border-radius: 10px;
left: -200%;
}
70% {
border-radius: 10px;
left: -200%;
}
75% {
border-radius: 10px;
left: -300%;
}
95% {
border-radius: 10px;
left: -300%;
}
100% {
border-radius: 10px;
left: -400%;
}
}
EDIT:
Good progress... By updating the following code, I almost get exactly what I want to achieve, but I don't understand exactly why it almost works. Spacing both sides during transition, spacing hidden after transition, but with a slight amount of clipping of image: https://codepen.io/anon/pen/LWqPJB
body {
margin: -6%;
}
div#slider {
overflow: hidden;
}
div#slider figure img {
width: 18%;
float: left;
padding-left: 1%;
padding-right: 1%;
}
Although, it's not a perfect solution, the second alternative that seems to do the job is:
div#slider {
margin-left: -6%;
margin-right: -6%;
overflow: hidden;
}
div#slider figure img {
width: 18%;
margin-left: 1%;
margin-right: 1%;
float: left;
}
Problem
I'm implementing a simple image slideshow in a webpage using only HTML and CSS. The code I am starting with is below and at https://codepen.io/anon/pen/wJRVwP
Currently each slide follows the next with no space between images (image 1). However, I'm trying to add a 100px space between each image that is only visible during the transition. So attempting to add a gap, I change the CSS code below;
from:
div#slider figure img { width: 20%; float: left;}
(demo 1: https://codepen.io/anon/pen/wJRVwP)
to:
div#slider figure img { width: 20%; float: left; padding-left: 100px;}
(demo 2: https://codepen.io/anon/pen/vxvoNy)
The result of changing the code adds a 100px space between all images, but, the code change introduces a new problem — images no longer align and progressively get worse after each slide change (image 2).
Question
How can I achieve a space between images and fix this? In code, how
can I change the CSS code to add a 100px space between each image, and keep
all images aligned during and after transition?
Images
demo 1 during transition.
demo 1 after transition.
required outcome.
Code
https://codepen.io/anon/pen/wJRVwP
#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: 20s slidy infinite;
}
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="austin-fireworks.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</figure>
</div>
apply a box-sizing:border-box property to all img. Add padding left and right (it look somewhat odd if you don't pad both sides).
These are the css adjustments
div#slider figure img {
width: 20%;
float: left;
padding-right: 50px;
padding-left: 50px;
box-sizing:border-box
}
Snippet below
#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;
padding-right: 50px;
padding-left: 50px;
box-sizing: border-box
}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 20s slidy infinite;
}
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="austin-fireworks.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</figure>
</div>
Change the CSS like below:
#keyframes slidy {
0% { left: 0%;}
20% { left: 0%; }
25% { left: -100%;}
45% { left: -100%; }
50% { left: -200%; margin-left: 100px;}
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; margin-left: 0px;}
}
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="austin-fireworks.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</figure>
</div>
<style>
#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: 19%; float: left;margin-left:0.5%;margin-right:0.5%;
}
div#slider figure {
position: relative;
width: 500%;
margin: 0px;
left: 0;
text-align: left;
font-size: 0;
animation: 20s slidy infinite;
}
</style>
I recently created a css slideshow based on animation,my question how should i add a description to those images that changes with every image that rotates.
Here is the code:
Html
<div id="slider">
<figure>
<img src="http://www.gettyimages.pt/giresources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" alt>
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt>
<img src="http://www.planwallpaper.com/static/images/magic-of-blue-universe-images.jpg" alt>
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt>
<img src="http://www.planwallpaper.com/static/images/magic-of-blue-universe-images.jpg" alt>
</figure>
</div>
CSS
#-webkit-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%; }
}
#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;
height:100%;
}
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;
-webkit-animation: 30s slidy infinite;
animation: 30s slidy infinite;
}
Here is the fiddel
My problem is how should i sincronize the description with the image, i would use transitions but i dont know how should i queue the transitions for the descriptions...
P.S Sorry for any grammatical mistakes.
I'd probably do something like this
The idea being it's a whole div that animated not just the image.
HTML:
<div id="slider">
<figure>
<div class="slide">
<img src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" alt />
<span class="caption">Slide number 01</span>
</div>
<div class="slide">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt>
<span class="caption">Slide number 02</span>
</div>
<div class="slide">
<img src="http://www.planwallpaper.com/static/images/magic-of-blue-universe-images.jpg" alt>
<span class="caption">Slide number 03</span>
</div>
<div class="slide">
<img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt>
<span class="caption">Slide number 04</span>
</div>
<div class="slide">
<img src="http://www.planwallpaper.com/static/images/magic-of-blue-universe-images.jpg" alt>
<span class="caption">Slide number 05</span>
</div>
</figure>
</div>
CSS:
#-webkit-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%;
}
}
#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;
height: 100%;
}
div#slider figure .slide {
width: 20%;
float: left;
background: #ccc;
}
div#slider figure img {
width: 100%;
}
div#slider figure .caption {
width: 100%;
color: #333;
font-weight: bold;
}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
-webkit-animation: 30s slidy infinite;
animation: 30s slidy infinite;
}
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>