You are here

README.txt in Slick Slideshow Lite 7

# Slick Slideshow
[Library Website](http://kenwheeler.github.io/slick/)
Fully responsive. Scales with it's container.
Separate settings per breakpoint
Uses CSS3 when available. Fully functional when not.
Swipe enabled. Or disabled, if you prefer.
Desktop mouse dragging
Infinite looping.
Autoplay, dots, arrows, callbacks, etc...

Install:
Dependencies:
* [Libraries API 2.x](https://drupal.org/project/libraries)
* [jQuery Update](https://drupal.org/project/jquery_update) - Set to at least v1.7
* [Slick Library](https://github.com/kenwheeler/slick/archive/master.zip)

Steps:
* Download the Slick library https://github.com/kenwheeler/slick/archive/master.zip
* Unzip the file and rename the folder to "slick"
* Put the folder in a libraries directory (ex: sites/all/libraries)
* Enable the Slick Slideshow module
* Find the image field to turn into a slideshow and set the field's display format to "Slick Slideshow" and set the correct option values.

Core Module:
The Slick Slideshow module creates a drupal library creates an image field formatter with slick slideshow settings.

Check the API file to see how you can create or update a Slick slideshow from an external module, allowing to pass more settings to Slick than just what's in the admin UI at the moment.

Example API Call:

$settings = array(
  'slidesToShow' => 1,
  'slidesToScroll' => 1,
  'infinite' => TRUE,
  'onBeforeChange' => 'function(slider, index) {}',
  'onAfterChange' => 'function(slider, index) {}',
  'onInit' => 'function(slider) {}',
  'responsive' => '[
    {
      breakpoint: 800,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    }
  ]'
);

/**
 * Implements slick_slideshow_create().
 *
 * @param string $field_selector
 *  The selector of the field that you want to turn into a slideshow.
 *  Can be an id or class.
 *
 * @param array $settings
 *  Slick Slideshow settings passed to the javascript init.
 *
 * @param string $target
 *  (optional) If the slideshow slide elements aren't the direct children
 *  of the $field_selector, specify a target selector.
 */
slick_slideshow_create('.field-name-field-slide', $settings, '.field-items');

/*
 * Implements slick_slideshow_update().
 *
 * @param string $field_selector
 *  Field element selector that the Slick slideshow belongs to.
 * @param array $settings
 *  Settings array with options to update.
 * @param string $target (optional)
 *  If the $field_selector isn't the element that Slick should be created on,
 *  specify the $target as a child element of the $field_selector.
 */
slick_slideshow_update($field_selector, $settings, $target);

File

README.txt
View source
  1. # Slick Slideshow
  2. [Library Website](http://kenwheeler.github.io/slick/)
  3. Fully responsive. Scales with it's container.
  4. Separate settings per breakpoint
  5. Uses CSS3 when available. Fully functional when not.
  6. Swipe enabled. Or disabled, if you prefer.
  7. Desktop mouse dragging
  8. Infinite looping.
  9. Autoplay, dots, arrows, callbacks, etc...
  10. Install:
  11. Dependencies:
  12. * [Libraries API 2.x](https://drupal.org/project/libraries)
  13. * [jQuery Update](https://drupal.org/project/jquery_update) - Set to at least v1.7
  14. * [Slick Library](https://github.com/kenwheeler/slick/archive/master.zip)
  15. Steps:
  16. * Download the Slick library https://github.com/kenwheeler/slick/archive/master.zip
  17. * Unzip the file and rename the folder to "slick"
  18. * Put the folder in a libraries directory (ex: sites/all/libraries)
  19. * Enable the Slick Slideshow module
  20. * Find the image field to turn into a slideshow and set the field's display format to "Slick Slideshow" and set the correct option values.
  21. Core Module:
  22. The Slick Slideshow module creates a drupal library creates an image field formatter with slick slideshow settings.
  23. Check the API file to see how you can create or update a Slick slideshow from an external module, allowing to pass more settings to Slick than just what's in the admin UI at the moment.
  24. Example API Call:
  25. $settings = array(
  26. 'slidesToShow' => 1,
  27. 'slidesToScroll' => 1,
  28. 'infinite' => TRUE,
  29. 'onBeforeChange' => 'function(slider, index) {}',
  30. 'onAfterChange' => 'function(slider, index) {}',
  31. 'onInit' => 'function(slider) {}',
  32. 'responsive' => '[
  33. {
  34. breakpoint: 800,
  35. settings: {
  36. slidesToShow: 3,
  37. slidesToScroll: 3,
  38. infinite: true,
  39. dots: true
  40. }
  41. }
  42. ]'
  43. );
  44. /**
  45. * Implements slick_slideshow_create().
  46. *
  47. * @param string $field_selector
  48. * The selector of the field that you want to turn into a slideshow.
  49. * Can be an id or class.
  50. *
  51. * @param array $settings
  52. * Slick Slideshow settings passed to the javascript init.
  53. *
  54. * @param string $target
  55. * (optional) If the slideshow slide elements aren't the direct children
  56. * of the $field_selector, specify a target selector.
  57. */
  58. slick_slideshow_create('.field-name-field-slide', $settings, '.field-items');
  59. /*
  60. * Implements slick_slideshow_update().
  61. *
  62. * @param string $field_selector
  63. * Field element selector that the Slick slideshow belongs to.
  64. * @param array $settings
  65. * Settings array with options to update.
  66. * @param string $target (optional)
  67. * If the $field_selector isn't the element that Slick should be created on,
  68. * specify the $target as a child element of the $field_selector.
  69. */
  70. slick_slideshow_update($field_selector, $settings, $target);