Autor Zpráva
miropiro
Profil
Dobrý den, pustil jsem se do tvorby nového webu www.pompe-peristaltique.com/index.php - podle požadavku kolegyně tam chce mít slider, který navíc bude responsivní (sama stránka má být také responsivní). Zatím mi to ale přináší spíše více komplikací a vrásek. Ale asi to bude tím, že nevím, co přesně udělat. Stáhl jsem si podle této stránky bxslider.com soubor a nahodil jsem jej na web. Problém je v tom, že jsem nepochopil, kam mám podle návodu umístit tento kód
$(document).ready(function(){
  $('.bxslider').bxSlider();
});

A vlastně moc nechápu, proč jsem stahoval v tom zipu i další soubory, mám je také nahrát na server?
ondra15
Profil
miropiro:
Příliš jsem Váš kód nezkoumal, ale vidím tam 2x přilinkovaný knihovnu jquery.min.js (11 a 43 řádek jquery.min.js). Pokud byste chtěl najít chybu, napište mi na vasko.o@seznam.cz. Kouknul bych se Vám na kód.
juriad
Profil
Stačí ti odstranit to druhé jquery.min.js, jak zmiňuje ondra15. Pak bude stránka fungovat; LAMBDA POWDER DOSER.

bxslider požaduje knihovnu jQuery (kromě příkladu použití neříkají, jakou verzi jQuery vyžadují)
bxslider je sám o sobě kus JavaScriptu, který se navěsí na jQuery
bxslider má nějaký svůj styl, který je taktéž nutné přilinkovat

Je možné, že i jiné prvky na stránce vyžadují jQuery (například Bootstrap ji vyžaduje). Pak ji přilinkuj jen jednou (před vším, co ji vyžaduje) ve správné verzi (která to je, to bys měl zjistit v dokumentaci a pokusem; obvykle chceš nejvyšší verzi v řadě 1.)
miropiro
Profil
Tak to druhé jquery.min.js jsem si odstranil, respektive na něj přestal odkazovat. To skutečně pomohlo.

A pochopil jsem také, jak přilinkovat ten slider a to tak, že jsem přidal kód, skript takto:

    <script type="text/javascript">
  $(document).ready(function(){
    
$('.bxslider').bxSlider({
  auto: true,
  autoControls: true
});
  });
</script>
            <div class="col-md-8">

                    <ul class="bxslider">


                        
  <li><img src="images/Peristaltic_pumps_LAMBDA_small.jpg" /></li>
  <li><img src="images/Pump head of LAMBDA Peristaltic Pumps.jpg" /></li>
  <li><img src="images/Quartz-controlled electronics in LAMBDA Peristaltic Pumps.jpg" /></li>

</ul>
                </div>
Výsledkem je to, že slider se sám od sebe přehrává, nicméně nevidím ikonky pro zastavení slideru a hlavně se mi ten slider vložil dvakrát, což moc dobře není, že ano :-) A teď nedokážu přijít na to, jak tohle vyřešit, přitom jedu de facto podle postupu a zdroje, který má na tento stránce bxslider.com/examples/auto-show-start-stop-controls ....

Předem díky za rady :-)


Problém se vyřešil sám - měl jsem ten skript odkazovaný dvakrát :-) Teď už to jede :)
miropiro
Profil
Ale je tu krapet jiný problém a to pozice těch obrázků - ten levý a pravý obrázek (nikoliv ten prostřední) v rámci slideru jsou nějak podivně přimknuté vlevo a to nechci, ale když zkoumám kód, tak nevím, jak ty obrázky přinutit k té pozici :-/
juriad
Profil
Mám takový dojem, že ten slider je vadný. Šipky pro posun doleva, doprava nejsou stejně daleko od kraje. Může za to styl:
.bx-wrapper .bx-viewport {
    background: #fff none repeat scroll 0 0;
    border: 5px solid #fff;
    box-shadow: 0 0 5px #ccc;
    left: -5px;
    transform: translateZ(0px);
}
Ale nevím, zda je to ta chyba, o které mluvíš. Žádného posunutí jen některých obrázků jsem si nevšiml.
miropiro
Profil
No díky za radu, ale stejně to vypadá, že je někde chyba, která způsobuje tu divnou pozici. Jestliže si totiž začnu hrát ve Firefoxu s průzkumníkem prvků a začnu editovat konfigurace sekce "<a class="bx-next" href="">Next</a>" na extrémní šířku (třeba 216 px), tak se objeví tlačítko posunu doprava podruhé...takže se zdá, že je to někde loadováno podruhé...
Což nechápu, na skript se přeci odkazuji jen jednou...

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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