You are here

README.txt in jQuery carousel 8

Same filename and directory in other branches
  1. 7 README.txt
jQuery carousel is based on the jquery plugin
http://github.com/richardscarrott/jquery-ui-carousel. It allows developers to
create carousels using the data entered through the content types. The carousels
could be vertical or Horizontal depending on the configurations. These carousels
can be configured for "swipe to slide" on mobile devices as well. Also, the
module allows us to have "multiple carousels" with different configurations on a
single page as it ties up the config for a carousel to its instance only
rather than having it as a global config for the page.

Demo:
  http://jcarousel.qed42.webfactional.com/jquery-carousel-demo

Features:
  1. Views style Plugin: This module provides a views style plugin to display
  the view-rows in the form of a carousel.

  2. Field Formatter Plugin: This module provides a field formatter plugin for
  image field. Displays the multi-valued content as a carousel.

  3. hook_carousel_theme_info(): This hooks allows developers to register a new
  theme for the carousel and load the corresponding CSS file. e.g.,

    /**
     * Implements hook_carousel_them_info()
     */
    function mymodule_carousel_theme_info() {
      $themes = [];

      $themes['my_custom_theme'] = array(
        'title' => t('My Custom Theme'),
        'library' => 'mymodule/mymodule.jcarousel_themes_default',
      );

      return $themes;
    }

  4. Configurable vertical & Horizontal carousels.
  5. Touch support for mobile devices
  6. Can easily place multiple carousels with different configurations on a
     single page. Carousel configurations are tied up with carousels
     and not the page.

Requirements:
  This module depends on jquery ui carousel
  library(http://github.com/richardscarrott/jquery-ui-carousel).

Installation:
  1. Download the module and place it with other contributed modules
     (e.g. /modules/contrib).
     https://www.drupal.org/docs/8/extending-drupal/installing-contributed-modules
  2. Enable the jQuery Carousel module on the Modules list page.
  3. Download the jquery ui carousel library form
     http://github.com/richardscarrott/jquery-ui-carousel and save it in
     /libraries folder.
  4. Goto admin/reports/status & make sure jquery ui carousel is not throwing
     errors.

Usage:
  1. Views Style Plugin:
    a. Goto admin/structure/views. Click on "Add new view"
    b. Create a view with "page" display. Add fields you need to be displayed
       in a carousel. This would mostly be images. Add images with
       appropriate "image presets".
    c. Change the "Format" to jQuery Carousel and click on "Apply this display".
    d. Configure the plugin in the settings form that pops up.
    e. Save the view and visit the path set for the view while creating the page
       display.
    f. You should be able to see the data requested in the view in the form of
       a carousel.

  2. Field Formatter Plugin:
    a. Goto admin/structure/types. You should be able to see article content
       type(ships with an image field).
    b. Click on Manage display.
    c. Under format select list, choose jQuery Carousel. You will see the same
       settings form as you see for the views style plugin. Configure it as per
       the requirements.
    d. Goto node/add/article. Create an article with multiple images uploaded.
    e. The view page for the article should show the multiple values in a
       carousel.

  NOTE:
     a. Module ships with only one default theme named as default.
        You can create as many themes as needed using the hook
        explained under Features#3.
     b. You must add a selector value in the selector field coming up in
        settings form. This is the class that the carousel's markup gets wrapped
        with & the configs done get applied to.

File

README.txt
View source
  1. jQuery carousel is based on the jquery plugin
  2. http://github.com/richardscarrott/jquery-ui-carousel. It allows developers to
  3. create carousels using the data entered through the content types. The carousels
  4. could be vertical or Horizontal depending on the configurations. These carousels
  5. can be configured for "swipe to slide" on mobile devices as well. Also, the
  6. module allows us to have "multiple carousels" with different configurations on a
  7. single page as it ties up the config for a carousel to its instance only
  8. rather than having it as a global config for the page.
  9. Demo:
  10. http://jcarousel.qed42.webfactional.com/jquery-carousel-demo
  11. Features:
  12. 1. Views style Plugin: This module provides a views style plugin to display
  13. the view-rows in the form of a carousel.
  14. 2. Field Formatter Plugin: This module provides a field formatter plugin for
  15. image field. Displays the multi-valued content as a carousel.
  16. 3. hook_carousel_theme_info(): This hooks allows developers to register a new
  17. theme for the carousel and load the corresponding CSS file. e.g.,
  18. /**
  19. * Implements hook_carousel_them_info()
  20. */
  21. function mymodule_carousel_theme_info() {
  22. $themes = [];
  23. $themes['my_custom_theme'] = array(
  24. 'title' => t('My Custom Theme'),
  25. 'library' => 'mymodule/mymodule.jcarousel_themes_default',
  26. );
  27. return $themes;
  28. }
  29. 4. Configurable vertical & Horizontal carousels.
  30. 5. Touch support for mobile devices
  31. 6. Can easily place multiple carousels with different configurations on a
  32. single page. Carousel configurations are tied up with carousels
  33. and not the page.
  34. Requirements:
  35. This module depends on jquery ui carousel
  36. library(http://github.com/richardscarrott/jquery-ui-carousel).
  37. Installation:
  38. 1. Download the module and place it with other contributed modules
  39. (e.g. /modules/contrib).
  40. https://www.drupal.org/docs/8/extending-drupal/installing-contributed-modules
  41. 2. Enable the jQuery Carousel module on the Modules list page.
  42. 3. Download the jquery ui carousel library form
  43. http://github.com/richardscarrott/jquery-ui-carousel and save it in
  44. /libraries folder.
  45. 4. Goto admin/reports/status & make sure jquery ui carousel is not throwing
  46. errors.
  47. Usage:
  48. 1. Views Style Plugin:
  49. a. Goto admin/structure/views. Click on "Add new view"
  50. b. Create a view with "page" display. Add fields you need to be displayed
  51. in a carousel. This would mostly be images. Add images with
  52. appropriate "image presets".
  53. c. Change the "Format" to jQuery Carousel and click on "Apply this display".
  54. d. Configure the plugin in the settings form that pops up.
  55. e. Save the view and visit the path set for the view while creating the page
  56. display.
  57. f. You should be able to see the data requested in the view in the form of
  58. a carousel.
  59. 2. Field Formatter Plugin:
  60. a. Goto admin/structure/types. You should be able to see article content
  61. type(ships with an image field).
  62. b. Click on Manage display.
  63. c. Under format select list, choose jQuery Carousel. You will see the same
  64. settings form as you see for the views style plugin. Configure it as per
  65. the requirements.
  66. d. Goto node/add/article. Create an article with multiple images uploaded.
  67. e. The view page for the article should show the multiple values in a
  68. carousel.
  69. NOTE:
  70. a. Module ships with only one default theme named as default.
  71. You can create as many themes as needed using the hook
  72. explained under Features#3.
  73. b. You must add a selector value in the selector field coming up in
  74. settings form. This is the class that the carousel's markup gets wrapped
  75. with & the configs done get applied to.