Performing all steps from the Creating sliders with Types and Views tutorial let you create a complete fully functional slider. In this advanced tutorial you can learn more about  sliders from the technical point of view. We’ll show some usfeul tips about advanced element’s positioning and possible issues caused by common CSS mistakes.

We will explain more about:

  • HTML structure created by the pagination script
  • CSS styles added by the pagination script
  • The “magic” behind the JS code which makes transition effect happen

Let’s use WooCommerce slider that we have created before.

WooCommerce products slider.
WooCommerce products slider.

Each slider module is built of at least 2 main elements:

  • main slider content (View Loop Output section)
  • navigation (View pagination in the Filter section)

So the basic HTML structure may look like this:

Views pagination script adds one additional element that wraps around all elements, so our basic structure will look like this after the script is executed (after page has loaded):


This is important because wpv-pagination width and height are set based on JS calculations. You need to remember about it styling:

Here is an HTML structure for the examples below:

Let’s explain it by the example.

Floated elements

One of the method of arranging HTML elements side by side is to use floats.

WooCommerce products slider - after clearing floated elements
WooCommerce products slider – after clearing floated elements

floated-cleared

CSS float property makes elements exist outside the normal document flow.

It means that in the example above:

  • .woocommerce-slider-itemneeds an clearfix hack OR
  • .woocommerce-slider-item needs an overflow:hidden property OR
  • next element after .woocommerce-slider-content needs clear:left property

Technicaly speaking floats need to be cleared. The clearfix method is the most universal method of clearing floats. Basicly –  it will always work (the 2nd method has an side effect while using CSS box-shadow property on children elements, and the third method requires an additional HTML element.).

Why is it important?

It is because .woocommerce-slider-image height depends on its content height. If elements inside it are floated then .woocommerce-slider-item height will be 0 (or if it has padding/borders propery it will be as tall as sum of top and bottom paddings + top and bottom border width)

On the example below you can see what happens if floats are not cleared.  So if floats are not cleared then .wpv-pagination element added by the pagination script will not have a correct height, because its height depends on .woocommerce-slider-item height. It will affect slide transition animations.

WooCommerce products slider - without clearing floated elements
WooCommerce products slider – without clearing floated elements

floated-not-cleared

Absolutely/relatively positioned elements and negative margins

A tipical example of absolute positioning or negative margins usage is to move navigation controls from the bottom to the slide content area.

Absolute-positioning

In this example .woocommerce-slider-nav has position:absolute. So it’s moved up from its default position. In that case navigation links (prev post/next post) inside the nav container will be covered by .wpv-pagination so they will not be clickable when slides are being switched until the end of the animation. It happens because  .wpv-pagination element has: position: absolute and z-index:5, while slides are switched.

To prevent .woocommerce-slider-nav  from being covered by the next slide during the animation we need to give it a z-index property. z-index value must be higher than 5.

Slide transition
Slide transition