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:
- Install the template the typical Joomla way
- In Construction/Templates click New
- Options "Title": Create a name, "Name": slicked_list, "Type": List.
- Add it to the List view in your Search & List type. Note: The list items are placed in <div> 's, not an <ul>
- Place the list in a SEB LIST MODULE
- 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
- You can choose whether or not to load the js for your slick instance.
- 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.
- All the settings from slick are available in the template.
- 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
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.
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
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
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
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
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....
