Slider bar yapımı yardım?

07-10-2013, 18:00:14

Arkadaşlar alttaki like tıkladığınızda sayfamda full-width bir slider var ancak bu sliderın altına slider bar koymak istiyorum yani 6 tane nokta tıklasın değişsin tıklasın değişsin bunu nasıl yaparım yardım ederseniz sevinirim.

LİNK

10-10-2013, 00:30:43

#2

BestCoder

Elegantrap adlı üyeden alıntı: mesajı görüntüle

Arkadaşlar alttaki like tıkladığınızda sayfamda full-width bir slider var ancak bu sliderın altına slider bar koymak istiyorum yani 6 tane nokta tıklasın değişsin tıklasın değişsin bunu nasıl yaparım yardım ederseniz sevinirim.

LİNK

Üstad aşağıda anlatıcaklarımı sırasıyla yaparsan istediğin gibi olucaktir. Umarım yanlış anlamamışımdır.

Şimdi;

1. ilk verdiğim JS kodunu altındaki kodla değiştir. (Ham Halde, 316. Satırdan Başlıyor)

    
<script type="text/javascript">
		$(document).ready(function(){	
			//Slider
			$('#camera_wrap_1').camera();
			
			//Featured works & latest posts
			$('#mycarousel, #mycarousel2, #newscarousel').jcarousel();													
		});		
</script>

    
<script type="text/javascript">
		$(document).ready(function(){	
			//Slider
			$('#camera_wrap_1').camera({pagination:true,
				onLoaded:function(){
					$('#camera_wrap_1').find("ul.camera_pag_ul li span span").html("&nbsp;&nbsp;");
				}
			});
			
			//Featured works & latest posts
			$('#mycarousel, #mycarousel2, #newscarousel').jcarousel();													
		});		
</script>

2. ilk verdiğim CSS kodu altındaki kodla değiştir.(Ham Halde, 20. Satırdan Başlıyor)

<style type="text/css">
.menu_wrap .nav > li {
  padding: 10px 10px 10px 10px;
  display:inline-block;
}
.menu_wrap .nav > li:hover {
  background:#999;
}
.menu_wrap .nav > li.sfHover > a,
.menu_wrap .nav > li.sfHover > a:hover,
.menu_wrap .nav > li > a:hover,
.menu_wrap .nav > li.current > a,
.menu_wrap .nav > li.current > a:hover {
	color: #f00;
	background:f60;
}
</style>

<style type="text/css">
.menu_wrap .nav > li {
  padding: 10px 10px 10px 10px;
  display:inline-block;
}
.menu_wrap .nav > li:hover {
  background:#999;
}
.menu_wrap .nav > li.sfHover > a,
.menu_wrap .nav > li.sfHover > a:hover,
.menu_wrap .nav > li > a:hover,
.menu_wrap .nav > li.current > a,
.menu_wrap .nav > li.current > a:hover {
	color: #f00;
	background:f60;
}

.camera_pag_ul
{
	display:inline !important;
	background-color:#F00;
	width:100px;
	margin:0 auto;
}

.camera_pag
{
	text-align:center;
}
.camera_pag_ul li
{
	display:inline;
	cursor:pointer;
}

.camera_pag_ul li span span
{
	display:inherit;
	padding:0 5px;
	margin:3px;
	background-repeat:no-repeat;
	background-image:url(img/slider-bullet-icon.png);
}

.camera_pag_ul li.cameracurrent span span
{
	background-position:0px -15px;
}
</style>

3. Aşağıda Linkini gönderdiğim resmi indirerek 'img/' klasörünün içine ismini değiştirmeden kaydet.

Resim Dosyasının Linki

10-10-2013, 00:47:38

#3

Elegantrap

BestCoder adlı üyeden alıntı: mesajı görüntüle

Üstad aşağıda anlatıcaklarımı sırasıyla yaparsan istediğin gibi olucaktir. Umarım yanlış anlamamışımdır.

Şimdi;

1. ilk verdiğim JS kodunu altındaki kodla değiştir. (Ham Halde, 316. Satırdan Başlıyor)

    
<script type="text/javascript">
		$(document).ready(function(){	
			//Slider
			$('#camera_wrap_1').camera();
			
			//Featured works & latest posts
			$('#mycarousel, #mycarousel2, #newscarousel').jcarousel();													
		});		
</script>

    
<script type="text/javascript">
		$(document).ready(function(){	
			//Slider
			$('#camera_wrap_1').camera({pagination:true,
				onLoaded:function(){
					$('#camera_wrap_1').find("ul.camera_pag_ul li span span").html("&nbsp;&nbsp;");
				}
			});
			
			//Featured works & latest posts
			$('#mycarousel, #mycarousel2, #newscarousel').jcarousel();													
		});		
</script>

2. ilk verdiğim CSS kodu altındaki kodla değiştir.(Ham Halde, 20. Satırdan Başlıyor)

<style type="text/css">
.menu_wrap .nav > li {
  padding: 10px 10px 10px 10px;
  display:inline-block;
}
.menu_wrap .nav > li:hover {
  background:#999;
}
.menu_wrap .nav > li.sfHover > a,
.menu_wrap .nav > li.sfHover > a:hover,
.menu_wrap .nav > li > a:hover,
.menu_wrap .nav > li.current > a,
.menu_wrap .nav > li.current > a:hover {
	color: #f00;
	background:f60;
}
</style>

<style type="text/css">
.menu_wrap .nav > li {
  padding: 10px 10px 10px 10px;
  display:inline-block;
}
.menu_wrap .nav > li:hover {
  background:#999;
}
.menu_wrap .nav > li.sfHover > a,
.menu_wrap .nav > li.sfHover > a:hover,
.menu_wrap .nav > li > a:hover,
.menu_wrap .nav > li.current > a,
.menu_wrap .nav > li.current > a:hover {
	color: #f00;
	background:f60;
}

.camera_pag_ul
{
	display:inline !important;
	background-color:#F00;
	width:100px;
	margin:0 auto;
}

.camera_pag
{
	text-align:center;
}
.camera_pag_ul li
{
	display:inline;
	cursor:pointer;
}

.camera_pag_ul li span span
{
	display:inherit;
	padding:0 5px;
	margin:3px;
	background-repeat:no-repeat;
	background-image:url(img/slider-bullet-icon.png);
}

.camera_pag_ul li.cameracurrent span span
{
	background-position:0px -15px;
}
</style>

3. Aşağıda Linkini gönderdiğim resmi indirerek 'img/' klasörünün içine ismini değiştirmeden kaydet.

Resim Dosyasının Linki

Arkadaşım zaman ayırdığın için çok teşekkür ederim eline parmaklarına sağlık. Tam olarak istediğim buydu. Teşekkürler.

10-10-2013, 01:54:37

#4

BestCoder

Elegantrap adlı üyeden alıntı: mesajı görüntüle

Arkadaşım zaman ayırdığın için çok teşekkür ederim eline parmaklarına sağlık. Tam olarak istediğim buydu. Teşekkürler.

Yardımcı olabildiysem ne mutlu