Category: Web Development

Responsive CSS slider

9/29/2016

Goal: Create a responsive slider with interlocking images for the Predicting Drug Action Site.

I used CSS animation to move the images across the view. The challenge was for larger screens we didn't want the images to keep scaling because they ended up taking up too much of the screen. I started with a simple setup where there were 4 images in a container that was scaled to 400%, and moved the container across the view. But it didn't scale well. So now I have 6 images (2 of each) and animate each one. It's pretty redundant and at this point it's hard to make the case that this is simpler than just using Javascript.

The images were done by Thao Do.

Thao's Website

Demo of slider with the figure width set to 100% instead of 500%

With the actual slider you only see the middle image along with a bit of the incoming and outgoing images.

<div id="slider-inner">   <figure>     <div id="sixth">       <img  src="images/torsades.jpg">     </div>     <div id="fifth">       <img  src="images/skin.jpg">     </div>     <div id="third">       <img  src="images/EMR.jpg">     </div>     <div id="first">       <img  src="images/torsades.jpg">     </div>     <div id="second">       <img  src="images/skin.jpg">     </div>     <div id="fourth">       <img  src="images/EMR.jpg">     </div>   </figure> </div>

HTML set up for the images

 1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

#slider-inner {  text-align: center;  margin: auto;  width: 90%;  height: 43em; /*media queries adjust this*/ }  #slider-inner figure {   width: 100%;   text-align: center;   /*position: relative;*/   margin: 0;   left: -200%;   max-width: 5000px; }  #slider-inner figure div {  width: 20%;  position: absolute;  display: inline-block; }  #slider-inner figure img{   width: 100%; }

Set up of the view.

 1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16

@keyframes slidefirst {   0% { left: 40%; }   0% { left: 40%; }   13% { left: 40%; }   16% { left: 20%; }   29% { left: 20%; }   32% { left: 0%; }   45% { left: 0%; z-index: -1;}   48% { left: 80%; }   61% { left: 80%; }   64% { left: 80%; z-index: 1;}   77% { left: 80%; }   80% { left: 60%; }   93% { left: 60%; }   100% { left: 40%; } }

Example of the animation. Made of one these for each of the 6 images.

1 Comment

Notes on deploying to heroku

Responsive CSS slider

Demo of slider with the figure width set to 100% instead of 500%

Categories