Hello, Guest . ProRips.Do.Am - is a website where you can find uCoz templates , scripts for uCoz and uCoz graphics . Some templates and scripts are taken from other sites and are checked by uu and some templates are rips of other sites. We are also looking for staff. So if you're interested, do not hesitate to make a request on our forum.
2024-03-29, 8:53 AM
Rendszer (Users)
  • Reputation: 0
  • Posts: 0
cinemabiled (Users)
  • Reputation: 0
  • Posts: 0
steffanelu86 (Users)
  • Reputation: 0
  • Posts: 0
2024-03-29 at 9:26 AMNice slide for uCoz

To start you need to connect the runtime libraries jQuery, it needs to insert the code into the bottom part of the site:



Code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script src="http://webuilder.info/Demo/Craftyslide/craftyslide.min.js"></script>
   
  <script>
  $("#slideshow").craftyslide();
  </script>


Then we need to set styles slider, for this you need to insert this code into your template style sheet:

Code
/*

Craftyslide CSS Styles

*/

#slideshow {
  margin:0;
  padding:0;
  position:relative;
  border:15px solid #fff;
  -webkit-box-shadow:0 3px 5px #999;
  -moz-box-shadow:0 3px 5px #999;
  box-shadow:0 3px 5px #999;
}

#slideshow ul {
  position:relative;
  overflow:hidden;
  margin:0;
  padding:0;
}

#slideshow ul li {
  position:absolute;
  top:0;
  left:0;
  margin:0;
  padding:0;
  list-style:none;
}

#pagination {
  clear:both;
  width:75px;
  margin:25px auto 0;
  padding:0;
}

#pagination li {
  list-style:none;
  float:left;
  margin:0 2px;
}

#pagination li a {
  display:block;
  width:10px;
  height:10px;
  text-indent:-10000px;
  background:url(http://webuilder.info/Demo/Craftyslide/pagination.png);
}

#pagination li a.active {
  background-position:0 10px;
}

.caption {
  width:100%;
  margin:0;
  padding:10px;
  position:absolute;
  left:0;
  font-family:Helvetica, Arial, sans-serif;
  font-size:14px;
  font-weight:lighter;
  color:#fff;
  border-top:1px solid #000;
  background:rgba(0,0,0,0.6);
}


And finally, to bring this slider to the right place to us, to do this, the code where you want to see the slider:

Code
<div id="slideshow">
  <ul>
  <li>
  <img src="address image1" alt="" title="title pos1t" />
  </li>
   
  <li>
  <img src="address image2" alt="" title="title post2" />
  </li>
   
  <li>  
  <img src="address image3" alt="" title="title post3" />
  </li>
   
  <li>  
  <img src="address image4" alt="" title="title post4" />
  </li>
   
  <li>  
  <img src="address image5" alt="" title="title post5" />
  </li>  
  </ul>
  </div>


Finish the slider is set. Main feature of the slider is that it has a small amount of weight, the ship itself is not easy to use website, it is easy to attach to the informer.
Author: Guest Category: Slider Views: 1406
Attention! To view demo "Nice slide for uCoz" please Login or Register!
Downloads: Comments: 0
Tag-Board
Statistics
Total online: 1
Guests: 1
Users: 0
Total users: 109
Users Online
Our Visitors Today ()
88x31
Free BackLink