{"id":1771,"date":"2026-07-28T23:02:59","date_gmt":"2026-07-28T23:02:59","guid":{"rendered":"http:\/\/home.test\/canvas-wp-test\/thumbnails-slider\/"},"modified":"2026-08-20T18:42:25","modified_gmt":"2026-08-20T18:42:25","slug":"thumbnails-slider","status":"publish","type":"page","link":"https:\/\/demos.canvaswp.com\/classic\/thumbnails-slider\/","title":{"rendered":"Thumbnails & Slider"},"content":{"rendered":"
\n
\"100%x180\"<\/a><\/div>
\"100%x180\"<\/a><\/div>
\"100%x180\"<\/a><\/div>
\"100%x180\"<\/a><\/div><\/div>
<\/div>

Custom Content<\/h4>
\"Card

Some quick example text to build on the card title and make up the bulk of the card’s content.<\/p>Go somewhere<\/a><\/div><\/div><\/div>

\"Card

Some quick example text to build on the card title and make up the bulk of the card’s content.<\/p>Go somewhere<\/a><\/div><\/div><\/div>

\"Card

Some quick example text to build on the card title and make up the bulk of the card’s content.<\/p>Go somewhere<\/a><\/div><\/div><\/div><\/div>

<\/i><\/div>

Slider<\/h3>
\"Slider<\/div>
\"Slider<\/div>
\"Slider<\/div><\/div><\/div><\/div>
<\/div>

With Fading Animation & Thumbs<\/h4>
\"Slider<\/div>
\"Slider<\/div>
\"Slider<\/div><\/div><\/div><\/div>
<\/div>

Full Thumbs Grid<\/h4>
\"Wedding<\/div>
\"Wedding<\/div>
\"Wedding<\/div>
\"Wedding<\/div>
\"Wedding<\/div>
\"Wedding<\/div><\/div><\/div><\/div>
Note:<\/strong> You can also add 3,4,5,8,10 & 12 Thumbs Grid by adding the grid-*<\/strong> class.<\/div>
<\/div>

With Content<\/h4>
\"Slider<\/div>
\"Slider<\/div>
\"Slider<\/div><\/div><\/div><\/div>

Pair any FlexSlider with text columns to build rich, content-driven layouts. The slider floats neatly beside your copy at a fixed width, so captions, descriptions and calls to action sit alongside the imagery without breaking the responsive grid on smaller screens or tablets. It adapts cleanly across breakpoints.<\/p>

Every slider option is data-attribute driven, so you can enable thumbnails, fade transitions, autoplay or custom navigation without writing a single line of JavaScript. Mix and match the column widths to wrap text around the gallery, drop the slider into a card, or float it left and right within an article. Because the markup follows the Bootstrap grid, your slideshows stay perfectly aligned with surrounding content and reflow gracefully from desktop down to mobile devices, keeping captions readable throughout the design.<\/p>

<\/i><\/div>

Bootstrap – Carousel<\/h3>