Pereiti prie turinio

slideshow

audriusltu

Sukūrė audriusltu
Programuotojų kampas

 Dalintis Sekėjai 3

Rekomenduojami pranešimai

audriusltu

audriusltu 0

Atrašyta
  • Autorius
Atrašyta

http://bxslider.com/ - vienas geriausių slideri'ų. Puslapy instrukcija kaip naudoti.

Step 1: Link required files

First and most important, the jQuery library needs to be included (no need to download - link directly from Google). Next, download the package from this site and link the bxSlider CSS file (for the theme) and the bxSlider Javascript file.

 

 

 

Nelabai suprantu šitą žingsnį

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Arvis

Arvis 767

Atrašyta
Atrašyta

Step 1: Link required files

First and most important, the jQuery library needs to be included (no need to download - link directly from Google). Next, download the package from this site and link the bxSlider CSS file (for the theme) and the bxSlider Javascript file.

 

 

 

Nelabai suprantu šitą žingsnį

 

Į head dalį reikės įdėti:

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

Nuoroda į pranešimą
Dalintis kituose puslapiuose
DJManas

DJManas 252

Atrašyta
Atrašyta (redaguota)

Kodo pavyzdys, kad būtų lengviau susigaudyti:

 

<html>

<head>
<!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

$(document).ready(function(){
 $('.bxslider').bxSlider();
});
</head>

<body>
<ul class="bxslider">
 <li><img src="/images/pic1.jpg" /></li>
 <li><img src="/images/pic2.jpg" /></li>
 <li><img src="/images/pic3.jpg" /></li>
 <li><img src="/images/pic4.jpg" /></li>
</ul>
</body>

</html>

 

Failą jquery.bxslider.min.js turi įsikelti pas save į katalogą js

 

Failą jquery.bxslider.css turi įsikelti pas save į katalogą lib. Šis failas nėra būtinas jei rašysi savo slideshow stilių pats.

 

Failus parsiųsti gali čia: http://bxslider.com/lib/jquery.bxslider.zip

Redagavo DJManas
Nuoroda į pranešimą
Dalintis kituose puslapiuose
Soulll

Soulll 70

Atrašyta
Atrašyta (redaguota)

Kodo pavyzdys, kad būtų lengviau susigaudyti:

 

<html>
<head>
<!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

$(document).ready(function(){
 $('.bxslider').bxSlider();
});
</head>

<body>
<ul class="bxslider">
 <li><img src="/images/pic1.jpg" /></li>
 <li><img src="/images/pic2.jpg" /></li>
 <li><img src="/images/pic3.jpg" /></li>
 <li><img src="/images/pic4.jpg" /></li>
</ul>
</body>

</html>

 

Failą jquery.bxslider.min.js turi įsikelti pas save į katalogą js

 

Failą jquery.bxslider.css turi įsikelti pas save į katalogą lib. Šis failas nėra būtinas jei rašysi savo slideshow stilių pats.

 

Failus parsiųsti gali čia: http://bxslider.com/...ry.bxslider.zip

 

Pataisysiu klaidą kodo pavyzdyje:

 

 

<html>
<head>
<!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

<script type="text/javascript">
 $(document).ready(function(){

$('.bxslider').bxSlider({
 mode: 'fade',
 captions: true
});
 });
</script>

</head>

<body>

<ul class="bxslider">
 <li><img src="/images/pic1.jpg" /></li>
 <li><img src="/images/pic2.jpg" /></li>
 <li><img src="/images/pic3.jpg" /></li>
 <li><img src="/images/pic4.jpg" /></li>
</ul>

</body>
</html>

Redagavo Soulll
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
×
 Dalintis
Sekėjai 3
Eiti į temų sąrašą

  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

  • Prisijunk prie bendruomenės dabar!

    Uždarbis.lt nariai domisi verslo, IT ir asmeninio tobulėjimo temomis, kartu sprendžia problemas, dalinasi žiniomis ir idėjomis, sutinka būsimus verslo partnerius ir dalyvauja gyvuose susitikimuose.

    Užsiregistruok dabar ir galėsi:

    ✔️ Dalyvauti diskusijose;

    ✔️ Kurti naujas temas;

    ✔️ Rašyti atsakymus;

    ✔️ Vertinti kitų žmonių pranešimus;

    ✔️ Susisiekti su bet kuriuo nariu asmeniškai;

    ✔️ Naudotis tamsia dizaino versija;

    ir dar daugiau.

    Registracija trunka ~30 sek. ir yra visiškai nemokama.

  • Naujausios temos

  • Karštos temos

×
×
  • Pasirinkite naujai kuriamo turinio tipą...