Слайдер без javascript

Автор: Hous

Идеята на слайдера е да покаже, че може да се направи същата ефективност като останалите jquery/javascript слайдери, без да се налага да използвате javascript.

<style>
.main{
width:905px;
margin:0px auto;
background:#fafafa;
border:1px solid #dedede;
}
.frame{
display:inline-block;
margin-right:5px;
}
.selectors{
display:inline-block;
width:290px;
height:97px;
border:1px solid #dedede;
}
</style>
<div class="main">
<iframe class="frame" width="600" height="390" name="maincontent" src="mainindex.html" frameborder="0"></iframe>
<div style="display:inline-block;vertical-align:top;">
<a href="first.html" class="selectors" target="maincontent">LINK</a><br>
<a href="second.html" class="selectors" target="maincontent">LINK</a><br>
<a href="third.html" class="selectors" target="maincontent">LINK</a><br>
<a href="forth.html" class="selectors" target="maincontent">LINK</a><br>
</div>
</div>

Общо взето цялата идея е, че ако се даде име на iframe обект, той може да се отвори посредством линк със атрибут target=““ (в нашия случай iframe… name=“maincontent“ служи за цел на линковете със target=“maincontent“) като по този начин зареждаме друго съдържание (first/second/third/forth.html файловете в нашия случай) без да презареждаме страницата, във външните файлове може да сложите каквото прецените съдържание.

За да стане по-подвижен слайдерът може да смените фиксираните височини със % или просто да премахнете height атрибута на iframe обектът, който се явява нашия централен прозорец.

Струва си да се спомене че най-вероятно файловете които се зареждат във iframe от външните .html файлове (текст/картинки и тн) няма да се четат от google и няма да се виждат във резултатите на търсене в google.

Вашият коментар