Slick Carousel is a jQuery plugin by Ken Wheeler.
Seblod users can easily use this by installing
slicked_list, a template based upon seb_list by Seblod. Apply all the settings that Slick has available.
1
To get started, download and install the template in to Joomla the usual way i.e. Extensions >>> Manage >>> Install >>> Upload Package File.
To get started, download and install the template in to Joomla the usual way i.e. Extensions >>> Manage >>> Install >>> Upload Package File.
2
Next, navigate to Seblod Template area to create an instance of the template ie
Construction >>> Templates >>> New
There is 1 input field and 3 Select Lists to apply values to.
Title: What ever you want it to be i.e. Slick-1
App Folder: What ever folder makes sense to you i.e. Templates
Name: This is the name of the template you are using i.e. slicked_list
Type: Select List
Next, navigate to Seblod Template area to create an instance of the template ie
Construction >>> Templates >>> New
There is 1 input field and 3 Select Lists to apply values to.
Title: What ever you want it to be i.e. Slick-1
App Folder: What ever folder makes sense to you i.e. Templates
Name: This is the name of the template you are using i.e. slicked_list
Type: Select List
3
Assuming you have content with images added, you can create a List & Search type to display these with the newly added template.
For example, you might have a category called Slideshow. In this category are articles which have images uploaded. The Search and List type would pull these images in and display them using the slicked_list template. All you then have to do is
i) select the template,
ii) select a unique class name (just the class name, do not prefix with a dot i.e. my-class-name, not .my-class-name),
iii) decide whether to load from the template or elsewhere: slick.js, slick.css, and the js for the slick instance.
iv) create a Seb List Module and add the Lists & Search Type. Make sure Module is Published and on the correcy page(s) and you should be able to view it in action.
vi) play with the settings to get a feel for Slick's versatility.
Assuming you have content with images added, you can create a List & Search type to display these with the newly added template.
For example, you might have a category called Slideshow. In this category are articles which have images uploaded. The Search and List type would pull these images in and display them using the slicked_list template. All you then have to do is
i) select the template,
ii) select a unique class name (just the class name, do not prefix with a dot i.e. my-class-name, not .my-class-name),
iii) decide whether to load from the template or elsewhere: slick.js, slick.css, and the js for the slick instance.
iv) create a Seb List Module and add the Lists & Search Type. Make sure Module is Published and on the correcy page(s) and you should be able to view it in action.
vi) play with the settings to get a feel for Slick's versatility.
Create Lists & Search Type
Assuming you have content created ie articles and that the are in a category specifically for this slideshow then create a Lists & Search Type i.e.Construction >>> Lists & Search Type >>> New
Next select from the select list the content type:
What kind of items are you searching for? : Article
Next, choose the template:
How do you want to display these items? : Slick-1 (Keep clicking the template images until the one you created appears)
In the Search Form View, underneath the CCK field, add the field that will filter the Articles we want:
Article Category Id
Select Option 2 (Live + Live Value)
Enter in the input box the Category Id, or click the two little arrows next to it and select the category from the select list.
In the List View add the field that will reference the articles image i.e.
Article Image Intro.
In the Template Options, starting from the top:
Rendering - Template: Slick-1 (or whatever you named it)
Root - Class: add a class for the div that surrounds all the output (probably not necessary here)
Root - Custom Attributes: add attributes for the div that surrounds all the output (probably not necessary here)
Seblod Defaults: Style - Auto CLean: (No idea what this does)
Seblod Defaults: Style - Class (CSS): This adds a class to the div that is th parent of slick div (probably not necessary here)
Seblod Defaults: Style - Custom Attributes: This adds attributes to the div that is th parent of slick div (probably not necessary here)
Slick Identifier - the unique class name for the slick instance
Slick JS Options - Add slick.js? The Main Slick Code. Your choice to let the template add it, or add it a different way
Slick JS Options - Add this slick js? The settings applicable to this slick instance. Your choice to let the template add it, or add it a different way
Slick CSS Options - Add slick.css? The css required by Slick. Your choice to let the template add it, or add it a different way
The rest are the Slick Settings which you can play around with
Slick Settings: asNavFor
You can have more than one instance of Slick on a page, the asNavFor setting allows you to synchronize with another instance i.e.slide-1 has the title of the articles and slide-2 has the images.
If slide-1 has class slide-1, and slide-2 has class slide-2, then in template settings >>> slide-1 asNavFor: slide-2, and slide-2 asNavFor: slide-1.
Slick Settings: responsive
Add responsive behaviour by applying different settings at set breakpoints.In '1st Breakpoint in px' enter a value i.e. 768, then in 'Enter Settings for 1st Breakpoint' enter some settings i.e.
autoplay: true, autoplaySpeed: 4000, slidesPerRow: 2,.
In '2nd Breakpoint in px' enter a value i.e. 992, then in 'Enter Settings for 2nd Breakpoint' enter some settings i.e.
autoplaySpeed: 3000, slidesPerRow: 3,. Next, make sure you have enabled responsive behaviour for that breakpoint. In Slick JS Options near the top of the page, select yes for 'Add Breakpoint 1' andd 'Add Breakpoint 2'
Formatting the output
In your templates List View, select option 2 (Typography).Here you can alter the output to match your styling and layout intentions.
In the Typography column, select HTML from the select list.
Click the '+' that appears next to the select list.
Enter the desired html including a reference to the appropriate field i.e.
<img src="/$cck->getValue('art_image_intro')">.
If using bootstrap-3 then I might add this
<img src="/$cck->getValue('art_image_intro')" class="img-responsive">
If I have the Article Title field added in the Hidden position I could add this
<img src="/$cck->getValue('art_image_intro')" class="img-responsive" alt="$cck->getValue('art_title')">.
If the Art Title field was not hidden it would display with the image. The intention here is to display only the image.
Bucklash