JQuery ಗ್ರಂಥಾಲಯದ: ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ ಸ್ಲೈಡರ್ಗಳನ್ನು

ಸಮಯ ಕಳೆದಂತೆ ಮತ್ತು ವೆಬ್ ವಿನ್ಯಾಸ ಕ್ಷೇತ್ರದಲ್ಲಿ ಬದಲಾವಣೆ ಮತ್ತು ಅಗತ್ಯಗಳನ್ನು / ವಿಷಯ ಸೈಟ್ಗಳಿಗೆ ಬಳಕೆದಾರರ ಅಗತ್ಯಗಳನ್ನು ಮಾಡಲಾಗುತ್ತದೆ ತಂತ್ರಜ್ಞಾನ ಅಭಿವೃದ್ಧಿ. ಇದು ಹೆಚ್ಚಾಗಿ ವಿಷಯಾಧಾರಿತ ಚಿತ್ರಗಳನ್ನು ಒಂದು ಸಣ್ಣ ಸಂಖ್ಯೆಯ ಪಠ್ಯ ವಿಷಯ ಈ ಹಿಂದೆ, ಇಂದು ಇದು ಗ್ರಾಫಿಕ್ ಪ್ರಬಲ ಅಂಶವಾಗಿದೆ. ನೀವು ಬೇಗನೆ ಅತ್ಯಂತ ಅಗತ್ಯ ಮತ್ತು ಉಪಯುಕ್ತ ಮಾಹಿತಿ ಪಡೆಯಲು, ಮತ್ತು ದೀರ್ಘ ಪಠ್ಯಗಳನ್ನು ಓದುವ ಸಮಯ ವ್ಯರ್ಥ ಮಾಡಬೇಡಿ ಅನುಮತಿಸುತ್ತದೆ. ವಾಸ್ತವವಾಗಿ ಈ ಹೆಚ್ಚು ಜನಪ್ರಿಯ ಮತ್ತು, ಸಂಬಂಧಿಸಿದಂತೆ, ಒಂದು ವೆಬ್ ಪುಟದ ಇದೊಂದು ಅತ್ಯಗತ್ಯ ಅಂಶವಾಗಿರುತ್ತದೆ ಸ್ಲೈಡರ್ಗಳನ್ನು ಇವೆ. ಚಿತ್ರಗಳನ್ನು ಲಿಂಕ್ಗಳನ್ನು - ಅವರು ಅವುಗಳಲ್ಲಿ ವಿಷಯ ಬದಲಾಗುವ ಅಂಶಗಳಾಗಿವೆ. JQuery ಗ್ರಂಥಾಲಯದ ಬಳಸಿಕೊಂಡು - ಒಂದು ನಿರ್ದಿಷ್ಟ ವೆಬ್ ವಸ್ತು ಸೇರಿಸಲು ಆಧುನಿಕ ರೀತಿಯಲ್ಲಿ. ಈ ಉಪಕರಣವನ್ನು ರಚಿಸಲಾಗಿದೆ ಸ್ಲೈಡರ್ಗಳನ್ನು, ಬಳಸಲು ಸುಲಭ, ಒಂದು ಆರಾಮದಾಯಕ ಪಡೆಯಲು, ಮತ್ತು ಬಹಳ ಪ್ರಭಾವಶಾಲಿ ಕಾಣುತ್ತದೆ. ಮುಂದೆ ನಾವು ತಮ್ಮ ವೆಬ್ ಪುಟಗಳ ಈ ಘಟಕಗಳನ್ನು ಮಾಡುವ ಹೇಗೆ ನೋಡೋಣ. ಪ್ರಮಾಣೀಕೃತ ಸಾಧನಗಳನ್ನು ಸಾಕಷ್ಟು ದೊಡ್ಡ ಧನ್ಯವಾದಗಳು, JQuery ಸ್ಲೈಡರ್ ಮಾದರಿಯ ಮತ್ತು ವೈವಿಧ್ಯಮಯ ವಿಷಯ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸಾಧ್ಯ.

ಒಂದು ವೆಬ್ ಪುಟದಲ್ಲಿ ಒಂದು ಸ್ಲೈಡರ್ ಸೇರಿಸಲು?

ಒಂದು ಸ್ಲೈಡ್ ಬ್ಲಾಕ್ಗಳನ್ನು ಸೇರಿಸಲು ವೇಸ್ ಪುಟಕ್ಕೆ ಸಂಖ್ಯೆ. ಆಗಾಗ್ಗೆ ಎಚ್ಟಿಎಮ್ಎಲ್ ಕೋಡ್ ಬರೆಯಲು ಮತ್ತು ಸ್ಕ್ರಿಪ್ಟ್ ಬಗ್ಗೆ ಒಳಹೊಕ್ಕು ಪರಿಶೀಲಿಸುವ ಹೊಂದಿಲ್ಲ. ಉಚಿತ ಗ್ರಂಥಾಲಯಗಳು ಗಣನೀಯ ಸಂಖ್ಯೆಯ ಬಳಕೆದಾರರು ನಿಮ್ಮ ಸೈಟ್ನಲ್ಲಿ jQuery-ಸ್ಲೈಡರ್ಗಳನ್ನು ಸೇರಿಸೋಣ ಒಂದು ಸಿದ್ಧ ಉಡುಪುಗಳು ಟೆಂಪ್ಲೆಟ್ಗಳನ್ನು ನೀಡುತ್ತಿರುವ, ಇಲ್ಲ. ನೀವು ಮಾಡಬೇಕು ಎಲ್ಲಾ - ನಿಮ್ಮ ವೆಬ್ ಪುಟದ ಮೂಲ ಕೋಡ್ ನಕಲಿಸಿ ಮತ್ತು ಫಲಿತಾಂಶಗಳು ಆನಂದಿಸಲು ಹೊಂದಿದೆ. ಆದಾಗ್ಯೂ, ಈ ಸಂದರ್ಭದಲ್ಲಿ ನಿಮ್ಮ ಸೃಜನಶೀಲ ಕಲ್ಪನೆಯ ಸಾಕ್ಷಾತ್ಕಾರ ಸಾಧ್ಯತೆಯನ್ನು ಸೀಮಿತವಾಗಿದೆ. ಆದ್ದರಿಂದ, ಇದು ಸ್ವತಂತ್ರವಾಗಿ ವಿನ್ಯಾಸ ಅಂಶ ರಚಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ ಸಹಕಾರಿಯಾಗಿದೆ. ಇದನ್ನು ಮಾಡಲು, ನೀವು jQuery ಸರಳ ಸ್ಲೈಡರ್ ಜಾರಿಗೆ ಹೇಗೆ ತಿಳಿಯಲು ಅಗತ್ಯವಿದೆ, ಮತ್ತು ಕೇವಲ, ಇದು ಸಂಕೀರ್ಣಗೊಳಿಸೀತು ನೀವು ಯಾವಾಗಲೂ ಕೋಡ್ ಹೆಚ್ಚುವರಿ ಶಗಳನ್ನು ಮಾಡಬಹುದು.

HTML ಕೋಡ್: ನಿಮ್ಮ ಮೂಲಕ ಒಂದು ಸ್ಲೈಡರ್ ರಚಿಸಿ

ಮೊದಲ, ಅಲ್ಲಿ ಆರಂಭಿಸಲು - ಸ್ಲೈಡರ್ ಭವಿಷ್ಯದ ಲೇಔಟ್ ನೊಂದಣಿ ಆಗಿದೆ.

1. ನಮ್ಮ ಸ್ಲೈಡ್ಗಳು ಎಲ್ಲಾ ಒಳಗೊಂಡಿರುವಂತಹ ಎಚ್ಟಿಎಮ್ಎಲ್-ಫೈಲ್ ಸ್ಲೈಡ್ಶೋ ಘಟಕ, (ಚಿತ್ರಗಳು, ಇತ್ಯಾದಿ) ರಲ್ಲಿ ಸ್ಥಾಪಿಸಲಾಯಿತು.
2. ಇದು ಉಲ್ ಪಟ್ಟಿ ಬೇರೂರಿದ ಪ್ರತಿಯೊಂದು ಪ್ಯಾರಾಗ್ರಾಫ್ ಪ್ರತ್ಯೇಕ ಸ್ಲೈಡ್ ಸಂಗ್ರಹಿಸುತ್ತದೆ.

ನಾವು ಸಿಎಸ್ಎಸ್ ಜೊತೆ ಕೆಲಸ

ನಂತರ ನಾವು ಸಿಎಸ್ಎಸ್-ಡಾಕ್ಯುಮೆಂಟ್ ಬಳಸಿಕೊಂಡು ಬಯಸಿದ ಶೈಲಿಯ ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಇದಕ್ಕೆ ಅನ್ವಯಿಸುವುದಿಲ್ಲ. ಇದು ಸರಿಯಾಗಿ ಕೆಲಸ ನಮ್ಮ ವಿಷಯ JQuery ಸ್ಲೈಡರ್ ವಿಧಿಸಲು ಅಗತ್ಯ ಮತ್ತು ಬಲ ನೋಟ ಹೊಂದಿತ್ತು. ಈ ಹಂತದಲ್ಲಿ, ನಾವು ಕೆಳಗಿನ ಕಾರ್ಯಗಳನ್ನು,:

• ಸ್ಲೈಡ್ಶೋ ಘಟಕದಲ್ಲಿ ಸರಿಯಾದ ಸ್ಲೈಡ್ (ಅಥವಾ ಚಿತ್ರವನ್ನು ವಿಷಯ) ನಲ್ಲಿ, ಒಂದೇ ಪ್ರದರ್ಶಿಸುತ್ತದೆ, ಮತ್ತು ಉಳಿದ ಮರೆಮಾಡಲಾಗಿದೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ;
• ಸ್ಲೈಡ್ಗಳು ಇತರ (ಎಡದಿಂದ ಬಲಕ್ಕೆ) ನಂತರ ಒಂದು ವ್ಯವಸ್ಥೆ;
• ಚಲಿಸಬಲ್ಲ (ಎಡ ಮತ್ತು ಬಲ) ಸ್ಲೈಡ್ಗಳು ಸಂಗ್ರಹಿಸುತ್ತದೆ ಉಲ್ ಧಾರಕ, ಹಾಗೆ.

ಇದನ್ನು ಮಾಡಲು, ಸಿಎಸ್ಎಸ್-ಕಡತದಲ್ಲಿ ಈ ಕೆಳಗಿನ ಆಯ್ಕೆಗಳನ್ನು ಸೆಟ್:

• ಸ್ಲೈಡ್ಶೋ ಫಾರ್: ಸ್ಥಳಾಂತರವನ್ನು-ಎಕ್ಸ್ - ಸ್ಥಳಾಂತರವನ್ನು-ವೈ ಸ್ಕ್ರಾಲ್, - ಗುಪ್ತ:
• ಉಲ್ ಫಾರ್: ಫ್ಲೋಟ್ - ಉಳಿದಿದೆ.

ನೀವು (ಅಗಲ), ಎತ್ತರ (ಎತ್ತರ), ಹಿನ್ನೆಲೆ (ಹಿನ್ನೆಲೆ) ಅಗಲ ನಿಯತಾಂಕಗಳನ್ನು ಇತ್ಯಾದಿ ಹೊಂದಿಸಬಹುದು.

ಉದಾಹರಣೆಗೆ JQuery ಈ ಕೋಡ್ ಪುಟ್

HTML ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಎಲ್ಲಾ ಅಗತ್ಯ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡಲಾಗಿದೆ. ಇದು ಕೆಳಗಿನ ನಿಯತಾಂಕಗಳನ್ನು ಇರಬೇಕು ಇದು jQuery ಕೋಡ್, ಸ್ಲೈಡರ್ಗಳನ್ನು, ವಿಚಾರದಲ್ಲಿ ಉಳಿದಿದೆ:

• ಸ್ಲೈಡ್ಗಳು ಒಂದು ನಿರ್ದಿಷ್ಟ ಕಾಲಾವಧಿಯಲ್ಲಿ ಪರಸ್ಪರ ಯಶಸ್ವಿಯಾಗಲು ಮಾಡಬೇಕು;
• ನೀವು ಹೋವರ್ ಮಾಡಿದಾಗ ಮೇಲೆ ಮೌಸ್ ಪಾಯಿಂಟರ್ ತಮ್ಮ ಚಳುವಳಿ ನಿಂತುಹೋದರೂ.

(ನಿರ್ಧರಿಸುತ್ತದೆ ಸ್ಲೈಡ್ ಶೋ ಅವಧಿಯ) slidewidth ಮತ್ತು slidertime (ಸ್ಲೈಡ್ ಉದ್ದಕ್ಕೆ ಸಮನಾಗಿರುವುದು): ಇದನ್ನು ಮಾಡಲು, ನಾವು ಎರಡು ಅಸ್ಥಿರಗಳು ಘೋಷಿಸಿದ. ಪುಟದ ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ತಾಣವಾಗಿದೆ ಟೈಮರ್ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. ಈ ನಿಯತಾಂಕ ನಾವು ಮೌಸ್ ಪಾಯಿಂಟರ್ ಕ್ರಿಯೆಯನ್ನು ಟೈ ಸ್ಲೈಡ್ (ಸ್ಲೈಡ್ ಶೋ ನಿಲ್ಲಿಸುತ್ತದೆ) ಅಲ್ಲ.

ಉಲ್ ಧಾರಕ ಉದ್ದ ಶಿಫಾರಸು ಮರೆಯದಿರಿ. ಇದು ಸ್ಲೈಡ್ಗಳು ಸಂಖ್ಯೆ, ಪ್ರತಿ ಸ್ಲೈಡ್ ಉದ್ದ ಸಮಾನವಾಗಿರುವ ಇರುತ್ತದೆ.

ಸ್ಲೈಡ್ಗಳು ಬದಲಾಯಿಸುವ ಹೊಣೆ ಕಾರ್ಯವನ್ನು ಸೇರಿಸಿ. ನೀವು ನಿಮ್ಮ ಸ್ಲೈಡರ್ ಪ್ರದರ್ಶನ ಪರೀಕ್ಷಿಸಬಹುದು, ಅಷ್ಟೆ.

ತೀರ್ಮಾನಕ್ಕೆ

ಈ ಲೇಖನದಲ್ಲಿ ನಾವು ತನ್ನ ವೆಬ್ಸೈಟ್ ಒಂದು ಪುಟ ಸೇರಿಸಲು ತಮ್ಮ jQuery-ಸ್ಲೈಡರ್ಗಳನ್ನು ರಚಿಸಲು ಹೇಗೆ ನೋಡಿದ್ದಾರೆ. ಸರಳ ಜಾರುವ ಉದಾಹರಣೆಯನ್ನು ಬಳಸಿ, ನೀವು ಅದನ್ನು ತಮ್ಮ ಅರ್ಥವಿವರಣೆ, ಮೂಲ ಕೋಡ್ ಸೂಕ್ತ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡುವ ಬರಬಹುದು. ಈ ವಿನ್ಯಾಸವನ್ನು ಅಭಿವೃದ್ಧಿಗೊಳಿಸುವಲ್ಲಿ ಪ್ರವಾಸಿಗರಿಗೆ ನಿಮ್ಮ ಸೈಟ್ನ ಬಳಕೆಯು ಹೆಚ್ಚು ಅನುಕೂಲಕರ ಮಾಡುತ್ತದೆ.