Jei ieškote paprasto slankiklio, kurį lengva integruoti į savo internetinius projektus, StuSlider gali būti tinkama sprendimą. Sukeitys aukščiau, StuSlider yra nemokama ir atvirųjų duomenų JavaScript slaidėlio biblioteka, leidžianti sukurti glaudžias animacijas su mažais kodo apdovandomis.
Ką yra StuSlider?
StuSlider yra JavaScript biblioteka, kuria galite lengvai sukurti savo slaidėlius. Skirtingai nuo kitų sudėtingesnių bibliotekų, StuSlider atskiriasi savaime dėmesingu lygiu ir efektyvu. Jis veikia be jokios išorinės frameworkų, tokų kaip jQuery ar kt., todėl yra idealus tiems, kurie nori užtikrinti savo kodą šviežią ir greitą.
Pagrindiniai savybės
- Lengva naudojimo: StuSlider įdiegimas yra greitas ir lengvas. Jums reikia tik įkelti JavaScript failą į savo HTML projektą.
- Be priklausomųjų: Nereikia įdiegti papildomų bibliotekų. Viskas, ką jums reikia, yra StuSlider JavaScript failas.
- Kūrimas pagal poreikius: Beje, nors StuSlider yra paprastas, jis taip pat yra labai kūrimo pagal poreikius. Galite nustatyti parametrus, kad būtų pasitvirtinti į savo poreikius, tokius kaip perjungimo greitis, animacijos efektai ir daugiau.
- Optimalios performansės: Šis slaidėlis yra sukurtas, kad būtų svoris, garantavęs gerą performansę visose įrenginioje.
Kaip naudoti StuSlider savo internetiniams projektams?
1. Atsiuntimas ir įdiegimas
Galite atsisiųsti failą stuslider.js tiesiogiai iš StuSlider GitHub režisoro arba įdiegti jį naudojant npm, jei naudote paketų tvarkyklę.
Štai pavyzdys paprasto integruoto StuSlider į savo HTML failą:
<script type="module"> |
import { StuSlider } from './stuslider.js'; |
</script> |
Jei norite įdiegti naudojant npm, galite naudoti šią komandą, kad sukurtumėte savo projektą:
npm run build` | |
2. Sukurkite pirmąjį slidery
Priešingu atsiuntimui į jūsų projektą, galite pradėti sukurti paprastą sliderį.Štai pavyzdys pagrindinio StuSlider naudojimo savo HTML puslapyje:
<div class="stu-slider"> |
<div class="stu-slide">Slide 1</div> |
<div class="stu-slide">Slide 2</div> |
<div class="stu-slide">Slide 3</div> |
</div> |
|
<script> |
const slider = new StuSlider('.stu-slider'); |
slider.start(); |
</script> |
Tai sukurs paprasta slidery, kur kiekvienas div atitinka jūsų sliderio elementą ir bus rodomas su animacijomis.
3. Sliderio personalizavimas
StuSlider leidžia jums personalizuoti daugybę slidery aspektų, kad geriau atitiktų jūsų dizainą. Galite nustatyti parametrus kaip:
- Perjungimo greitis : Greitis, su kuriais slaidai juda.
- Animacijos efektai : Pasirinkite efektus, tokius kaip apvaizdavimą arba sudėtingesnes perjungimo veiksmus.
- Navigacija : Pridėkite navigacinę žymeklį ar nuotakas, kad vartotojai gautų lengvą kelionę tarp slaidų.
Štai pavyzdžiai, kokių galima pasiekti:
https://steform.github.io/StuSlider/demo/demo.html
4. Licencija ir bendradarbiavimas
StuSlider yra skelbiamas pagal licenciją AGPL-3.0 (Affero General Public License versija 3), kuri leidžia visiems vartotojams jį naudoti ir modifikuoti be mokesčių. Taip pat šios licencijos turi kelias svarbias sąlygas:
- Naudojimas ir keitimasis : Galite naudotis, modifikuoti ir skleisti kodo rinkmeną, tik jei visos pakeistos dalys bus taip pat publikuojamos pagal šią licenciją, jeigu jos bus skleidžiamos arba naudojamos serverioje, kuris yra prieinamas kitoms asmenims.
- Keitimų pasidalinimas : Jei padarysite keitimus ir jų paskelbsite kitoje šaltiniuose (pvz., serverio), turėtumėte visą modifikuotą kodą publikuoti viešai.
- Komercinis naudojimas : Galite naudoti StuSlider komerciniais projektuose, tačiau turite laikytis licencijos sąlygų ir skleisti modifikuotą kodą, jeigu jį pakeitėte.
Jei turišite pažangų ar sugalvotus pasiūlymus, prašome prisidėti prie projekto GitHub dešto, tik laikydami licencijos sąlygas.
Komentarai
Kol kas nėra patvirtintų komentarų.
Prisijunkite su komentuotojo paskyra, kad galėtumėte komentuoti. Prisijungti.