Слайдер без javascript
17-11-2013
Идеята на слайдера е да покаже, че може да се направи същата ефективност като останалите 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.

/ Трябва да сте регистриран за да напишете коментар /
От: GOTI
3:27 01-03-2014
Могат и да се индексират в гугъл с други атрибути като например microdata ;)

Интересно уроче и браво, много пъти съм се сблъсквал с JS на слайдери и като почнат да се бият скриптовете и като не ги разбирам толкова много И НЕМА ОПРАВИЯ :D
1