Slider ujždí dolů

  <?php
if(!isset($_GET['action'])){
include "slider.php";
}
?>

     

      

<div class="hlavnitelo">

 <?php
            
if(isset($_GET['action'])){
    
    switch($_GET['action']){
    
        case 'zobrazClanek': 
        if(isset($_GET['id'])){
            
            
            $clanek = $db->get('clanky','*',['id' => $_GET['id']]);
            include_once "./action/clanek.php";
            }
        break;
        
           
    default:
        include_once "./homepage.php";
    
    }
} else {
    include_once "./homepage.php";
}
?>
</div>

<?php

$slidero=$db->select("clanky","*",['ORDER' => 'datum DESC','LIMIT'=> 4]);
?>

<div id="slider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><<</a>
    <ul>
    <?php
foreach($slidero as $sl){
  echo '
      <li><img style="width:100%; height:80%;" src="' .$sl["obrazek"].'" /></li>';
    
}

      ?>
        </ul>
</div>

jQuery(document).ready(function ($) {

  
    setInterval(function () {
        moveRight();
    }, 10000);
  
  
    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;
    
    $('#slider').css({ width: slideWidth, height: slideHeight });
    
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
    
    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});    

div#slider {
  height: 300px; 
  width: 1000px !important; 
  overflow: hidden; 
  margin: auto; 
  position: relative;
  box-shadow:0 0 5px rgba(50,50,50,25);
  margin-top:0px;

  
  
}

#slider ul {

  position: relative;
  margin:0;
  padding: 0;
  height: 200px;
  list-style: none; 

}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 1000px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #158;
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;

}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
background:white;
color:#158;

-webkit-transition:background .4s;


}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

div.hlavnitelo
{

 width:1000px;
 min-height:1400px;
 margin: auto;
 margin-top:50px;
 border-bottom:1px solid white;
opacity:0.9;

 

 
 }