Time And Money Saving Tips For Weddings
Time And Money Saving Tips For Weddings
April 28, 2020 by Sarah Connor
Where Can You Even “Drive” a Driverless Car?
Where Can You Even “Drive” a Driverless Car?
May 2, 2020 by James Wright
Food, Fitness & Type 1 Diabetes: Jamie’s Story
Food, Fitness & Type 1 Diabetes: Jamie’s Story
May 7, 2020 by James Peak
How Data World Is Going to Change by 2017?
How Data World Is Going to Change by 2020?
May 11, 2020 by Eric Lawson
Have Astronomers Found Alien Megastructures?
Have Astronomers Found Alien Megastructures?
May 28, 2020 by Anne Raynor
Learning How to Learn: The Developer Skill
Learning How to Learn:
The Developer Skill
Jun 9, 2020 by Bethany Smith
Tailoring Tactics to Drastically Improve Your Dress
Tailoring Tactics to Drastically Improve Your Dress
Jun 22, 2020 by Nick Tusk
previous arrow
next arrow
Time And Money Saving Tips For Weddings
Time And Money Saving Tips For Weddings
Where Can You Even “Drive” a Driverless Car?
Where Can You Even “Drive” a Driverless Car?
Food, Fitness & Type 1 Diabetes: Jamie’s Story
Food, Fitness & Type 1 Diabetes: Jamie’s Story
How Data World Is Going to Change by 2017?
How Data World Is Going to Change by 2017?
Have Astronomers Found Alien Megastructures?
Have Astronomers Found Alien Megastructures?
Learning How to Learn: The Developer Skill
Learning How to Learn: The Developer Skill
Tailoring Tactics to Drastically Improve Your Dress
Tailoring Tactics to Drastically Improve Your Dress

Joomla Article Slider

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

Description: Your visitors will love this nice looking Joomla Article slider which you don't have to maintain after setting it up.

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

Minimum version: 3.5.0.0

Tags:

Settings

The Joomla Article Slider uses the most common slider type. It displays one slide at a time, which contains details from a single article. It uses the boxed layout, which makes the slider fit nicely into the container you place it.

The most interesting part of the slider are the thumbnails. They’re vertical, and have two purposes. First, they allow and easy way to browse the slides. Second, they indicate how many slides there are to see. On each thumbnail you can find the title of the slide as a caption.

The other navigation option is the arrow. It allows checking the slides one by one. The touch navigation is also available.

Layers

Each slide has the same layout, which makes the Joomla Article Slider perfect for creating a dynamic slide. There are two heading and two button layers on each slide. They help displaying the category, title, date and author of the post. There’s also a CTA button that can take the reader to the post.

On the button layer there’s an interesting hover effect. The button itself has a white border with transparent background. But on mouse enter the transparent color changes to white.

Button layer background configuration for normal (left) and hover (right) state

Animations

The only animation the Joomla Article Slider has is the Main animation. The Main animation is the effect that moves the backgrounds and the layers, if neither has their own animation. in this slider’s case this movement is horizontal, which looks simple but professional.

Layout

To ensure the legibility of the texts, the background image of each slide has a dark blue overlay. This helps increasing the contrast between the background and foreground. So your visitors will be able to read the post title, date and author more easily.

Slide background overlay settings

By default the headline would be too wide. This makes it more uncomfortable to read, so we set a max width on the heading. As a result, the visitor can read the text more comfortably. Additionally, it looks nicer as well.

Responsive

Smart Slider 3 uses a unique way to build slide. It’s called Default positioning, and it works very similar to the way page builders work. Every layer acts like a block, so they won’t overlap each other. This helps creating responsive sliders effortlessly, because the layers make space for themselves. The only change we had to make in the slider for mobile was reducing the font size of the headline. as it was too big. Although it wasn’t necessary, we also increased the top and bottom paddings of the slide, creating a nicer layout.

Default look on mobile (left) and optimized look (right)

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.3 s
Speed Index
0.7 s
Largest Contentful Paint
1.1 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0
93

Mobile

First Contentful Paint
1.2 s
Speed Index
1.7 s
Largest Contentful Paint
3.1 s
Time to Interactive
2.7 s
Total Blocking Time
130 ms
Cumulative Layout Shift
0

Related Post: How to Create a Joomla Slider?

Related Post: Create A Responsive Thumbnail Slider


Similar Sliders -

WordPress Magazine SliderWordPress Post Slider ShowcaseWordPress Post Slider CarouselWordPress Post Slider with Thumbnails