Field Slideshow

The Field Slideshow module gives the ability to create slideshows from image and media fields.

Requirements

• Libraries API
• Jquery Cycle plugin
• JCarousel

Installing field_slideshow

• Place the entirety of this directory in sites/all/modules/field_slideshow
• Do the same with the Libraries API module
• Create an empty directory at sites/all/libraries
• Download the Jquery Cycle plugin in sites/all/libraries. There should be a file sites/all/libraries/jquery.cycle/jquery.cycle.all.js
• If you want to use the carousel pager download the JCarousel and extract it in libraries like jquery.cycle. Now there should be a file sites/all/libraries/jquery.jcarousel/lib/jquery.jcarousel.js. Note that you should keep all other files that comes from the carousel zip, so the there should be also a jquery.jcarousel/skins/* for instance.
• Navigate to admin/modules and enable Field slideshow.

Using field_slideshow

• Navigate to admin/structure/types
• Click on manage display for the content type which will have the slideshow
• Select the slideshow format for an image field.
• On the right some information should be displayed. Clicking on the configuration button should bring the full slideshow settings form.

Styling

Here are some example of css you might want to use to style differently the slideshow:

Circle pager (Number pager)

.field-slideshow-pager{
  text-align: center;
}

.field-slideshow-pager a{
  display:inline-block;
  width:16px;
  height:16px;
  background: url(../img/icons/icon-point.png) no-repeat 0 -16px;
  text-indent: -999%;
}

.field-slideshow-pager a.activeSlide{
  background-position: 0 0 ;
}

Align images horizontally

If you have a mixed set of portrait and landscape mode images you may want to center them. Here is the minimal css required to make that happen:

/* Generic selector, you may want to have something more specific 
 * Like .node-full .field-name-field-image2 .field-slideshow-slide */
.field-slideshow-slide{
  /* Take the width of the largest possible image of the slideshow
  *  and override the width of the slides with it */
  width: 420px !important;
  /* Makes sure the images are centered */
  text-align: center;
}

Common issues and workarounds

jCarousel: No width/height set for items

This error can appear when redefining the carousel items margins or other css. To fix this, make sure to set a width for the items.
Example:

.field-slideshow-carousel-wrapper li.jcarousel-item {
  margin: 0;
  width: 100px;
}

[cycle] terminating; too few slides: 1

This can happen if you display the field with view. A solution is to uncheck the field option "Group multiple values".

Good Example for how to use field slideshow -
http://www.globalsoftlab.com/blog/drupal-7-image-gallery-without-views-f...