Skip Navigation

[Resolved] adding pagination to flex slider from modules samples

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.

This topic contains 15 replies, has 2 voices.

Last updated by Marisa 6 years, 4 months ago.

Assigned support staff: Luo Yang.

Author
Posts
#303551

I found a super awesome solution to creating swipe enabled sliders from Custom Content (including fields).

I combined types and views with Shortcodes Ultimate Extras Add-on and used the Content Slider Shortcode:

The result looks great in desktop and mobile:
hidden link

(it has nothing to do with soliloquy even though that's in the slug).

My View settings are as follows:

I checked case stories.

My loop output looks like this:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
          [su_content_slider arrows="yes" pages="no"]<wpv-loop>[wpv-post-body view_template="SU Single"]</wpv-loop> [/su_content_slider]
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		[wpml-string context="wpv-views"]<strong>No items found</strong>[/wpml-string]
	[/wpv-no-items-found]
[wpv-layout-end]

My content template looks like this:


[su_content_slide]
[types field="case-story-image" size="full" align="none"][/types]<div class="case-story-text">
  <h1>[wpv-post-title]</h1><p class="story">[wpv-trim-long words="20"][types field="case-story-text" output="raw"][/types][/wpv-trim-long]</p></div>
[/su_content_slide] 

My css looks like this:

 .case-story-text {
      position:absolute;
      bottom:10%;
      right:20px;
      background-color:rgba(0,0,0,.5);
      display:block;
      width:30%;
      padding:10px 20px 0;
    }
    p.story {
      color:#fff;
      font-size:18px;
    }
	h1 {
      color:#fff;
    }
@media screen and (max-width:800px) {
  
      .case-story-text {
          position:relative;
          background-color:#fff;
          margin-top:15px;
          width:100%;
          float:left;
      }
      p.story, h1{
          color:#6e6e6e;
      }
}

I really hope this helps someone else. Combining types and views with SU is amazingly powerful. The code for the above using only Content Slider from SU would have been many more lines without Types and Views to query the custom post types and let me have granular control over the content template style (the slides).

And most valuable, due to the Views query loop, I can make a change in one place and it changes all slides. Also the client or team can add a case story and it will magically appear in the slide, why I love to use Views in the first place.