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
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 for the slides, and a for the slider navigation; both are wrapped inside a

<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">
					<h2>Slide Number 1</h2>
						<!-- content here -->
		</li> <!-- .cd-half-block.content -->
			<!-- item content here -->
		<!-- addition list items here -->
	</ul> <!-- .cd-slider -->
	<!-- The element is created using jQuery and inserted here-->
</div> <!-- .cd-slider-wrapper -->

Note that the 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 {
  transform: translateX(0);

Read more:

Tag: slideshow