WeStandWithUkraine

1279 Posts
Bucklash
6 years ago
6
Topic

Hi folks

I have created a template for Seblod users called jb_slicked_list

It is based on seb_list and allows you to implement Slick Carousel by Ken Wheeler. Download it form GitHub: jb_slicked_list

I have tested it and so far everything seems to work really well.

Download it and have a go, it should be pretty solid.

USAGE:

  1. Install the template the typical Joomla way
  2. In Construction/Templates click New
  3. Options "Title": Create a name, "Name": slicked_list, "Type": List.
  4. Add it to the List view in your Search & List type. Note: The list items are placed in <div> 's, not an <ul>
  5. Place the list in a SEB LIST MODULE 
  6. You can choose whether or not to load slick.js, if you have more than one slick-instance then make sure you only load it once
  7. You can choose whether or not to load the js for your slick instance.
  8. You can copy and paste the outputed code in to your template.js file, then turn off the js for the slick-instance, up to you.
  9. All the settings from slick are available in the template.
  10. For the responsive behaviour you can have up to five breakpoints, each one can be turned on or off at any time

Please download and test. Be great to get some feedback. I used DesignBengels seb_rotator as a starting point, so thank you for sharing that

    

Bucklash

Get a Book for SEBLOD
83 Posts
squareweb
6 years ago
2
Level 1

Thanks for sharing,

I've installed and followed instructions on http://www.seblod.com/resources/tutorials/slick-carousel-template-for-seblod

All my banners are showed at the same time under each other.  It seems that all banner-images were placed within one div.

So I've surrounded divs around the image-field myself (see image). Now no carousel-image is displayed in front-end.

Any idea what I'm doing probably wrong?

Thanks in advance.

1279 Posts
Bucklash
6 years ago
1
Level 2

Hi

Thanks for trying it out

It's a bit of a complicated template but hopefully makes sense the more you use it

You have the divs in 'element-open'

That position (and element-closed) are to override the output AROUND your list item. That way you can have dynamic values added to each item. 

Instead, just put the image field in 'element' position. Add aditional divs and fields iff you like.

Make sure in settings to add the unique class name that slick requires.

You can add extra classes to each item in the settings but they will be global, hence the choice to use 'element-open' (if you use this, element-closed MUST BE USED TOO)

Let me know how you get on

Bucklash

83 Posts
squareweb
6 years ago
0
Level 3

Thanks Backlash for replying,

I've changed to "element"... now all my banners are visible at the same time....

Below the debug-info which tells me the images are place in one div ass opposed to one div per image...

Any suggestion why?

Thanks again

1279 Posts
Bucklash
6 years ago
2
Level 1

Hi

"now all my banners are visible at the same time...."

Not sure what you mean, sorry...

    

Slick takes each slide and wraps it in what you see in the screenshot.

You have just an image field, so that gets wrapped by div.slick-item

Next you see the modal links applied by seblod's image settings. I turn this off. If I want modals I turn on the modal option in template setting and set it to Bootstrap 3. Provide a class name ('my-slick-modal'), then add as an attribute to any appropriate fields in 'element' position: data-toggle="modal" data-target="my-slick-modal')

In the you will see the outputted js. Can you post that, see what settings you have.

   

I have created some dodgy and probably VERY boring youtube videos

Check them out, see if they help

83 Posts
squareweb
6 years ago
1
Level 2

Well Bucklash.... your "very boring videos".... did the trick for me (:-

To start with: I did not create a search list of type: jb-slick-list .... Now i did and following your vids for the settings... it worked...

Thank you so much for helping me out and for this nice solution....

Cheers

1279 Posts
Bucklash
6 years ago
0
Level 3

Hi

Glad you sorted it

  

thanks for giving it a go

Bucklash

   

ps

I use the template for all of my list and searches now: ultra clean output, modals, and li, div, ol output choices.... 

Get a Book for SEBLOD