{"id":1622339,"date":"2020-05-13T14:16:25","date_gmt":"2020-05-13T14:16:25","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&p=1622339"},"modified":"2021-06-01T10:18:03","modified_gmt":"2021-06-01T10:18:03","slug":"creating-sliders-with-dynamic-post-content","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/fr\/course-lesson\/creating-sliders-with-dynamic-post-content\/","title":{"rendered":"Creating Sliders with Dynamic Post Content"},"content":{"rendered":"\n

You’ll use the View block to create dynamic sliders with Toolset. This way, you have full control over which content to query<\/a> and the appearance of the sliders. Each slide can contain one or several items, with fields, links and anything else that you need.<\/p>\n\n\n\n

As sliders usually feature images, be sure to check out our detailed lesson about displaying images with Toolset<\/a>.<\/p>\n\n\n\n

Steps for Creating Dynamic Sliders<\/h2>\n\n\n\n

Create a View to display your slider<\/h3>\n\n\n\n
  1. To start, edit or create a page, post or a template and insert the View <\/strong>block.<\/li>
  2. In the View-creation wizard, enable pagination and in the Select View Loop Style<\/strong> section, choose the Unformatted <\/strong>(last) option.<\/li>
  3. In the last step of the wizard, select the post type for which you want to display posts.<\/li>
  4. Click to finish the wizard and your View is ready.<\/li><\/ol>\n\n\n\n

    Display post fields and apply custom styling<\/h3>\n\n\n\n
    1. Insert a Container <\/strong>block so you can add a background to your slider. For example, you can set the slide’s background to be a dynamic image coming from the post’s featured image.<\/li>
    2. Use Toolset blocks to add other dynamic fields<\/a> to your slider, like the post title.<\/li><\/ol>\n\n\n\n

      Make your View slide automatically<\/h3>\n\n\n\n
      1. Click to select the main View <\/strong>block.<\/li>
      2. In the right sidebar, expand the Pagination <\/strong>section.<\/li>
      3. Select the Pagination enabled with automatic AJAX transition <\/strong>option.<\/li>
      4. In the Items Per Page <\/strong>dropdown, select 1<\/strong>. You can also tweak other options like the transition effect and duration.<\/li><\/ol>\n\n\n\n

        Change the pagination to dots<\/h3>\n\n\n\n
        1. Click to select the View’s Pagination<\/strong> block.<\/li>
        2. In the right sidebar, change pagination controls from numbers to dots.<\/li>
        3. Additionally, you can expand the Advanced <\/strong>section and center align the pagination controls.<\/li><\/ol>\n\n\n\n
          <\/div>\n","protected":false},"author":4341,"featured_media":1629961,"template":"","related-lesson":[8415,8411],"class_list":["post-1622339","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-sliders","related-lesson-view"],"_links":{"self":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/1622339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson"}],"about":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/types\/course-lesson"}],"author":[{"embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/users\/4341"}],"version-history":[{"count":7,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/1622339\/revisions"}],"predecessor-version":[{"id":2073399,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/1622339\/revisions\/2073399"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/media\/1629961"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/media?parent=1622339"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/related-lesson?post=1622339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}