Foxy Slider ~ Foxycode

Foxy Slider este un slideshow foarte practic si usor de folosit. Se instaleaza foarte simplu simpla adaugare a codurilor de mai jos in pagina HTML dorita.

HTML

Javascript

CSS

.foxy-h {
    position: relative;
    margin-top: 0px;
}  
  
  .jquery-slider-wrapper {
  position:relative;
  clear:both;
  zoom:1;
  border: 5px solid #fff;
  box-shadow: 0 0 2px #000;
    margin: auto;
}

.jquery-slider-wrapper .caption {
    background: none repeat scroll 0 0 #000;
    top: 0px;
    color: #ffffff;
    font-size: 17px;
    left: 0px;
    padding: 6px 10px;
    position: absolute;
    opacity: 0.5;
    width: 200px;
    height: 100%;
  font-family: 'Abel', sans-serif;
}  
  
.jquery-slider-wrapper .caption a {
  color: #2ea3f2;
  text-decoration: none;
  }
  
.jquery-slider-wrapper .caption a:hover {
  color: #ff8400;
  text-decoration: none;
  }
  
.jquery-slider-slide
{
  display: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left:0;
  top:0;
  width: 100%;
}

.jquery-slider-slide img
{
  border:0;
  margin:0;
  padding:0;
}

.jquery-slider-slide-current
{
  display:block;
  z-index:2;
}

.jquery-slider-slide-next
{
  display:block;
  z-index:1;
}

.jquery-slider-selectors
{
  display:block;
  overflow:hidden;
  position:absolute;
  bottom:10px;
  right:10px;
  z-index:3;
}

.jquery-slider-selector
{
  background:url(http://i38.servimg.com/u/f38/19/09/88/36/ellips10.png) no-repeat 0px -70px;
  display:inline;
  float:left;
  width:18px;
  height:18px;
  margin:0 0 0 5px;
}

.jquery-slider-selector-current
{
  background:url(http://i38.servimg.com/u/f38/19/09/88/36/ellips10.png) no-repeat -16px -70px;
}

.jquery-slider-selector span
{
  display:none;
}

.jquery-slider-control
{
  display:none;
  right:50%;
  top:50%;
  position:absolute;
  cursor: pointer;
  width:48px;
  height:69px;
  margin-top:-34px;
  margin-right:-24px;
  z-index:4;
}

.jquery-slider-control span
{
  display:none;
}

.jquery-slider-control-play
{
  background:url(http://i38.servimg.com/u/f38/19/09/88/36/ellips10.png) no-repeat -144px 0;
}

.jquery-slider-control-pause
{
  background:url(http://i38.servimg.com/u/f38/19/09/88/36/ellips10.png) no-repeat -96px 0;
}

.jquery-slider-hovered .jquery-slider-control
{
  display:block;
}

.jquery-slider-navigation
{
  display:block;
}

.jquery-slider-navigation-prev
{
  background:url(http://i38.servimg.com/u/f38/19/09/88/36/ellips10.png) no-repeat 0 0;
  display:none;
  left:0;
  top:50%;
  position:absolute;
  cursor: pointer;
  width:48px;
  height:69px;
  margin-top:-34px;
  z-index:4;
}

.jquery-slider-navigation-prev span
{
  display:none;
}

.jquery-slider-navigation-next
{
  background:url(http://i38.servimg.com/u/f38/19/09/88/36/ellips10.png) no-repeat -48px 0;
  display:none;
  right:0;
  top:50%;
  position:absolute;
  cursor: pointer;
  width:48px;
  height:69px;
  margin-top:-34px;
  z-index:4;
}

.jquery-slider-navigation-next span
{
  display:none;
}

.jquery-slider-hovered .jquery-slider-navigation-prev,
.jquery-slider-hovered .jquery-slider-navigation-next
{
  display:block;
}

.jquery-slider-timer
{
  color:#000000;
  height:3px;
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  z-index:4;
}

.jquery-slider-timer-bar
{
  background:#000000;
  opacity:0.5;
  height:3px;
  width:0;
  float:left;
  display:inline;
}

Live Preview

10 ianuarie 2015

Foxy Slider

0 comentarii:

Trimiteți un comentariu

Shopping Cart

Google Translate

YouTube News

Advertising

Be our Fan

Blogroll

Search on blog