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(" ");
}
});
//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