HTML5 Resimli Slider - Jquery Slider

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBScLM7tLdoWDa7UoP609RxW_MqAnzk5u_gMWLZdUjF6wPf5cejLVlpSksIvz1527hRL0cs3Z3fQW1ISvjr1dhHEzG_qh9Q4CwHXPKm5X4XMIy5SHQugbdtTV-_XoGhgkr-Y2SALJCUeQ/s1600/832798dc465b1bf6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBScLM7tLdoWDa7UoP609RxW_MqAnzk5u_gMWLZdUjF6wPf5cejLVlpSksIvz1527hRL0cs3Z3fQW1ISvjr1dhHEzG_qh9Q4CwHXPKm5X4XMIy5SHQugbdtTV-_XoGhgkr-Y2SALJCUeQ/s1600/832798dc465b1bf6.jpg" width="320" /></a></div><br /><a class="button big blue" href="http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails" target="_blank">Demo</a> <br /><br />Blogger Şablon Menüsünden HTML'i Düzenleye  tıklayınız. Sonra  <span style="color: red;">]]></b:skin></span> kodunun üzerine aşagıdaki CSS kodlarını oraya yapıştırınız.<br /><br /><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 6px; overflow: auto; padding: 5px; width: 100%;"><span style="color: #888888;"><span style="font-size: 12px; line-height: 14px;">/*Time for the CSS*/<br />* {margin: 0; padding: 0;}<br />body {background: #ccc;}<br /> <br />.slider{<br /> width: 640px; /*Same as width of the large image*/<br /> position: relative;<br /> /*Instead of height we will use padding*/<br /> padding-top: 320px; /*That helps bring the labels down*/<br /> <br /> margin: 100px auto;<br /> <br /> /*Lets add a shadow*/<br /> box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);<br />}<br /> <br /> <br />/*Last thing remaining is to add transitions*/<br />.slider>img{<br /> position: absolute;<br /> left: 0; top: 0;<br /> transition: all 0.5s;<br />}<br /> <br />.slider input[name='slide_switch'] {<br /> display: none;<br />}<br /> <br />.slider label {<br /> /*Lets add some spacing for the thumbnails*/<br /> margin: 18px 0 0 18px;<br /> border: 3px solid #999;<br /> <br /> float: left;<br /> cursor: pointer;<br /> transition: all 0.5s;<br /> <br /> /*Default style = low opacity*/<br /> opacity: 0.6;<br />}<br /> <br />.slider label img{<br /> display: block;<br />}<br /> <br />/*Time to add the click effects*/<br />.slider input[name='slide_switch']:checked+label {<br /> border-color: #666;<br /> opacity: 1;<br />}<br />/*Clicking any thumbnail now should change its opacity(style)*/<br />/*Time to work on the main images*/<br />.slider input[name='slide_switch'] ~ img {<br /> opacity: 0;<br /> transform: scale(1.1);<br />}<br />/*That hides all main images at a 110% size<br />On click the images will be displayed at normal size to complete the effect<br />*/<br />.slider input[name='slide_switch']:checked+label+img {<br /> opacity: 1;<br /> transform: scale(1);<br />}<br />/*Clicking on any thumbnail now should activate the image related to it*/<br /> <br />/*We are done :)*/<br /></span></span><span style="color: #888888; font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;"><span style="font-size: 12px; line-height: 14px;"><br /></span></span></pre><br />Blogger <span style="color: red;">Yerleşim</span> Menüsünden <span style="color: red;">Gadget Ekle</span> ' ye tıklayınız. Sonra  <span style="color: red;">HTML/Java Script</span> ' i seçiniz. Aşağıdaki kodları oraya yapıştırınız.<br /><pre style="background-color: whitesmoke; border-left-color: rgb(185, 211, 238); border-left-style: double; border-left-width: 6px; font-family: 'Andale Mono', 'Lucida Console', Monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code><span style="color: #888888;"><!--<br />We will make a slider with stylized thumbnails using CSS3<br />The markup is very simple:<br />Radio Inputs<br />Labels with thumbnails to detect click event<br />Main Image<br />--><br /><div class="slider"><br /> <input type="radio" name="slide_switch" id="id1"/><br /> <label for="id1"><br /> <img src="</span><span style="color: red;">http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg</span><span style="color: #888888;">" width="100"/><br /> </label><br /> <img src="</span><span style="color: red;">http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg</span><span style="color: #888888;">"/><br /> <br /> <!--Lets show the second image by default on page load--><br /> <input type="radio" name="slide_switch" id="id2" checked="checked"/><br /> <label for="id2"><br /> <img src="</span><span style="color: red;">http://thecodeplayer.com/uploads/media/40Ly3VB.jpg</span><span style="color: #888888;">" width="100"/><br /> </label><br /> <img src="</span><span style="color: red;">http://thecodeplayer.com/uploads/media/40Ly3VB.jpg</span><span style="color: #888888;">"/><br /> <br /> <input type="radio" name="slide_switch" id="id3"/><br /> <label for="id3"><br /> <img src="</span><span style="color: red;">http://thecodeplayer.com/uploads/media/00kih8g.jpg</span><span style="color: #888888;">" width="100"/><br /> </label><br /> <img src="</span><span style="color: red;">http://thecodeplayer.com/uploads/media/00kih8g.jpg</span><span style="color: #888888;">"/><br /> <br /> <input type="radio" name="slide_switch" id="id4"/><br /> <label for="id4"><br /> <img src="</span><span style="color: red;">http://thecodeplayer.com/uploads/media/2rT2vdx.jpg</span><span style="color: #888888;">" width="100"/><br /> </label><br /> <img src="</span><span style="color: red;">http://thecodeplayer.com/uploads/media/2rT2vdx.jpg</span><span style="color: #888888;">"/><br /> <br /> <input type="radio" name="slide_switch" id="id5"/><br /> <label for="id5"><br /> <img src="</span><span style="color: red;">http://thecodeplayer.com/uploads/media/8k3N3EL.jpg</span><span style="color: #888888;">" width="100"/><br /> </label><br /> <img src="</span><span style="color: red;">http://thecodeplayer.com/uploads/media/8k3N3EL.jpg</span><span style="color: #888888;">"/><br /></div><br /> <br /><!-- We will use PrefixFree - a script that takes care of CSS3 vendor prefixes<br />You can download it from http://leaverou.github.com/prefixfree/ --><br /><script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script></span></code><span style="color: #888888;"><br /></span></pre><br /><span style="color: red;"><b>Kırmızı</b></span> renkle yazılmış olan kodlar resim linkleridir.<br /><br /><div class="rmzndgn">Benzer Aramalar: HTML5 Resimli Slider, Jquery Slider, HTML5, Blogger Eklentileri,</div>

HTML5 Resimli Slider - Jquery Slider

Demo Blogger Şablon Menüsünden HTML'i Düzenleye  tıklayınız. Sonra   ]]></b:skin> kodunun üzerine aşagıdaki CSS kodlarını ora...

Devamı »