You are here

Home » API reference » Image sliders 8

image_slider.css in Image sliders 8 

.jssorl-004-double-tail-spin img {
  animation-name: jssorl-004-double-tail-spin;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes jssorl-004-double-tail-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.jssorb031 {
  position: absolute;
}
.jssorb031 .i {
  position: absolute;
  cursor: pointer;
}
.jssorb031 .i .b {
  fill: #000;
  fill-opacity: 0.6;
  stroke: #fff;
  stroke-width: 1600;
  stroke-miterlimit: 10;
  stroke-opacity: 0.8;
}
.jssorb031 .i:hover .b {
  fill: #fff;
  fill-opacity: 1;
  stroke: #000;
  stroke-opacity: 1;
}
.jssorb031 .iav .b {
  fill: #fff;
  stroke: #000;
  stroke-width: 1600;
  fill-opacity: .6;
}
.jssorb031 .i.idn {
  opacity: .3;
}
.jssora051 {
  display: block;
  position: absolute;
  cursor: pointer;
}
.jssora051 .a {
  fill: none;
  stroke: #fff;
  stroke-width: 360;
  stroke-miterlimit: 10;
}
.jssora051:hover {
  opacity: .8;
}
.jssora051.jssora051dn {
  opacity: .5;
}
.jssora051.jssora051ds {
  opacity: .3;
  pointer-events: none;
}
.jssorl-009-spin img {
  animation-name: jssorl-009-spin;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes jssorl-009-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.jssora106 {
  display: block;
  position: absolute;
  cursor: pointer;
}
.jssora106 .c {
  fill: #fff;
  opacity: .3;
}
.jssora106 .a {
  fill: none;
  stroke: #000;
  stroke-width: 350;
  stroke-miterlimit: 10;
}
.jssora106:hover .c {
  opacity: .5;
}
.jssora106:hover .a {
  opacity: .8;
}
.jssora106.jssora106dn .c {
  opacity: .2;
}
.jssora106.jssora106dn .a {
  opacity: 1;
}
.jssora106.jssora106ds {
  opacity: .3;
  pointer-events: none;
}
.jssorb053 .i {
  position: absolute;
  cursor: pointer;
}
.jssorb053 .i .b {
  fill: #fff;
  fill-opacity: 0.3;
}
.jssorb053 .i:hover .b {
  fill-opacity: .7;
}
.jssorb053 .iav .b {
  fill-opacity: 1;
}
.jssorb053 .i.idn {
  opacity: .3;
}
.jssora061 {
  display: block;
  position: absolute;
  cursor: pointer;
}
.jssora061 .a {
  fill: none;
  stroke: #fff;
  stroke-width: 360;
  stroke-linecap: round;
}
.jssora061:hover {
  opacity: .8;
}
.jssora061.jssora061dn {
  opacity: .5;
}
.jssora061.jssora061ds {
  opacity: .3;
  pointer-events: none;
}
.jssorb057 .i {
  position: absolute;
  cursor: pointer;
}
.jssorb057 .i .b {
  fill: none;
  stroke: #fff;
  stroke-width: 2000;
  stroke-miterlimit: 10;
  stroke-opacity: 0.4;
}
.jssorb057 .i:hover .b {
  stroke-opacity: .7;
}
.jssorb057 .iav .b {
  stroke-opacity: 1;
}
.jssorb057 .i.idn {
  opacity: .3;
}
.jssorb051 .i {
  position: absolute;
  cursor: pointer;
}
.jssorb051 .i .b {
  fill: #fff;
  fill-opacity: 0.3;
}
.jssorb051 .i:hover .b {
  fill-opacity: .7;
}
.jssorb051 .iav .b {
  fill-opacity: 1;
}
.jssorb051 .i.idn {
  opacity: .3;
}
.jssora093 {
  display: block;
  position: absolute;
  cursor: pointer;
}
.jssora093 .c {
  fill: none;
  stroke: #fff;
  stroke-width: 400;
  stroke-miterlimit: 10;
}
.jssora093 .a {
  fill: none;
  stroke: #fff;
  stroke-width: 400;
  stroke-miterlimit: 10;
}
.jssora093:hover {
  opacity: .8;
}
.jssora093.jssora093dn {
  opacity: .6;
}
.jssora093.jssora093ds {
  opacity: .3;
  pointer-events: none;
}
.jssort101 .p {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  background: #000;
}
.jssort101 .p .cv {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #000;
  box-sizing: border-box;
  z-index: 1;
}
.jssort101 .a {
  fill: none;
  stroke: #fff;
  stroke-width: 400;
  stroke-miterlimit: 10;
  visibility: hidden;
}
.jssort101 .p:hover .cv,
.jssort101 .p.pdn .cv {
  border: none;
  border-color: transparent;
}
.jssort101 .p:hover {
  padding: 2px;
}
.jssort101 .p:hover .cv {
  background-color: rgba(0, 0, 0, 6);
  opacity: .35;
}
.jssort101 .p:hover.pdn {
  padding: 0;
}
.jssort101 .p:hover.pdn .cv {
  border: 2px solid #fff;
  background: none;
  opacity: .35;
}
.jssort101 .pav .cv {
  border-color: #fff;
  opacity: .35;
}
.jssort101 .pav .a,
.jssort101 .p:hover .a {
  visibility: visible;
}
.jssort101 .t {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  opacity: .6;
}
.jssort101 .pav .t,
.jssort101 .p:hover .t {
  opacity: 1;
}
.jssorb132 {
  position: absolute;
}
.jssorb132 .i {
  position: absolute;
  cursor: pointer;
}
.jssorb132 .i .b {
  fill: #fff;
  fill-opacity: 0.8;
  stroke: #000;
  stroke-width: 1600;
  stroke-miterlimit: 10;
  stroke-opacity: 0.7;
}
.jssorb132 .i:hover .b {
  fill: #000;
  fill-opacity: .7;
  stroke: #fff;
  stroke-width: 2000;
  stroke-opacity: 0.8;
}
.jssorb132 .iav .b {
  fill: #000;
  stroke: #fff;
  stroke-width: 2400;
  fill-opacity: 0.8;
  stroke-opacity: 1;
}
.jssorb132 .i.idn {
  opacity: 0.3;
}
/*jssor slider bullet skin 072 css*/
.jssorb072 .i {
  position: absolute;
  color: #000;
  font-family: "Helvetica neue", Helvetica, Arial, sans-serif;
  text-align: center;
  cursor: pointer;
  z-index: 0;
}
.jssorb072 .i .b {
  fill: #fff;
  opacity: .3;
}
.jssorb072 .i:hover {
  opacity: .7;
}
.jssorb072 .iav {
  color: #fff;
}
.jssorb072 .iav .b {
  fill: #000;
  opacity: .5;
}
.jssorb072 .i.idn {
  opacity: .3;
}
/*jssor slider arrow skin 073 css*/
.jssora073 {
  display: block;
  position: absolute;
  cursor: pointer;
}
.jssora073 .a {
  fill: #ddd;
  fill-opacity: .7;
  stroke: #000;
  stroke-width: 160;
  stroke-miterlimit: 10;
  stroke-opacity: .7;
}
.jssora073:hover {
  opacity: .8;
}
.jssora073.jssora073dn {
  opacity: .4;
}
.jssora073.jssora073ds {
  opacity: .3;
  pointer-events: none;
}
/*jssor slider bullet skin 106 css*/
.jssorb106 {
  position: absolute;
}
.jssorb106 .i {
  position: absolute;
  cursor: pointer;
}
.jssorb106 .i .b {
  fill: #000;
  fill-opacity: 0.5;
  stroke: #fff;
  stroke-width: 1800;
  stroke-miterlimit: 10;
  stroke-opacity: 0.8;
}
.jssorb106 .i:hover .b {
  fill: #fff;
  fill-opacity: 1;
  stroke: #2b1908;
  stroke-opacity: 1;
}
.jssorb106 .iav .b {
  fill: #fff;
  fill-opacity: 1;
  stroke-width: 1800;
  stroke: #46d1d3;
  stroke-opacity: 0.6;
}
.jssorb106 .i.idn {
  opacity: .3;
}
.slider_description {
  text-align: center;
  padding: 20px;
  margin: 0 auto;
  width: 75%;
  font-size: 15px;
}
.slider_name {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
}
.slider_main {
  width: 100%;
}

File

css/image_slider.css
View source 
  1. .jssorl-004-double-tail-spin img {

  2.   animation-name: jssorl-004-double-tail-spin;

  3.   animation-duration: 1.6s;

  4.   animation-iteration-count: infinite;

  5.   animation-timing-function: linear;

  6. }

  7. @keyframes jssorl-004-double-tail-spin {

  8.   from {

  9.     transform: rotate(0deg);

  10.   }

  11.   to {

  12.     transform: rotate(360deg);

  13.   }

  14. }

  15. .jssorb031 {

  16.   position: absolute;

  17. }

  18. .jssorb031 .i {

  19.   position: absolute;

  20.   cursor: pointer;

  21. }

  22. .jssorb031 .i .b {

  23.   fill: #000;

  24.   fill-opacity: 0.6;

  25.   stroke: #fff;

  26.   stroke-width: 1600;

  27.   stroke-miterlimit: 10;

  28.   stroke-opacity: 0.8;

  29. }

  30. .jssorb031 .i:hover .b {

  31.   fill: #fff;

  32.   fill-opacity: 1;

  33.   stroke: #000;

  34.   stroke-opacity: 1;

  35. }

  36. .jssorb031 .iav .b {

  37.   fill: #fff;

  38.   stroke: #000;

  39.   stroke-width: 1600;

  40.   fill-opacity: .6;

  41. }

  42. .jssorb031 .i.idn {

  43.   opacity: .3;

  44. }

  45. .jssora051 {

  46.   display: block;

  47.   position: absolute;

  48.   cursor: pointer;

  49. }

  50. .jssora051 .a {

  51.   fill: none;

  52.   stroke: #fff;

  53.   stroke-width: 360;

  54.   stroke-miterlimit: 10;

  55. }

  56. .jssora051:hover {

  57.   opacity: .8;

  58. }

  59. .jssora051.jssora051dn {

  60.   opacity: .5;

  61. }

  62. .jssora051.jssora051ds {

  63.   opacity: .3;

  64.   pointer-events: none;

  65. }

  66. .jssorl-009-spin img {

  67.   animation-name: jssorl-009-spin;

  68.   animation-duration: 1.6s;

  69.   animation-iteration-count: infinite;

  70.   animation-timing-function: linear;

  71. }

  72. @keyframes jssorl-009-spin {

  73.   from {

  74.     transform: rotate(0deg);

  75.   }

  76.   to {

  77.     transform: rotate(360deg);

  78.   }

  79. }

  80. .jssora106 {

  81.   display: block;

  82.   position: absolute;

  83.   cursor: pointer;

  84. }

  85. .jssora106 .c {

  86.   fill: #fff;

  87.   opacity: .3;

  88. }

  89. .jssora106 .a {

  90.   fill: none;

  91.   stroke: #000;

  92.   stroke-width: 350;

  93.   stroke-miterlimit: 10;

  94. }

  95. .jssora106:hover .c {

  96.   opacity: .5;

  97. }

  98. .jssora106:hover .a {

  99.   opacity: .8;

  100. }

  101. .jssora106.jssora106dn .c {

  102.   opacity: .2;

  103. }

  104. .jssora106.jssora106dn .a {

  105.   opacity: 1;

  106. }

  107. .jssora106.jssora106ds {

  108.   opacity: .3;

  109.   pointer-events: none;

  110. }

  111. .jssorb053 .i {

  112.   position: absolute;

  113.   cursor: pointer;

  114. }

  115. .jssorb053 .i .b {

  116.   fill: #fff;

  117.   fill-opacity: 0.3;

  118. }

  119. .jssorb053 .i:hover .b {

  120.   fill-opacity: .7;

  121. }

  122. .jssorb053 .iav .b {

  123.   fill-opacity: 1;

  124. }

  125. .jssorb053 .i.idn {

  126.   opacity: .3;

  127. }

  128. .jssora061 {

  129.   display: block;

  130.   position: absolute;

  131.   cursor: pointer;

  132. }

  133. .jssora061 .a {

  134.   fill: none;

  135.   stroke: #fff;

  136.   stroke-width: 360;

  137.   stroke-linecap: round;

  138. }

  139. .jssora061:hover {

  140.   opacity: .8;

  141. }

  142. .jssora061.jssora061dn {

  143.   opacity: .5;

  144. }

  145. .jssora061.jssora061ds {

  146.   opacity: .3;

  147.   pointer-events: none;

  148. }

  149. .jssorb057 .i {

  150.   position: absolute;

  151.   cursor: pointer;

  152. }

  153. .jssorb057 .i .b {

  154.   fill: none;

  155.   stroke: #fff;

  156.   stroke-width: 2000;

  157.   stroke-miterlimit: 10;

  158.   stroke-opacity: 0.4;

  159. }

  160. .jssorb057 .i:hover .b {

  161.   stroke-opacity: .7;

  162. }

  163. .jssorb057 .iav .b {

  164.   stroke-opacity: 1;

  165. }

  166. .jssorb057 .i.idn {

  167.   opacity: .3;

  168. }

  169. .jssorb051 .i {

  170.   position: absolute;

  171.   cursor: pointer;

  172. }

  173. .jssorb051 .i .b {

  174.   fill: #fff;

  175.   fill-opacity: 0.3;

  176. }

  177. .jssorb051 .i:hover .b {

  178.   fill-opacity: .7;

  179. }

  180. .jssorb051 .iav .b {

  181.   fill-opacity: 1;

  182. }

  183. .jssorb051 .i.idn {

  184.   opacity: .3;

  185. }

  186. .jssora093 {

  187.   display: block;

  188.   position: absolute;

  189.   cursor: pointer;

  190. }

  191. .jssora093 .c {

  192.   fill: none;

  193.   stroke: #fff;

  194.   stroke-width: 400;

  195.   stroke-miterlimit: 10;

  196. }

  197. .jssora093 .a {

  198.   fill: none;

  199.   stroke: #fff;

  200.   stroke-width: 400;

  201.   stroke-miterlimit: 10;

  202. }

  203. .jssora093:hover {

  204.   opacity: .8;

  205. }

  206. .jssora093.jssora093dn {

  207.   opacity: .6;

  208. }

  209. .jssora093.jssora093ds {

  210.   opacity: .3;

  211.   pointer-events: none;

  212. }

  213. .jssort101 .p {

  214.   position: absolute;

  215.   top: 0;

  216.   left: 0;

  217.   box-sizing: border-box;

  218.   background: #000;

  219. }

  220. .jssort101 .p .cv {

  221.   position: relative;

  222.   top: 0;

  223.   left: 0;

  224.   width: 100%;

  225.   height: 100%;

  226.   border: 2px solid #000;

  227.   box-sizing: border-box;

  228.   z-index: 1;

  229. }

  230. .jssort101 .a {

  231.   fill: none;

  232.   stroke: #fff;

  233.   stroke-width: 400;

  234.   stroke-miterlimit: 10;

  235.   visibility: hidden;

  236. }

  237. .jssort101 .p:hover .cv,

  238. .jssort101 .p.pdn .cv {

  239.   border: none;

  240.   border-color: transparent;

  241. }

  242. .jssort101 .p:hover {

  243.   padding: 2px;

  244. }

  245. .jssort101 .p:hover .cv {

  246.   background-color: rgba(0, 0, 0, 6);

  247.   opacity: .35;

  248. }

  249. .jssort101 .p:hover.pdn {

  250.   padding: 0;

  251. }

  252. .jssort101 .p:hover.pdn .cv {

  253.   border: 2px solid #fff;

  254.   background: none;

  255.   opacity: .35;

  256. }

  257. .jssort101 .pav .cv {

  258.   border-color: #fff;

  259.   opacity: .35;

  260. }

  261. .jssort101 .pav .a,

  262. .jssort101 .p:hover .a {

  263.   visibility: visible;

  264. }

  265. .jssort101 .t {

  266.   position: absolute;

  267.   top: 0;

  268.   left: 0;

  269.   width: 100%;

  270.   height: 100%;

  271.   border: none;

  272.   opacity: .6;

  273. }

  274. .jssort101 .pav .t,

  275. .jssort101 .p:hover .t {

  276.   opacity: 1;

  277. }

  278. .jssorb132 {

  279.   position: absolute;

  280. }

  281. .jssorb132 .i {

  282.   position: absolute;

  283.   cursor: pointer;

  284. }

  285. .jssorb132 .i .b {

  286.   fill: #fff;

  287.   fill-opacity: 0.8;

  288.   stroke: #000;

  289.   stroke-width: 1600;

  290.   stroke-miterlimit: 10;

  291.   stroke-opacity: 0.7;

  292. }

  293. .jssorb132 .i:hover .b {

  294.   fill: #000;

  295.   fill-opacity: .7;

  296.   stroke: #fff;

  297.   stroke-width: 2000;

  298.   stroke-opacity: 0.8;

  299. }

  300. .jssorb132 .iav .b {

  301.   fill: #000;

  302.   stroke: #fff;

  303.   stroke-width: 2400;

  304.   fill-opacity: 0.8;

  305.   stroke-opacity: 1;

  306. }

  307. .jssorb132 .i.idn {

  308.   opacity: 0.3;

  309. }

  310. /*jssor slider bullet skin 072 css*/

  311. .jssorb072 .i {

  312.   position: absolute;

  313.   color: #000;

  314.   font-family: "Helvetica neue", Helvetica, Arial, sans-serif;

  315.   text-align: center;

  316.   cursor: pointer;

  317.   z-index: 0;

  318. }

  319. .jssorb072 .i .b {

  320.   fill: #fff;

  321.   opacity: .3;

  322. }

  323. .jssorb072 .i:hover {

  324.   opacity: .7;

  325. }

  326. .jssorb072 .iav {

  327.   color: #fff;

  328. }

  329. .jssorb072 .iav .b {

  330.   fill: #000;

  331.   opacity: .5;

  332. }

  333. .jssorb072 .i.idn {

  334.   opacity: .3;

  335. }

  336. /*jssor slider arrow skin 073 css*/

  337. .jssora073 {

  338.   display: block;

  339.   position: absolute;

  340.   cursor: pointer;

  341. }

  342. .jssora073 .a {

  343.   fill: #ddd;

  344.   fill-opacity: .7;

  345.   stroke: #000;

  346.   stroke-width: 160;

  347.   stroke-miterlimit: 10;

  348.   stroke-opacity: .7;

  349. }

  350. .jssora073:hover {

  351.   opacity: .8;

  352. }

  353. .jssora073.jssora073dn {

  354.   opacity: .4;

  355. }

  356. .jssora073.jssora073ds {

  357.   opacity: .3;

  358.   pointer-events: none;

  359. }

  360. /*jssor slider bullet skin 106 css*/

  361. .jssorb106 {

  362.   position: absolute;

  363. }

  364. .jssorb106 .i {

  365.   position: absolute;

  366.   cursor: pointer;

  367. }

  368. .jssorb106 .i .b {

  369.   fill: #000;

  370.   fill-opacity: 0.5;

  371.   stroke: #fff;

  372.   stroke-width: 1800;

  373.   stroke-miterlimit: 10;

  374.   stroke-opacity: 0.8;

  375. }

  376. .jssorb106 .i:hover .b {

  377.   fill: #fff;

  378.   fill-opacity: 1;

  379.   stroke: #2b1908;

  380.   stroke-opacity: 1;

  381. }

  382. .jssorb106 .iav .b {

  383.   fill: #fff;

  384.   fill-opacity: 1;

  385.   stroke-width: 1800;

  386.   stroke: #46d1d3;

  387.   stroke-opacity: 0.6;

  388. }

  389. .jssorb106 .i.idn {

  390.   opacity: .3;

  391. }

  392. .slider_description {

  393.   text-align: center;

  394.   padding: 20px;

  395.   margin: 0 auto;

  396.   width: 75%;

  397.   font-size: 15px;

  398. }

  399. .slider_name {

  400.   text-align: center;

  401.   font-size: 28px;

  402.   font-weight: 700;

  403. }

  404. .slider_main {

  405.   width: 100%;

  406. }