Submit your widget

2016 Awesome Pointy Slideshow

Created 2 years ago   Views 14199   downloads 4072    Author codyhouse
2016 Awesome Pointy Slideshow
View DemoDownload 1.0 MB
14
Share |

This is a slideshow with sliding-in panels that unveil new, fixed background images.

Today’s resource is a simple, responsive slider, with a sharp design and an interesting motion effect: with each new slide item, a sliding-in block of content covers the old one, and unveils a new image.

Creating the structure

The HTML structure is composed by two main elements: a ul.cd-slider for the slides, and a ol.cd-slider-navigation for the slider navigation; both are wrapped inside a div.cd-slider-wrapper.

<div class="cd-slider-wrapper">
	<ul class="cd-slider">
		<li class="is-visible">
			<div class="cd-half-block image"></div>
 
			<div class="cd-half-block content">
				<div>
					<h2>Slide Number 1</h2>
					<p>
						<!-- content here -->
					</p>
				</div>
			</div>
		</li> <!-- .cd-half-block.content -->
 
		<li>
			<!-- item content here -->
		</li>
 
		<!-- addition list items here -->
	</ul> <!-- .cd-slider -->
 
	<!-- The ol.cd-slider-navigation element is created using jQuery and inserted here-->
</div> <!-- .cd-slider-wrapper -->

Note that the ol.cd-slider-navigation element is not directly inserted in the HTML but created using jQuery.

Adding style

On small devices (viewport width smaller than 900px), the slider structure is pretty straightforward: the .cd-slider element has a relative position while its children<li> have an absolute position, with a top and left of zero.
All the list items are translated to the right, outside the viewport (translateX(100%)); the .is-visible class is added to the visible one to move it back into the viewport (translateX(0)).

.cd-slider {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.cd-slider li {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: translateX(100%);
  transition: transform 0.6s;
}
.cd-slider li.is-visible {
  transform: translateX(0);
}

Read more:https://codyhouse.co/gem/pointy-slider/

Tag: slideshow