How to create a custom slider with Pods! Pt2 (adding text to your slides)

If you have not checked it out yet, start with PT1 of this series.

If you followed the tutorial for how to create a custom image slider tutorial PT1 you should now have a slider that is sliding images across the screen, but you’re here because you also want an editable title and excerpt for each slide. Slide layouts that include a title, excerpt, and a link are the most common around, and the Pods Framework makes it very easy to build your own quickly.

Step 1

First thing you have to do is build out your fields for your slides. Go back to your Pods admin area and click “edit” on the ‘Slider’ pod you just created and add the following new fields: Title (type: plain text), Excerpt (type: plain paragraph text), Read More (type: plain text).

*Note that if you wanted you can use the WYSIWYG field type for excerpts. This will allow you to customize the formatting of your text area without writing code.

Step 2

Now we must pull in the data from our new fields to our template so that we can easily display them inside each slide.

Step 3

Let’s add your new fields to our slides!

Step 4

Styling. You can now style the heck out of your new  <div class="slideContent"> container. Here is some starter styling for you.

In Part 3 I will show you how to make a slider with variable slide layouts! This is useful if you have photos in your slides where the text overlay may look better on the left side or the right side. It will allow you to format your slides entirely based on your layout selection in the administration screen! 

Wanna know why this web designer’s blog looks a little basic and untouched? Check out what this blog is all about and the Web Design For Idiots project

The_Idiot

About Lindsay

Self made millionaire.. Oops I mean web developer.. who started out learning how to build websites with tables and dreamweaver, I now almost entirely focus on CMS-based development, usually WordPress. I love coding and designing and regularly switch between my left and right brains.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">