Autor Zpráva
michal454454
Profil
Zdravim potřeboval bych prosim pomoct se sliderem který mi ujíždí a vypadá to jako by byl součástí hlavního_tela nevím proč... díky
tady je odkaz: http://futsal-wsa.8u.cz/

soubor index.php
  <?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>

slider.php
<?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>
jssslider.js
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();
    });

});    
style.css
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;

 

 
 }
Tomáš123
Profil
michal454454:
sliderem který mi ujíždí a vypadá to jako by byl součástí hlavního_tela
Prosím o snímok obrazovky a popis ako to vyzerať má a nevyzerá. Nie je mi úplne jasné o akom „ujíždení“ hovoríš. Jediné, čo pozorujem je pravdepodobne nechcená pozícia šípok. Priveľkú výšku spôsobuje deklarácia height: 753px. Po jej odstránení vyzerá slider ako tak normálne. V kóde ju však nevidím (podľa prieskumníka by mala byť v HTML na riadku 55. Pozri sa, či to náhodou nejakým spôsobom nespôsobuje JavaScript. Ak chceš dosiahnuť vzhľad ako na snímku, ale tiež nevieš nájsť deklaráciu, ktorá spôsobuje problémy, môžeš na riadok 55 napísať <div id="slider" style="height: auto"> (prípadne aj s !important).
lionel messi
Profil
Tomáš123:
Prosím o snímok obrazovky a popis ako to vyzerať má a nevyzerá.
Predpokladám, že screenshot nebude potrebný.

Nie je mi úplne jasné o akom ‚ujíždení‘ hovoríš.
Na 95% má podľa mňa michal454454 na mysli stav, keď po kliknutí na šípku slideru dôjde k poskočeniu celej stránky až k jej hornému okraju.

michal454454:
Skontroluj si Javascript (konkrétne jQuery kód funkcie), neovládam ho do takej miery, aby som si na to trúfal sám. Rýchla (a asi trochu „prasácka“) oprava:
 <a href="#" class="control_next" onclick="return false">>></a>
michal454454
Profil
[img]C:\Users\Mira\Desktop\slider.jpg[/img]


nebo je to videt primo tady na te uvodni strance...
http://php-zkouska.8u.cz/


lionel messi:
Ono se mi předtím stalo že ta výška toh divu slider se 1násobně zvětšila a odsadila cele to telo pod tím nevím proč...
Marschmallow
Profil
michal454454:
„[img]C:\Users\Mira\Desktop\slider.jpg[/img]“
Takhle ten obrázek vidíš jen ty, protože odkazuje na Tvůj disk. Nahraj ho někam na veřejné úložiště. Doporučuji img.djpw.cz.
michal454454
Profil
uz jsem to tam nahral
http://img.djpw.cz/qrb.jpeg


ted se mi takto rozkouskoval ten prechod mezi obrazkama

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: