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.
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:
- floated elements inside a slider,
- relatively/absolutely positioned elements,
- elements with negative margin
Here is an HTML structure for the examples below:
Let’s explain it by the example.
One of the method of arranging HTML elements side by side is to use floats.
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.
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.
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.