You are here

Home » API reference » Imagefield Slideshow 8

imagefield-slideshow.css in Imagefield Slideshow 8 

/* Imagefield Slideshow css */
.imagefield_slideshow-wrapper {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 6px;
  margin: 6px 0;
}
.imagefield_slideshow-wrapper .prev-next {
  text-align: center;
  margin-top: 40px;
}

/* pager */
.cycle-pager {
  text-align: right;
  width: 100%;
  z-index: 500;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  padding-right: 10px;
}
.cycle-pager span {
  font-family: arial;
  font-size: 50px;
  width: 16px;
  height: 16px;
  display: inline-block;
  color: #ddd;
  cursor: pointer;
}
.cycle-pager span.cycle-pager-active {
  color: #d69746;
}
.cycle-pager > * {
  cursor: pointer;
}

/* flip */
.cycle-slideshow {
  -webkit-perspective: 1000;
  -webkit-transform-style: preserve-3d;
  -moz-perspective: 1000;
  -moz-transform-style: preserve-3d;
  -o-perspective: 1000;
  -o-transform-style: preserve-3d;
  perspective: 1000;
  transform-style: preserve-3d;
}

File

css/imagefield-slideshow.css
View source 
  1. /* Imagefield Slideshow css */

  2. .imagefield_slideshow-wrapper {

  3.   display: inline-block;

  4.   border: 1px solid #ccc;

  5.   padding: 6px;

  6.   margin: 6px 0;

  7. }

  8. .imagefield_slideshow-wrapper .prev-next {

  9.   text-align: center;

  10.   margin-top: 40px;

  11. }

  12. 

  13. /* pager */

  14. .cycle-pager {

  15.   text-align: right;

  16.   width: 100%;

  17.   z-index: 500;

  18.   position: absolute;

  19.   bottom: 0;

  20.   overflow: hidden;

  21.   padding-right: 10px;

  22. }

  23. .cycle-pager span {

  24.   font-family: arial;

  25.   font-size: 50px;

  26.   width: 16px;

  27.   height: 16px;

  28.   display: inline-block;

  29.   color: #ddd;

  30.   cursor: pointer;

  31. }

  32. .cycle-pager span.cycle-pager-active {

  33.   color: #d69746;

  34. }

  35. .cycle-pager > * {

  36.   cursor: pointer;

  37. }

  38. 

  39. /* flip */

  40. .cycle-slideshow {

  41.   -webkit-perspective: 1000;

  42.   -webkit-transform-style: preserve-3d;

  43.   -moz-perspective: 1000;

  44.   -moz-transform-style: preserve-3d;

  45.   -o-perspective: 1000;

  46.   -o-transform-style: preserve-3d;

  47.   perspective: 1000;

  48.   transform-style: preserve-3d;

  49. }