Slajder - 2. stil

Princip je isti kao i u prethodnom post-u, samo kopirajte sledeći kod i ubacite u HTML widget i to je to. Mada malo ima nekih poteškoća, probajte da otklonite ako je to moguće nekako, nije teško a iskreno da vam kažem nije da neću nego nemam kad da rešim sve probleme. Uvek kad mogu ja hoću.
prvo demo.

DEMO

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> <script src="http://dl.dropboxusercontent.com/s/3uxu6uv7k0zn3he/jquery.jcarousel.pack.js" type="text/javascript"></script> <script src="http://dl.dropboxusercontent.com/s/vsk53rhw4xvkhc2/jquery-ui-personalized-1.5.2.packed.js" type="text/javascript"></script> <script type="text/javascript">jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap:"both", scroll:2, animation:"slow" }); function mycarousel_initCallback(carousel) { jQuery('#featured-next-button').bind('click', function() { carousel.next(); return false; }); jQuery('#featured-prev-button').bind('click', function() { carousel.prev(); return false; }); jQuery('.button-nav span').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); }; jQuery('#feature-carousel').jcarousel({ wrap:"both", scroll:1, auto:10, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null }); }); </script><a href="http://24work.blogspot.com/" rel="nofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="nofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="nofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><style type="text/css">.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;} .jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;} .jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;} .jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;} .jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;} .jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;} .jcarousel-skin-tango .jcarousel-next-horizontal { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFTRcbjEfH1ZcnAiUKHJ5zctCKAEh1dBUa867rDVraOU6OFnioe1477pcuNo_YemK4JwvsASXEsuY4PlLuyyo7_XS7Cb6I1QLoVAb3AC1-UiX6e9AWMeNvpD6shv0aCJonTykJ9UGWNSUC/s1600/image-slider-button.png) no-repeat scroll -46px 0; cursor:pointer; height:254px; right:20px; position:absolute; top:0; width:46px; } .jcarousel-skin-tango .jcarousel-prev-horizontal { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFTRcbjEfH1ZcnAiUKHJ5zctCKAEh1dBUa867rDVraOU6OFnioe1477pcuNo_YemK4JwvsASXEsuY4PlLuyyo7_XS7Cb6I1QLoVAb3AC1-UiX6e9AWMeNvpD6shv0aCJonTykJ9UGWNSUC/s1600/image-slider-button.png) no-repeat scroll 0 0; cursor:pointer; height:254px; left:20px; position:absolute; top:0; width:46px; } .jcarousel-container {position: relative;} .jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;} .jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;} .jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;} .jcarousel-next {z-index: 3;display: none;} .jcarousel-prev {z-index: 3;display: none;} #news-slider{background-color:#FFFFFF;padding:20px 0;} #news-slider img{border:none;height:254px;width:307px;} </style> <div id="news-slider"><ul class="jcarousel-skin-tango" id="mycarousel"><li><a href="#" target="_blank"><img height="254" src="https://lh5.googleusercontent.com/-MBp2ch7iopo/UorGY6AH0cI/AAAAAAAATlY/_1gtKfZbWpo/w346-h271/1454748_253944841422462_113018217_n%5B1%5D.jpg" width="307" /></a></li><li><a href="#" target="_blank"><img height="254" src="https://lh3.googleusercontent.com/-bSCWmY2J-7o/UoeeIZSyvzI/AAAAAAAASvc/kEGuOwlH_BM/w346-h519/tumblr_mw2yqvNRbX1sophouo1_500%5B1%5D.jpg" width="307" /></a></li><li><a href="#" target="_blank"><img height="254" src="https://lh4.googleusercontent.com/-SrLDYuzxtqU/Uoa92gGH-1I/AAAAAAAAScM/Wt8Di-kwoMM/w346-h510/999330_550430708355268_1340042868_n%5B1%5D.jpg" width="307" /></a></li><li><a href="#" target="_blank"><img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE8jSafwKVCYbO3Q9PviPEyj2qhw3BTzqD6cfeewZbWS038PDXGNlrRHjobGAzmVv9HJD9mdTHT_ivf_2AwJ2iYBURsCGn9WYqvTAvAlBxUZeTRDb0cLpbJzKGFuFmeWGK7AiuibGnKsJu/s1600/Falling+Objects++Falling+Text++Marquee+Scrolling+Text+Generator+for+Blogger.png" width="307" /></a></li><li><a href="#" target="_blank"><img height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkEQ0_4ZRetI91UedszFI3XZ4o0BJJDcNwKW_4f8EL9H5U3h6fmtzbowjdzRdU4sNkJKS12WUBEqt35BE0kplId9opwuFHNX6yhHfyQu7UldhNkbtIyWjhOB839uCvv820z5pddBAg9Bg_/s1600/How+To+Add+Animated+Flash+Clock+To+Your+Blogger+Blog.png" width="307" /></a></li></ul></div><div class="clear"></div>