Slider
09.05.2019 - 11:05
Html css web sayfasında tek sayfa'da birden fazla slider nasıl eklerim
6
Görüntülenme
0 Beğeni
<!Doctype html>
<html>
<head>
<title>JAVASCRIPT OLAYI</title>
<style>
.cerceve{ width:700px; margin:0px auto; border:2px;}
#resim{width:696px; height:400px;border:2px solid green; background-image:url("gins.png");
background-repeat:no-repeat;background-size:cover;}
#resim_1{width:50px; height:100px; text-align:center; line-height:100px; border:2px solid darkblue; float:left;}
#resim_2{width:50px; height:100px; text-align:center; line-height:100px; border:2px solid green; float:left;}
#resim_3{width:50px; height:100px; text-align:center; line-height:100px; border:2px solid darkblue; float:left;}
#resim_4{width:50px; height:100px; text-align:center; line-height:100px; border:2px solid green; float:left;}
#resim_5{width:50px; height:100px; text-align:center; line-height:100px; border:2px solid darkblue; float:left;}
</style>
</head>
<body>
<script>
function resim_1()
{ document.getElementById("resim").style.backgroundImage = 'url(gins.png)';}
function resim_2()
{ document.getElementById("resim").style.backgroundImage = 'url(org2.jpg)';}
function resim_3()
{ document.getElementById("resim").style.backgroundImage = 'url(img.jpg)';}
function resim_4()
{ document.getElementById("resim").style.backgroundImage = 'url(syn.jpg)';}
function resim_5()
{ document.getElementById("resim").style.backgroundImage = 'url(rog.jpg)';}
</script>
<div class="cerceve">
<div class="resim" id="resim"></div>
<div id="resim_1" onmouseover ="resim_1()" >1</div>
<div id="resim_2" onmouseover ="resim_2()" >2</div>
<div id="resim_3" onmouseover ="resim_3()" >3</div>
<div id="resim_4" onmouseover ="resim_4()">4</div>
<div id="resim_5" onmouseover ="resim_5()" >5</div>
</div>
</body>
</html>
Slider'la ilgili kod bloğunu web sitenizin istediğiniz kısmında istediğiniz kadar kullanabilirsiniz.
https://getbootstrap.com/docs/4.0/components/carousel/
bootstrap'ta kullanabileceğiniz birçok örnek slider'ı bulunmakta. Bunu birden fazla kez kullanabilirsiniz.