The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

WoW slider

2 posters

Go down

In progress WoW slider

Post by sajber January 11th 2014, 1:22 pm

I wannt wow slider like they have:
http://anime-serbia.forummotion.com/

When i create slider, i get some codes, but don't know where to put them.
sajber
sajber
Forumember

Posts : 35
Reputation : 1
Language : Croatian, English

http://animan.forumcroatian.com/forum

Back to top Go down

In progress Re: WoW slider

Post by Sir Chivas™ January 12th 2014, 11:35 pm

Hi,

Do you have the codes already? Or what part are you having difficulties with? Take a look at here: http://slideful.com/

Regards,
Sir Chivas.
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6965
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

In progress Re: WoW slider

Post by sajber January 13th 2014, 12:13 am

I got this:


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>animan generated by WOWSlider.com</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <meta name="keywords" content="animan, WOW Slider, jQuery Rotating Banner, Carousel Slideshow" />
   <meta name="description" content="animan created with WOW Slider, a free wizard program that helps you easily generate beautiful web slideshow" />
   <!-- Start WOWSlider.com HEAD section -->
   <link rel="stylesheet" type="text/css" href="engine1/style.css" />
   <script type="text/javascript" src="engine1/jquery.js"></script>
   <!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color:#d7d7d7">
   <!-- Start WOWSlider.com BODY section -->
   <div id="wowslider-container1">
   <div class="ws_images"><ul>
<li><img src="data1/images/an3.jpg" alt="" title="" id="wows1_0"/>Anime Girl 1
</li>
<li><img src="data1/images/an4.jpg" alt="" title="" id="wows1_1"/>Anime Girl 2
</li>
<li><img src="data1/images/an5.jpg" alt="" title="" id="wows1_2"/>Anime Metal Band</li>
<li><img src="data1/images/an6.jpg" alt="" title="" id="wows1_3"/>Pokemon-Lugia</li>
<li><img src="data1/images/an7.jpg" alt="" title="" id="wows1_4"/>Initial D</li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title=""><img src="data1/tooltips/an3.jpg" alt=""/>1</a>
<a href="#" title=""><img src="data1/tooltips/an4.jpg" alt=""/>2</a>
<a href="#" title=""><img src="data1/tooltips/an5.jpg" alt=""/>3</a>
<a href="#" title=""><img src="data1/tooltips/an6.jpg" alt=""/>4</a>
<a href="#" title=""><img src="data1/tooltips/an7.jpg" alt=""/>5</a>
</div></div>
<span class="wsl"><a href="http://wowslider.com">Javascript Photo Slideshow</a> by WOWSlider.com v4.8</span>
   <div class="ws_shadow"></div>
   </div>
   <script type="text/javascript" src="engine1/wowslider.js"></script>
   <script type="text/javascript" src="engine1/script.js"></script>
   <!-- End WOWSlider.com BODY section -->
</body>
</html>

And this:

Code:
/*
 *   generated by WOW Slider 4.8
 *   template Gothic
 */
@import url("http://fonts.googleapis.com/css?family=Didact+Gothic&subset=latin,latin-ext,cyrillic");
#wowslider-container1 {
   zoom: 1;
   position: relative;
   max-width:650px;
   margin:0px auto 0px;
   z-index:90;
   border:none;
   text-align:left; /* reset align=center */
}
* html #wowslider-container1{ width:650px }
#wowslider-container1 .ws_images ul{
   position:relative;
   width: 10000%;
   height:auto;
   left:0;
   list-style:none;
   margin:0;
   padding:0;
   border-spacing:0;
   overflow: visible;
   /*table-layout:fixed;*/
}
#wowslider-container1 .ws_images ul li{
   width:1%;
   line-height:0; /*opera*/
   float:left;
   font-size:0;
   padding:0 0 0 0 !important;
   margin:0 0 0 0 !important;
}

#wowslider-container1 .ws_images{
   position: relative;
   left:0;
   top:0;
   width:100%;
   height:100%;
   overflow:hidden;
}
#wowslider-container1 .ws_images a{
   width:100%;
   display:block;
   color:transparent;
}
#wowslider-container1 img{
   max-width: none !important;
}
#wowslider-container1 .ws_images img{
   width:100%;
   border:none 0;
   max-width: none;
   padding:0;
}
#wowslider-container1 a{
   text-decoration: none;
   outline: none;
   border: none;
}

#wowslider-container1  .ws_bullets {
   font-size: 0px;
   float: left;
   position:absolute;
   z-index:70;
}
#wowslider-container1  .ws_bullets div{
   position:relative;
   float:left;
}
#wowslider-container1  .wsl{
   display:none;
}
#wowslider-container1 sound,
#wowslider-container1 object{
   position:absolute;
}


#wowslider-container1  .ws_bullets {
   padding: 5px;
}
#wowslider-container1 .ws_bullets a {
   width:16px;
   height:16px;
   background: url(./bullet.png) left top;
   float: left;
   text-indent: -4000px;
   position:relative;
   margin-left:7px;
   color:transparent;
}
#wowslider-container1 .ws_bullets a.ws_selbull, #wowslider-container1 .ws_bullets a:hover{
   background-position: 0 100%;
}
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
   position:absolute;
   display:none;
   top:50%;
   margin-top:-20px;
   z-index:60;
   height: 40px;
   width: 40px;
   background-image: url(./arrows.png);
}
#wowslider-container1 a.ws_next{
   background-position: 100% 0;
   right:10px;
}
#wowslider-container1 a.ws_prev {
   background-position: 0 0;
   left:10px;
}
#wowslider-container1 a.ws_next:hover{
   background-position: 100% 100%;
}
#wowslider-container1 a.ws_prev:hover {
   background-position: 0 100%;
}
* html #wowslider-container1 a.ws_next,* html #wowslider-container1 a.ws_prev{display:block}
#wowslider-container1:hover a.ws_next, #wowslider-container1:hover a.ws_prev {display:block}

/*playpause*/
#wowslider-container1 .ws_playpause {
   display:none;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -20px;
    margin-top: -20px;
    z-index: 59;
}

#wowslider-container1:hover .ws_playpause {
   display:block;
}

#wowslider-container1 .ws_pause {
    background-image: url(./pause.png);
}

#wowslider-container1 .ws_play {
    background-image: url(./play.png);
}

#wowslider-container1 .ws_pause:hover, #wowslider-container1 .ws_play:hover {
    background-position: 100% 100% !important;
}/* bottom center */
#wowslider-container1  .ws_bullets {
    bottom: 0px;
   left:50%;
}
#wowslider-container1  .ws_bullets div{
   left:-50%;
}
#wowslider-container1 .ws-title{
   position:absolute;
   display:block;
   bottom: 25px;
   left: 10px;
   margin-right: 10px;
   padding:7px;
   background:#000000;
   color:#FFFFFF;
   z-index: 50;
   font-family:'Didact Gothic',Arial,Helvetica,sans-serif;
   font-size: 32px;
   line-height: 34px;
   font-weight: normal;
   border-radius:6px;   
   -moz-border-radius:6px;
    -webkit-border-radius:6px;
   opacity:0.7;
   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
#wowslider-container1 .ws-title div{
    margin-top: 6px;
   font-size: 18px;
   line-height: 20px;
}

#wowslider-container1 .ws_images ul{
   animation: wsBasic 20s infinite;
   -moz-animation: wsBasic 20s infinite;
   -webkit-animation: wsBasic 20s infinite;
}
@keyframes wsBasic{0%{left:-0%} 10%{left:-0%} 20%{left:-100%} 30%{left:-100%} 40%{left:-200%} 50%{left:-200%} 60%{left:-300%} 70%{left:-300%} 80%{left:-400%} 90%{left:-400%} }
@-moz-keyframes wsBasic{0%{left:-0%} 10%{left:-0%} 20%{left:-100%} 30%{left:-100%} 40%{left:-200%} 50%{left:-200%} 60%{left:-300%} 70%{left:-300%} 80%{left:-400%} 90%{left:-400%} }
@-webkit-keyframes wsBasic{0%{left:-0%} 10%{left:-0%} 20%{left:-100%} 30%{left:-100%} 40%{left:-200%} 50%{left:-200%} 60%{left:-300%} 70%{left:-300%} 80%{left:-400%} 90%{left:-400%} }

#wowslider-container1 {
    box-shadow: 0 0 2px #000000;   
    -moz-box-shadow: 0 0 2px #000000;
    -webkit-box-shadow: 0 0 2px #000000;
}
#wowslider-container1 .ws_bullets  a img{
   text-indent:0;
   display:block;
   bottom:20px;
   left:-78px;
   visibility:hidden;
   position:absolute;
    box-shadow:0 0 2px #000000;
    -moz-box-shadow: 0 0 2px #000000;
    -webkit-box-shadow: 0 0 2px #000000;
   max-width:none;
}
#wowslider-container1 .ws_bullets a:hover img{
   visibility:visible;
}

#wowslider-container1 .ws_bulframe div div{
   height:48px;
   overflow:visible;
   position:relative;
}
#wowslider-container1 .ws_bulframe div {
   left:0;
   overflow:hidden;
   position:relative;
   width:156px;
   background-color:#000000;
}
#wowslider-container1  .ws_bullets .ws_bulframe{
   display:none;
   bottom:20px;
   overflow:visible;
   position:absolute;
   cursor:pointer;
    box-shadow:0 0 2px #000000;
    -moz-box-shadow: 0 0 2px #000000;
    -webkit-box-shadow: 0 0 2px #000000;
}
#wowslider-container1 .ws_bulframe span{
   display:block;
   position:absolute;
   bottom:-6px;
   margin-left:0px;
   left:78px;
   background:url(./triangle.png);
   width:15px;
   height:6px;
}

Now i don't know where to put them.


I was searching slidefull, but same problem as here, don't know where to put codes.
sajber
sajber
Forumember

Posts : 35
Reputation : 1
Language : Croatian, English

http://animan.forumcroatian.com/forum

Back to top Go down

In progress Re: WoW slider

Post by Sir Chivas™ January 15th 2014, 3:50 am

The first code can be placed in the following place: ACP >> Display >> Homepage >> Generalities >> Homepage Content.

The second code will be in the following place: ACP >> Display >> Colors >> CSS (Tab)
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6965
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

In progress Re: WoW slider

Post by sajber January 16th 2014, 11:02 am

Didn't work.
Also, i wannt it as a header. I also have Nivo slider, and put it hompage, but i wannt it  as a header.
sajber
sajber
Forumember

Posts : 35
Reputation : 1
Language : Croatian, English

http://animan.forumcroatian.com/forum

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum