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 251

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.

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