Pros and Cons of Developing WordPress Sliders with Views

   Amir

Discussions

October 23, 2014
8

Developing your own sliders with Views is a little like hunting mosquitoes with a tank. But, if you’re already driving a tank, does it make sense to step out every time you need to squash a mosquito?

There are so many great WordPress slider plugins, which makes you wonder what’s the sense of implementing it yourself. Honestly, if the only thing you need to develop is a slider, your best option is to just use a slider plugin. It’s free, instant and works.

However, if you already use Views to build much of your site, then a slider is yet another tiny element. There’s little sense in cluttering your site with additional code, for a slider.

The great thing about developing sliders with Views is that you get exactly what you want. That’s pretty much the main benefit of building anything with Views. You have full control over the output, so you get anything that you want.

The tutorial on building custom sliders doesn’t just look long. It’s long, because it explains the inner workings of sliders. You can build excellent sliders with Views without reading that page at all. However, if you want to achieve truly unique designs, it’s important to understand the CSS and Javascript, which makes sliders work.

slide-statis

When you develop your own sliders, you have control over:

  • What slides contain
  • How slides change
  • How the entire slider looks

Since a View can query anything from the database, so can your sliders display anything. After all, your slider is just a View, which displays one item at a time.

The process of developing a slider with Views is:

  1. Decide what you want the slides to contain. This can be users, posts and taxonomy.
  2. Decide how many items show in every slide. That’s right, you can display more than one element in every slide.
  3. Design the content of slides. The easiest way to implement this would be using a Content Template, displayed inside the View.
  4. Choose how slides transition. You can enable automatic transition, next/prev arrows and slide selectors.
  5. Design the look of the transition controls. Use text or images as slide controls.

Sliders have moving elements and this motion is implemented using Javascript and CSS. If you want slides to contain advanced positioning, such as floating elements or absolute positions, you will benefit a lot from reading the sliders tutorial. Seeing the full details of what makes slides move will help you understand how you can design the slides themselves, so that they don’t spill out of the slider.

Conclusion

If the only thing you’re considering Views for is a simple slider, there are plenty of easier solutions. However, if you’re already using Views to build sites, it makes perfect sense to build your sliders with Views too.

Did you get a chance to build custom sliders with Views? Tell us!

 

Comments 8 Responses

  1. I’ve used Views to create a slider, and I’ve used other plugins, and I mostly agree with your assessment. However, I would say that even on a site where I’m already using Views, if all I need is a plain vanilla image slider, I wouldn’t build it in Views.

    Also, when building a slider in Views, I with there were a Crossfade transition option. The existing Fade transition is a fade out of one slide followed by a fade in of the next, which I find much less appealing.

    • Thanks for the feedback. Let’s see what else comes up and we can add all these things in one go.

  2. I agree with Robert. Since many UI/UX people are saying conventional sliders are annoying to most people, a cross fade transition is likely the most pleasing and acceptable to most people. And of course, I assume you would have control of transition time.

  4. I realy like the full control what you have with Views to create sliders. I used it in many ways. I was tired to find slider plugins what did exactly what I want. Sometimes I need to add some javascript into the view, but that’s also easy to do.
    At the other hand, I miss the option of using thumbs for navigation.

  5. We’ve also used Views & Types with other slider libraries like FlexSlider and Nivo. It makes it a breeze to manage custom slider JS & CSS in a single, accessible place. We design custom “slide” post types that include accessible captions & alt text and fields for Google Analytics tracking.

    One feature that would be welcome would be the ability to enqueue one or more additional 3rd-party scripts as part of a view or content template. The JS block is great, but it would be nice to be able to enqueue external scripts as well.

    • So, you loaded the content with Views, created the HTML templates with Views and used external JS to switch slides? Sounds like a good plan to me, giving you the best of all worlds – full control over the HTML and functionality and nice transition effects.

      Actually, previous Views versions allowed to load JS code. I guess that the GUI for that was so obscure that nobody noticed it. We removed that feature a few months ago and no one noticed it went away.

      • We still use Views JS blocks for all custom javascript — either to call or extend external scripts. But we didn’t want to copy&paste entire 3rd-party libraries into a Views JS block. But maybe we’re a bit of an edge case — as a university, we run multisite with hundreds of microsites, most of which use our standard theme. We don’t have the luxury of customizing the theme for each site — so we rely on Views & Types for almost all customization. Thanks!