Skip Navigation

[Resolved] Enlarge middle item of a carousel slider View

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to create a carousel-style slider View that includes 3 posts per page. I would like to add a specific class to the middle item to make it appear larger than the other 2 items on the page.

Solution: Create a View with pagination, that shows 3 posts per page. You'll be able to use the Loop attributes item, index, wrap, pad, and pad-last to apply different styles to each of the 3 posts in a single page. Something like this, where the class is "middle-element":

[wpv-layout-start]
[wpv-items-found]
     <wpv-loop wrap="3" pad="true">
        [wpv-item index=2]
          <div class="middle-element">Post content here</div>
        [wpv-item index=other]
            <div>Post content here</div>
        [wpv-item index=pad]
          <div class="middle-element">Post content here</div>
        [wpv-item index=pad-last]
            <div></div>
     </wpv-loop>
[/wpv-items-found]
[wpv-no-items-found][wpml-string context="wpv-views"]<strong>Nothing to display</strong>[/wpml-string][/wpv-no-items-found]
[wpv-layout-end]

Relevant Documentation:
https://toolset.com/documentation/user-guides/digging-into-view-outputs/#vmeta-wpv-loop-parameters

This support ticket is created 6 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 5 replies, has 2 voices.

Last updated by Steve 6 years, 7 months ago.

Assisted by: Christian Cox.

Author
Posts
#848350
Mashlink-Testimonials.jpg

I m building a carousel of quotes for a client- I'll display three at a time from a larger number of cpts but will always want the middle one to bey styled differently (so it appears larger)

Can you suggest a way of adding a class dynamically to the item that appears in the middle?

Thanks

#848805

Sure, it sounds like you will create a View with pagination, that shows 3 posts per page. You'll be able to use the Loop attributes item, index, wrap, pad, and pad-last to apply different styles to each of the 3 posts in a single page. Something like this, where the class is "middle-element":

[wpv-layout-start]
[wpv-items-found]
     <wpv-loop wrap="3" pad="true">
        [wpv-item index=2]
          <div class="middle-element">Post content here</div>
        [wpv-item index=other]
            <div>Post content here</div>
        [wpv-item index=pad]
          <div class="middle-element">Post content here</div>
        [wpv-item index=pad-last]
            <div></div>
     </wpv-loop>
[/wpv-items-found]
[wpv-no-items-found][wpml-string context="wpv-views"]<strong>Nothing to display</strong>[/wpml-string][/wpv-no-items-found]
[wpv-layout-end]

We have documentation about these Loop properties here: https://toolset.com/documentation/user-guides/digging-into-view-outputs/#vmeta-wpv-loop-parameters

#860084

Thanks for this Christian - one issue i'm coming up against is that because i only have 5 records

the first page shows
posts #s 1,2,3
the second shows 4,5,5 ( last post repeats to fill in the empty slot)
is there a away to make it loop so the second page shows
posts 4,5,1

#860253

Sorry I inadvertanly put a content template into [wpv-item index=pad-last]

I can remove that but then get a blank spot- so still same issue

#860588

You can insert anything you want in the pad-last block, including a duplicate View that only includes 1 result (i.e. post #1). However, that does not affect the sequence of the next page of results. In other words, if this gallery loops continuously, then you will see post #1 at the end of page 2 and then the gallery will restart so you will see post #1 again in page #1.

#878999

Ok i hear you - was hoping for something truly "circular" but i understand im using a slider to mimic the behavior i want. I'm good to go.

Appreciate the help