Adım 1 : Aşağıdaki kodu <head> </head> tagları arasına yerleştirin
<link rel="stylesheet" href="http://mintik.com/wp-content/uploads/2011/11/website.css" type="text/css" media="screen"/> <!--[if lte IE 6]> <style type="text/css"> /* Internet Explorer 6 PNG transparency fix */ #rotatescroll .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg-rotatescroll.png", sizingmethod='scale'); } #rotatescroll .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg-thumb.png", sizingmethod='scale'); } </style> <![endif]--> <script type="text/javascript" src="http://mintik.com/wp-content/uploads/2011/03/jquery-1.2.6.min_.js"></script> <script type="text/javascript" src="http://mintik.com/wp-content/uploads/2011/11/jquery.tinycircleslider.min_.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#rotatescroll').tinycircleslider({ 'interval': false, snaptodots: true }); }); </script> </head> <!-- http://mintik.com kod sonu -->
Adım 2 : Circle Slide örneğini koymak istediğiniz yere aşağıdaki kodu yerleştirin
<!-- http://mintik.com kod baslangici --> <body> <div id="rotatescroll"> <div class="viewport"> <ul class="overview"> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/11/vahsi_doga.png" /></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/11/timsah.png" /></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/11/leoparlarin_savasi.png" /></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/11/kanguru.png" /></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/11/filler.png" /></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/11/aslan.png" /></a></li> </ul> </div> <div class="dot"></div> <div class="overlay"></div> <div class="thumb"></div> </div> </body> </html> <!-- http://mintik.com kod sonu -->
Adım 3 : Kodların birleştirilmiş hali
<link rel="stylesheet" href="http://mintik.com/wp-content/uploads/2011/11/website.css" type="text/css" media="screen"/> <!--[if lte IE 6]> <style type="text/css"> /* Internet Explorer 6 PNG transparency fix http://mintik.com */ #rotatescroll .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg-rotatescroll.png", sizingmethod='scale'); } #rotatescroll .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bg-thumb.png", sizingmethod='scale'); } </style> <![endif]--> <!-- http://mintik.com kod sonu --> <script type="text/javascript" src="http://mintik.com/wp-content/uploads/2011/03/jquery-1.2.6.min_.js"></script> <script type="text/javascript" src="http://mintik.com/wp-content/uploads/2011/11/jquery.tinycircleslider.min_.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#rotatescroll').tinycircleslider({ 'interval': false, snaptodots: true }); /* http://mintik.com */ }); </script> </head> <body> <div id="rotatescroll"> <div class="viewport"> <ul class="overview"> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/11/vahsi_doga.png" /></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/11/timsah.png" /></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/11/leoparlarin_savasi.png" /></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/11/kanguru.png" /></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/11/filler.png" /></a></li> <li><a href="http://mintik.com"><img src="http://mintik.com/wp-content/uploads/2011/11/aslan.png" /></a></li> </ul> </div> <div class="dot"></div> <div class="overlay"></div> <div class="thumb"></div> </div> </body> </html> <!-- http://mintik.com kod sonu -->