Sitenizin farklı alanlarında kullanabileceğiniz şık bir slayt gösterisi efektine ne dersiniz? Bu efekti siteniz üzerinde denemek için aşağıdaki kodu Jimdo sitenizin Head bölümüne yerleştirin.
<style type="text/css">
/*<![CDATA[*/
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
display: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
.nivo-slice {
border-radius: 5px;
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
text-align: center;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-controlNav {
text-align:center;
padding: 15px 0;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
.nivoSlider {
position:relative;
background:#fff url(http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/img/loading.gif) no-repeat 50% 50%;
width:678px;
height:100%;
margin-bottom:10px;
border-radius: 5px;
box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
border-radius: 5px;
box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
}
.nivoSlider a {
border:0;
display:block;
}
.nivo-controlNav {
text-align: center;
padding: 20px 0;
}
.nivo-controlNav a {
display:inline-block;
width:22px;
height:22px;
background:url(http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/img/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin: 0 2px;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/img/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.nivoSlider:hover .nivo-directionNav a { opacity: 1; }
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#fff;
border-bottom:1px dotted #fff;
}
.nivo-caption a:hover {
color:#fff;
}
.nivo-controlNav.nivo-thumbs-enabled {
width: 100%;
}
.nivo-controlNav.nivo-thumbs-enabled a {
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
}
.nivo-controlNav.nivo-thumbs-enabled img {
display: block;
width: 120px;
height: auto;
}
/*]]>*/
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<script type="text/javascript" src="http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/js/jquery-nivo-slider-pack-neu.js">
</script>
<script type="text/javascript">
//<![CDATA[
var $j = jQuery.noConflict();
$j(window).load(function() {
$j('#slider').nivoSlider({
effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
slices:15,
animSpeed:500, //Slide transition speed
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:false, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){}, //Triggers after all slides have been shown
lastSlide: function(){}, //Triggers when last slide is shown
afterLoad: function(){} //Triggers when slider has loaded
});
});
//]]>
</script>
Nivo Slider için çeşitli ayarlamaları nasıl yapabileceğinizi öğrenmek için bu sayfaya gidin.
Son olarak aşağıdaki kodu bir bileşenler / HTML öğesine kopyalayın.
<div id="slider" class="nivoSlider">
<a href="BAĞLANTI"><img src="RESIM BAĞLANTISI" alt="" title="YAZI" /></a> <a
href=
"BAĞLANTI"><img src="RESIM BAĞLANTISI" alt="" title="YAZI" /></a> <a href=
"BAĞLANTI"><img src="RESIM BAĞLANTISI" alt="" title="YAZI" /></a> <a href=
"BAĞLANTI"><img src="RESIM BAĞLANTISI" alt="" title="YAZI" /></a>
</div>
Kod içerisindeki ilgili alanlara resim bağlantılarını da girmeniz gerekir. Dilerseniz slaytların altına gösterilecek bir yazı ve üzerine tıklandığında yönlenilen bir bağlantı da ekleyebilirsiniz.
Kod ile ilgili soru ve yorumlarınızı buradan iletin.
Tanja (Friday, 25 June 2021 14:41)
Hallo,
bitte können Sie den Code korrigieren, Nivo-Slider funktioniert nicht.
Danke
Salm Najar (Tuesday, 22 January 2019 09:50)
Renk Kodlary
<iframe width="453" height="315" src="http://www.kodbul.org/renk_kodlari.htm" name="ilil" scrolling="no" border="0" frameborder="0" marginwidth="1" marginheight="1"></iframe>
mertataktr (Saturday, 27 September 2014 09:29)
gençler skype: karakedi123x resilerin boyutunu ayarlayabilirim karşılığında para değil sadece youtube kanalıma abone olmanızı istiyorum
Site Efektleri (Thursday, 04 September 2014 08:21)
Merhaba çindengetir.com,
Hayır, maalesef bir sayfada en fazla bir tane kullanabiliyorsun.
Selamlar.
çindengetir.com (Wednesday, 03 September 2014 22:29)
merhaba
bir sayfaya birden fazla nivo slider ekleyemiyorum. bunun bir yolu varmıdır?
Site Efektleri (Friday, 08 August 2014 09:39)
Merhaba Gebzeden,
Nivo slider resimlerin genişliğini 678px olarak kısıtlandırıyor fakat yüksekliğini kısıtlandırmıyor ve gerçek resim yüksekliği neyse onu gösteriyor. Bu sebeple kullanacağın resimleri doğru yükseklik ile sitene yüklersen, sorun yaşamazsın.
gebzeden (Thursday, 07 August 2014 22:59)
Bu slaytın boyutunu nasıl düzenleriz. Resin boyutuyla ilgili değil.Remin boyutunu küçülttüğüm halde slayt boyutu aynı kalıyor.Yüksekliğini azaltmak istiyorum.
Site Efektleri (Tuesday, 08 July 2014 15:46)
Merhaba Ali Erdal,
Sitenin head bölümüne eklenen kod içinde şu bölümü bul:
.nivoSlider {
position:relative;
background:#fff url(http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/img/loading.gif) no-repeat 50% 50%;
width:678px;
height:100%;
margin-bottom:10px;
border-radius: 5px;
box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
}
Bu bölümden "width:678px;" değerini küçülterek slider boyutunu küçültebilirsin.
Kolay gelsin.
Site Efektleri (Tuesday, 08 July 2014 15:38)
Merhaba Tuna,
Jimdo'nun sütun öğesinden faydalanarak sliderı kolayca konumlandırabilirsin. Sütun öğesi ekleyerek solda kalan sütunu boş bırak, sağ tarafa resim bir bileşenler / HTML öğesi ekleyerek resim bağlantılarını ekle. Daha sonra soldaki boş sütun öğesini kaydırarak slider'ı dilediğin gibi konumlandır.
İyi çalışmalar.
Site Efektleri (Tuesday, 08 July 2014 15:21)
Merhaba Popivideo,
Gönderdiğin bağlantı eksik ve sanırım direkt bir resim bağlantısı değil, Google arama sonuçlarının bir bağlantısı. Resimlerin düzgün çalıştığından emin olmak için kendi sitene yükleyerek bağlantılarını almanı tavsiye ederim:
http://siteefektleri.jimdo.com/resim-y%C3%BCkleme/
Kolay gelsin.
Ali Erdal (Tuesday, 08 July 2014 10:53)
Slider'ın boyutları sayfaya büyük geliyor.Ne yapmalıyım?
tuna (Monday, 07 July 2014 20:44)
Slider'ın konumunu nasıl ortalayabilirim?
popivideo (Monday, 07 July 2014 14:45)
https://www.google.com.tr/search?q=wallpaper&tbm=isch&imgil=ZwqJVZuLHp1qSM%253A%253Bhttps%253A%252F%252Fencrypted-tbn1.gstatic.com%252Fimages%253Fq%253Dtbn%253AANd9GcTdP3bnoOIz9PQeW2XbL33pw0kaCT_Qo5Ks9jFImTaPBx3kRmhq%253B3840%253B2160%253BiPBPYAQD3bMfIM%253Bhttp%25253A%25252F%25252Fbackgroundland.com%25252Faventador-tron-wallpaper%25252F&source=iu&usg=__9GzZMvzeLRHKGoIx8td3yuJ3GMk%3D&sa=X&ei=Z5W6U-TGJ82B7Qb2xYCACg&sqi=2&ved=0CBwQ9QEwAA&biw=1366&bih=667#facrc=_&imgdii=_&imgrc=M4Rqg4ATPOXk8M%253A%3B3Xhz1fNEH91DNM%3Bhttp%253A%252F%252Fwww.nexus5wallpapers.com%252Fwp-content%252Fuploads%252F3D%252F3D%252520Nexus%2525205%252520Wallpapers%252520HD%25252086.jpg%3Bhttp%253A%252F%252Fwww.nexus5wallpapers.com%252Fcategory%252F3d%3B1080%3B1920
bu adresteki resimi "RESİM BAĞLANTISI" yazan yere kopyaladım. Resim görünmüyor.