Slider implementation alternating images and text/other contents

The CMS Questions
1

Hi there!

Been experimenting with kirby the last couple of weeks, I guess I’m still fairly new to PHP, but loving the possibilities and the CMS overall!

I’ve been fiddling with the idea of making an implementation of the Slick Slider by Ken Wheeler (slick - the last carousel you'll ever need), I just like how it works and its syntax.

The thing is, I would like to assign not only images, but text content (paragraphs) or a project credits panel at the end (generated via custom fields) to each slide. So far I have found many other slider implementations that use foreach loops on image folders, some of them taking metadata and assigning it over the image but nothing that alternates text and images in any given order.

I guess I’m getting close to the solution, but I would love if someone could point me in the right direction toward getting this to work, so far I have thought on two possible approaches:

  1. The first one would be making an entire folder for each project, upload the images/text/credits in the desired order and loop through that, but I think It would not be user friendly at all.

  2. The second one would be making a custom post-type using for example a version of Tim Ötting’s builder (see: Plugin for an extended structure field with more than one kind of field set), but from there I get lost on how to exactly structure the loop between content types :confused: (maybe because a lack of knowledge in PHP hahaha). Anyway, I think this would be clearly more user friendly when creating content.

An example of what I’m trying to achieve (in this case the order is “image-image-text-image-credits”, also it’s just an animated demo):

slider_demo.gif640×322 2.9 MB

Any tip would be greatly appreciated!

Thanks in advance,

Cheers!

2

I think I’d use the Kirby builder. If you post the HTML code that is needed for the slider, I think we can help you to achieve that.

1 Like
3

Hi @texnixe !

The slider works using a container that is after called in the js, for example:

<div class="slider-container">
    <div>content1</div>
    <div>content2</div>
    <div>content3</div>
 </div>

And the basic js looks like this:

$(document).ready(function(){
  $('.slider-container').slick({

   //slider settings

  });
});

I guess I also chose that slider in particular because I find the structure pretty straightforward. :thinking:

Thank you very much!

4

That’s pretty straightforward. All you need to do is combine that with the foreach loop of the builder:

<div class="slider-container">
  <?php foreach($page->builder()->toStructure() as $section): ?>
    <?php snippet('sections/' . $section->_fieldset(), array('data' => $section)) ?>
  <?php endforeach ?>
</div>

Now if you wrap each snippet content in a div, you should be all set up. Then each snippet can contain whatever you choose.

3 Likes
5

Amazing! That is just what I was looking for, I’ll start with that to get the slider going.

Thanks again!

Cheers :slight_smile:

6

If you run into any problems, don’t hesitate to ask. I’m sure we’ll find a solution.:slight_smile: