You are here

jcarousel.css in jCarousel 6

.jcarousel-container {
    -moz-border-radius: 10px;
    background: #F0F6F9;
    border: 1px solid #346F97;
    width: 245px;
    padding: 20px 40px;
}

.jcarousel-clip {
    width:  245px;
    height: 75px;
}

.jcarousel-list {
    width:  255px;
    height: 75px;
}

.jcarousel-list li {
    width: 75px;
    height: 75px;
    margin-right: 10px;
}

.jcarousel-item-placeholder {
    background: #fff url(jcarousel_loading.gif) 50% 50% no-repeat;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(jcarousel_next.png) no-repeat 0 0;
}

.jcarousel-next-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-next-disabled-horizontal,
.jcarousel-next-disabled-horizontal:hover,
.jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(jcarousel_prev.png) no-repeat 0 0;
}

.jcarousel-prev-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-prev-disabled-horizontal,
.jcarousel-prev-disabled-horizontal:hover,
.jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

File

jcarousel/examples/bestpractice/jcarousel.css
View source
  1. .jcarousel-container {
  2. -moz-border-radius: 10px;
  3. background: #F0F6F9;
  4. border: 1px solid #346F97;
  5. width: 245px;
  6. padding: 20px 40px;
  7. }
  8. .jcarousel-clip {
  9. width: 245px;
  10. height: 75px;
  11. }
  12. .jcarousel-list {
  13. width: 255px;
  14. height: 75px;
  15. }
  16. .jcarousel-list li {
  17. width: 75px;
  18. height: 75px;
  19. margin-right: 10px;
  20. }
  21. .jcarousel-item-placeholder {
  22. background: #fff url(jcarousel_loading.gif) 50% 50% no-repeat;
  23. }
  24. /**
  25. * Horizontal Buttons
  26. */
  27. .jcarousel-next-horizontal {
  28. position: absolute;
  29. top: 43px;
  30. right: 5px;
  31. width: 32px;
  32. height: 32px;
  33. cursor: pointer;
  34. background: transparent url(jcarousel_next.png) no-repeat 0 0;
  35. }
  36. .jcarousel-next-horizontal:hover {
  37. background-position: -32px 0;
  38. }
  39. .jcarousel-next-horizontal:active {
  40. background-position: -64px 0;
  41. }
  42. .jcarousel-next-disabled-horizontal,
  43. .jcarousel-next-disabled-horizontal:hover,
  44. .jcarousel-next-disabled-horizontal:active {
  45. cursor: default;
  46. background-position: -96px 0;
  47. }
  48. .jcarousel-prev-horizontal {
  49. position: absolute;
  50. top: 43px;
  51. left: 5px;
  52. width: 32px;
  53. height: 32px;
  54. cursor: pointer;
  55. background: transparent url(jcarousel_prev.png) no-repeat 0 0;
  56. }
  57. .jcarousel-prev-horizontal:hover {
  58. background-position: -32px 0;
  59. }
  60. .jcarousel-prev-horizontal:active {
  61. background-position: -64px 0;
  62. }
  63. .jcarousel-prev-disabled-horizontal,
  64. .jcarousel-prev-disabled-horizontal:hover,
  65. .jcarousel-prev-disabled-horizontal:active {
  66. cursor: default;
  67. background-position: -96px 0;
  68. }