Carousel Slider Setup and Configuration
The below documentation assumes knowledge of how to manage and add modules to your Drupal 7 site. Some basic knowledge of other front-end aspects of the Drupal 7 admin and some experience with views would be very helpful as well.
Adding the Module(s) -
- This carousel feature requires Flex Slider. You must first add the Flex Slider module and related library as detailed on the Flex Slider module page (you can also copy the files from an existing site and upload to the new site). Our sites typically have a contrib and custom folder within the modules directory, if adding manually, add this to the contrib folder within site/modules.
- Grab the Carousel Slider Feature 7.x-1.x from the Drupal Modules folder here - https://utexas.box.com/v/web-documentation. Unzip and add to the modules directory on your site account at the site/modules/custom or site/modules folders.
- Enable the modules at admin/modules. I'd recommend doing them one at a time, Flex Slider first, to make sure everything gets set properly with the Carousel Slider Feature.
CSS Code
Make sure you grab the carousel specific CSS code from (https://gist.github.austin.utexas.edu/jtp2265/e88a44c103d0b588db2cd21200...) and add it to your site.css file if hasn't already been included (I may include this in the module for the future).
Taxonomy
Taxonomy terms do not seem to export with the vocabulary so you'll have to re-add the taxonomy term "Featured" to the Carousel vocabulary at admin/structure/taxonomy.
Fields and Templates
Visit admin/templates and enable the carousel fields on the templates you’d like to make available for selection on the carousel content type - the order here determines the order of the fields / tabs that show up on the template selection when editing the page. I move the carousel fields to the very top starting with image, then caption, link, and finally tags.
I recommend configuring the following templates for use with the carousel content fields -
- Header with Content & Sidebars
- Full Content Page & Sidebar
- Featured Highlight
- Full Width Content Page & Title
Also visit the carousel content type's display settings at admin/structure/types/manage/carousel/display to enable the carousel image and caption to be available as blocks for placement on the page (so you can place these fields on the page in lieu of using the promo or hero image for example and use it for both page display and slider display purposes).
- Check the checkboxes under the “Display as Block” column in the table. You'll also have to check off the other standard fields as well (reference the standard page content type to verify what should be checked off or not).
Carousel Content Type Settings
Visit the carousel content type settings at admin/structure/types/manage/carousel, click 'edit'
- Select the 'Available Templates' tab
- Click the checkbox next to the templates that you've made available for the content type.
XML Sitemap - Make sure the content type isn’t excluded by XML Sitemap. Set a desired priority for indexing or leave as shown.
View(s) Configuration
You may have to enable the Views UI module at admin/modules to make these settings available.
Currently, there are two views available for use, Carousel 60/40 Split and Carousel Widescreen. The below settings apply to both view configurations.
1. Under “Format” select the settings option next to Flex Slider and select flexslider_responsive for the option set.
2. Under Filter Criteria, click the Content: Has Taxonomy Term (=Unknown) settings
- Select “Featured” from the list and it will now work properly (this is because the taxonomy terms don’t seem to export from features so the expected value isn’t there to select until you add the “Featured” term back to the carousel vocabulary under Taxonomy, as we did in an earlier step).
Permission Settings
Add permissions for editing the carousel content type to your site roles and don’t forget the carousel taxonomy permission (but only for the admin, since we don't want anyone to be able to edit this vocabulary).
Wrap-Up
Your carousel should now be fully functional. All you need to do is add some actual carousel content type pages and or demo pages and add the carousel view wherever it is desired. Use the Layout Editor tab seen when viewing any page while logged in and add the block view, either Carousel 60/40 or Carousel Widescreen, under the 'Views' component list heading. Save the layout editor changes and you're good to go. You will now have a slick carousel slider on your page!