China

Written by James Norris on February 27, 2018.

What we can learn from education in China

Many people believe US innovations will eventually trickle down to poor countries. I believe the opposite. “How will we educate children in the future?” This is a question that I’ve been asked for years.

China
Ship

Written by James Norris on February 12, 2018.

Shipwreck found off African Coast

Trying to find the San Jose' has often been called the "holy grail of shipwrecks." It was finally discovered off the coast of Cartegena, Colombia, in 2015.

Ship
Rock

Written by James Norris on February 27, 2016.

A California Road Trip

A week of Steinbeck, Yosemite, and the open road. By the time I was 14 I had traveled to Italy, France, and England. But I had never seen much of America until last summer.

Rock
next arrow

Articles

💻 Settings | 🎓 Layers | 🎉 Animations | 🏗️ Layout | 📱 Responsive | Speed

Description: Present your latest articles on your home page in a special slider to attract your reader's interest!

Premium: Gain access to all slider templates with a single purchase.

Minimum version: 3.5.0.0

Tags:

Settings

The Articles is a full width slider where you can display your latest posts. There are many kinds of navigation, which can be used to switch your slider. One of them is the bullet control. These are the little dots under the slider, which can be empty or they can contain the title or the index of your slides. Now the bullets are on the right side of the slider, and display the title of the slides.

These bullets are great, when you have many slides, and you don’t want your user to click through all of them with arrows. You can even turn on thumbnails for them like in this example, so when the mouse cursor is over them, they will show a preview of your slides. With this, the navigation can be super fast, and the desired contents can be easily found.

Bullet control

Usually people use this kind of navigation in the bottom of the slider, but it can also look great in a vertical display, on the side of the slider, especially on full page sliders. To know the number of the slides can be helpful, for example when someone is watching a slider made from photographs. It can help the user know how many of them left. It is a dynamic and familiar navigation for the people, which gives a great control to them over the slider.

Layers

Each slide contains 2 text layers on the top and bottom, and a large heading layer between them. If you hover over the heading layer, the color will change. This is a hover effect on the heading, which style you can customize in the Style tab of the layer window.

Different hover color

Animations

This slider is a vertical slider. You can switch the slider vertically with the arrows or bullets, with scrolling or dragging. The main animation is also vertical, so the visitor can scroll through the slides.

Vertical animation

Layout

The layout of the slides is very simple: the layers are under each other. The bullets are on the right side, they display the title of the slides, and if you hover over them, they show the thumbnail images. On the bottom of the slides you can see the next arrow which you can switch slides. The previous arrows are hidden, so you can see only the next arrow.

Responsive

If you check the slider on mobile, you can see the slider is fully responsive. The texts aren’t too big, thanks to the text scale option. With this option you can set the text sizes device specifically. Also, you can notice, there is an extra layer on mobile: an area layer below the texts. This area has a black color with opacity, with this you can make the text legible. This layer is hidden on tablet and desktop, because the text are legible on bigger screens.

Area layer on mobile

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!

98

Desktop

First Contentful Paint
0.8 s
Speed Index
0.8 s
Largest Contentful Paint
0.9 s
Time to Interactive
0.8 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.031
96

Mobile

First Contentful Paint
1.1 s
Speed Index
1.2 s
Largest Contentful Paint
2.7 s
Time to Interactive
2.6 s
Total Blocking Time
30 ms
Cumulative Layout Shift
0

Related Post: 12 Beautiful Full Width Slider Examples


Similar Sliders -

Feature SliderWordPress Post Slider ShowcaseMinimal Slider with LightboxFeature Card