Slajder

<html>
<head>
<link rel="stylesheet" href="glavna.css">
</head>
<body>
       <p style="margin-left:280px;" id="tekst"></p>

    <div class="sl">
        <img src="slika2.jpg">
    </div>

    <div class="sl">
        <img src="slika3.jpg">
    </div>

    <div class="sl">
        <img src="slika2.jpg">
    </div>

    <div class="sl">
        <img src="slika3.jpg">
    </div>

    <div class="sl">
        <img src="slika2.jpg">
    </div>

    <div class="sl">
        <img src="slika3.jpg">
    </div>

    <div class="sl">
        <img src="slika2.jpg">
    </div>

    <div class="sl">
        <img src="slika3.jpg">
    </div>

    <div class="sl">
        <img src="slika2.jpg">
    </div>

    <div class="sl">
        <img src="slika3.jpg">
    </div>


    <div class="levo">
      <img class="dd" src="slika2.jpg" onclick="trenutnislajd(1)" alt="slika 1">
    </div>
    <div class="levo">
      <img class="dd" src="slika3.jpg" onclick="trenutnislajd(2)" alt="slika 2">
    </div>
    <div class="levo">
      <img class="dd" src="slika2.jpg" onclick="trenutnislajd(3)" alt="slika 3">
    </div>
    <div class="levo">
      <img class="dd" src="slika3.jpg" onclick="trenutnislajd(4)" alt="slika 4">
    </div>
    <div class="levo">
      <img class="dd" src="slika2.jpg" onclick="trenutnislajd(5)" alt="slika 5">
    </div>
    <div class="levo">
      <img class="dd" src="slika3.jpg" onclick="trenutnislajd(6)" alt="slika 6">
    </div>
    <div class="levo">
      <img class="dd" src="slika2.jpg" onclick="trenutnislajd(7)" alt="slika 7">
    </div>
    <div class="levo">
      <img class="dd" src="slika3.jpg" onclick="trenutnislajd(8)" alt="slika 8">
    </div>
    <div class="levo">
      <img class="dd" src="slika2.jpg" onclick="trenutnislajd(9)" alt="slika 9">
    </div>
    <div class="levo">
      <img class="dd" src="slika3.jpg" onclick="trenutnislajd(10)" alt="slika 10">
    </div>


<script src="glavna.js">
</script>

</body>
</html>

.sl {
  display: none;
}
.levo {
  float: left;
  width: 64px;
  height: 40;
}
.dd{
width:100%;
}
.sl img{
    width:640px;
    height:400px;
}

var slajd = 1;
prikazislajd(slajd);

function trenutnislajd(n) {
  prikazislajd(slajd = n);
}

function prikazislajd(n) {
  var i;
  var slajdic = document.getElementsByClassName("sl");
  var tacka = document.getElementsByClassName("dd");
  var tekst = document.getElementById("tekst");
  if (n > slajdic.length) {slajd = 1}
  if (n < 1) {slajd = slajdic.length}
  for (i = 0; i < slajdic.length; i++) {
      slajdic[i].style.display = "none";
  }
  for (i = 0; i < tacka.length; i++) {
      tacka[i].className = tacka[i].className.replace(" active", "");
  }
  slajdic[slajd-1].style.display = "block";
  tacka[slajd-1].className += " active";
  tekst.innerHTML = tacka[slajd-1].alt;
}