ਕੈਰੋਸਲ
ਤੱਤਾਂ ਦੁਆਰਾ ਸਾਈਕਲ ਚਲਾਉਣ ਲਈ ਇੱਕ ਸਲਾਈਡਸ਼ੋ ਭਾਗ — ਚਿੱਤਰ ਜਾਂ ਟੈਕਸਟ ਦੀਆਂ ਸਲਾਈਡਾਂ — ਜਿਵੇਂ ਇੱਕ ਕੈਰੋਜ਼ਲ।
ਕੈਰੋਜ਼ਲ ਸਮੱਗਰੀ ਦੀ ਇੱਕ ਲੜੀ ਰਾਹੀਂ ਸਾਈਕਲ ਚਲਾਉਣ ਲਈ ਇੱਕ ਸਲਾਈਡਸ਼ੋ ਹੈ, ਜੋ ਕਿ CSS 3D ਟ੍ਰਾਂਸਫਾਰਮ ਅਤੇ ਥੋੜ੍ਹੀ ਜਿਹੀ JavaScript ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ। ਇਹ ਚਿੱਤਰਾਂ, ਟੈਕਸਟ ਜਾਂ ਕਸਟਮ ਮਾਰਕਅੱਪ ਦੀ ਇੱਕ ਲੜੀ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ। ਇਸ ਵਿੱਚ ਪਿਛਲੇ/ਅਗਲੇ ਨਿਯੰਤਰਣਾਂ ਅਤੇ ਸੂਚਕਾਂ ਲਈ ਸਮਰਥਨ ਵੀ ਸ਼ਾਮਲ ਹੈ।
ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਜਿੱਥੇ ਪੇਜ ਵਿਜ਼ੀਬਿਲਟੀ API ਸਮਰਥਿਤ ਹੈ, ਕੈਰੋਜ਼ਲ ਸਲਾਈਡ ਹੋਣ ਤੋਂ ਬਚੇਗਾ ਜਦੋਂ ਵੈਬਪੇਜ ਉਪਭੋਗਤਾ ਨੂੰ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦਾ ਹੈ (ਜਿਵੇਂ ਕਿ ਜਦੋਂ ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ ਅਕਿਰਿਆਸ਼ੀਲ ਹੁੰਦੀ ਹੈ, ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਛੋਟੀ ਹੁੰਦੀ ਹੈ, ਆਦਿ)।
ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਰੱਖੋ ਕਿ ਨੇਸਟਡ ਕੈਰੋਜ਼ਲ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ, ਅਤੇ ਕੈਰੋਜ਼ਲ ਆਮ ਤੌਰ 'ਤੇ ਪਹੁੰਚਯੋਗਤਾ ਮਾਪਦੰਡਾਂ ਦੀ ਪਾਲਣਾ ਨਹੀਂ ਕਰਦੇ ਹਨ।
ਅੰਤ ਵਿੱਚ, ਜੇਕਰ ਤੁਸੀਂ ਸਰੋਤ ਤੋਂ ਸਾਡੀ JavaScript ਬਣਾ ਰਹੇ ਹੋ, ਤਾਂ ਇਸਦੀ ਲੋੜ ਹੈutil.js
।
ਕੈਰੋਜ਼ਲ ਸਲਾਈਡ ਮਾਪਾਂ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਸਧਾਰਣ ਨਹੀਂ ਕਰਦੇ ਹਨ। ਇਸ ਤਰ੍ਹਾਂ, ਤੁਹਾਨੂੰ ਸਮੱਗਰੀ ਨੂੰ ਸਹੀ ਆਕਾਰ ਦੇਣ ਲਈ ਵਾਧੂ ਉਪਯੋਗਤਾਵਾਂ ਜਾਂ ਕਸਟਮ ਸਟਾਈਲ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ। ਜਦੋਂ ਕਿ ਕੈਰੋਜ਼ਲ ਪਿਛਲੇ/ਅਗਲੇ ਨਿਯੰਤਰਣਾਂ ਅਤੇ ਸੂਚਕਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ, ਉਹਨਾਂ ਦੀ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਲੋੜ ਨਹੀਂ ਹੈ। ਜੋੜੋ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰੋ ਜਿਵੇਂ ਤੁਸੀਂ ਫਿੱਟ ਦੇਖਦੇ ਹੋ।
.active
ਕਲਾਸ ਨੂੰ ਇੱਕ ਸਲਾਈਡ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਨਹੀਂ ਤਾਂ ਕੈਰੋਸਲ ਦਿਖਾਈ ਨਹੀਂ ਦੇਵੇਗਾ। ਵਿਕਲਪਿਕ ਨਿਯੰਤਰਣਾਂ ਲਈ 'ਤੇ ਇੱਕ ਵਿਲੱਖਣ ਆਈਡੀ ਸੈਟ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ .carousel
, ਖਾਸ ਕਰਕੇ ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਪੰਨੇ 'ਤੇ ਇੱਕ ਤੋਂ ਵੱਧ ਕੈਰੋਸੇਲ ਵਰਤ ਰਹੇ ਹੋ। ਨਿਯੰਤਰਣ ਅਤੇ ਸੰਕੇਤਕ ਤੱਤਾਂ ਵਿੱਚ ਇੱਕ data-target
ਵਿਸ਼ੇਸ਼ਤਾ (ਜਾਂ href
ਲਿੰਕਾਂ ਲਈ) ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ ਜੋ .carousel
ਤੱਤ ਦੀ id ਨਾਲ ਮੇਲ ਖਾਂਦੀ ਹੈ।
ਇੱਥੇ ਸਿਰਫ਼ ਸਲਾਈਡਾਂ ਵਾਲਾ ਕੈਰੋਸਲ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਡਿਫੌਲਟ ਚਿੱਤਰ ਅਲਾਈਨਮੈਂਟ ਨੂੰ ਰੋਕਣ ਲਈ ਕੈਰੋਜ਼ਲ ਚਿੱਤਰਾਂ ਦੀ ਮੌਜੂਦਗੀ ਨੂੰ ਨੋਟ ਕਰੋ .d-block
।.w-100
ਪਿਛਲੇ ਅਤੇ ਅਗਲੇ ਨਿਯੰਤਰਣ ਵਿੱਚ ਜੋੜਨਾ:
ਤੁਸੀਂ ਨਿਯੰਤਰਣਾਂ ਦੇ ਨਾਲ, ਕੈਰੋਜ਼ਲ ਵਿੱਚ ਸੂਚਕਾਂ ਨੂੰ ਵੀ ਜੋੜ ਸਕਦੇ ਹੋ।
.carousel-caption
ਕਿਸੇ ਵੀ ਵਿੱਚ ਤੱਤ ਦੇ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਆਪਣੀਆਂ ਸਲਾਈਡਾਂ ਵਿੱਚ ਸੁਰਖੀਆਂ ਸ਼ਾਮਲ ਕਰੋ .carousel-item
। ਉਹਨਾਂ ਨੂੰ ਛੋਟੇ ਵਿਊਪੋਰਟਾਂ 'ਤੇ ਆਸਾਨੀ ਨਾਲ ਲੁਕਾਇਆ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਹੇਠਾਂ ਦਿਖਾਇਆ ਗਿਆ ਹੈ, ਵਿਕਲਪਿਕ ਡਿਸਪਲੇ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਨਾਲ । ਅਸੀਂ ਉਹਨਾਂ ਨੂੰ ਸ਼ੁਰੂ ਵਿੱਚ ਲੁਕਾਉਂਦੇ ਹਾਂ .d-none
ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਮੱਧਮ ਆਕਾਰ ਦੀਆਂ ਡਿਵਾਈਸਾਂ 'ਤੇ ਵਾਪਸ ਲਿਆਉਂਦੇ ਹਾਂ .d-md-block
।
.carousel-fade
ਸਲਾਈਡ ਦੀ ਬਜਾਏ ਫੇਡ ਟ੍ਰਾਂਜਿਸ਼ਨ ਨਾਲ ਸਲਾਈਡਾਂ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ ਆਪਣੇ ਕੈਰੋਜ਼ਲ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ।
ਕੈਰੋਜ਼ਲ ਦੀ ਸਥਿਤੀ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਕੰਟਰੋਲ ਕਰਨ ਲਈ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। data-slide
ਕੀਵਰਡਸ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ prev
ਜਾਂ next
, ਜੋ ਇਸਦੀ ਮੌਜੂਦਾ ਸਥਿਤੀ ਦੇ ਅਨੁਸਾਰ ਸਲਾਈਡ ਸਥਿਤੀ ਨੂੰ ਬਦਲਦਾ ਹੈ। ਵਿਕਲਪਕ ਤੌਰ 'ਤੇ, data-slide-to
ਇੱਕ ਕੱਚੀ ਸਲਾਈਡ ਸੂਚਕਾਂਕ ਨੂੰ ਕੈਰੋਜ਼ਲ ਨੂੰ ਪਾਸ ਕਰਨ ਲਈ ਵਰਤੋ data-slide-to="2"
, ਜੋ ਸਲਾਈਡ ਸਥਿਤੀ ਨੂੰ ਨਾਲ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਇੱਕ ਖਾਸ ਸੂਚਕਾਂਕ ਵਿੱਚ ਬਦਲਦਾ ਹੈ 0
।
ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ data-ride="carousel"
ਵਰਤੋਂ ਪੰਨੇ ਦੇ ਲੋਡ ਤੋਂ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਕੈਰੋਜ਼ਲ ਨੂੰ ਐਨੀਮੇਟ ਕਰਨ ਲਈ ਚਿੰਨ੍ਹਿਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਉਸੇ ਕੈਰੋਜ਼ਲ ਦੇ (ਬੇਲੋੜੀ ਅਤੇ ਬੇਲੋੜੀ) ਸਪੱਸ਼ਟ JavaScript ਸ਼ੁਰੂਆਤ ਦੇ ਨਾਲ ਨਹੀਂ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।
ਕੈਰੋਸੇਲ ਨੂੰ ਇਸ ਨਾਲ ਹੱਥੀਂ ਕਾਲ ਕਰੋ:
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-
, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-interval=""
।
ਨਾਮ | ਟਾਈਪ ਕਰੋ | ਡਿਫਾਲਟ | ਵਰਣਨ |
---|---|---|---|
ਅੰਤਰਾਲ | ਗਿਣਤੀ | 5000 | ਕਿਸੇ ਆਈਟਮ ਨੂੰ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਸਾਈਕਲ ਚਲਾਉਣ ਦੇ ਵਿਚਕਾਰ ਦੇਰੀ ਲਈ ਸਮੇਂ ਦੀ ਮਾਤਰਾ। ਜੇਕਰ ਗਲਤ ਹੈ, ਤਾਂ ਕੈਰੋਸਲ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਚੱਕਰ ਨਹੀਂ ਲਵੇਗਾ। |
ਕੀਬੋਰਡ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਕੀ ਕੈਰੋਜ਼ਲ ਨੂੰ ਕੀਬੋਰਡ ਇਵੈਂਟਾਂ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। |
ਵਿਰਾਮ | ਸਤਰ | ਬੁਲੀਅਨ | "ਹੋਵਰ" | ਜੇਕਰ ਇਸ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ ਟਚ-ਸਮਰੱਥ ਡਿਵਾਈਸਾਂ 'ਤੇ, ਜਦੋਂ 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ , ਤਾਂ |
ਸਵਾਰੀ | ਸਤਰ | ਝੂਠਾ | ਉਪਭੋਗਤਾ ਦੁਆਰਾ ਪਹਿਲੀ ਆਈਟਮ ਨੂੰ ਹੱਥੀਂ ਚੱਕਰ ਲਗਾਉਣ ਤੋਂ ਬਾਅਦ ਕੈਰੋਜ਼ਲ ਨੂੰ ਆਟੋਪਲੇ ਕਰਦਾ ਹੈ। ਜੇਕਰ "ਕੈਰੋਜ਼ਲ", ਲੋਡ ਹੋਣ 'ਤੇ ਕੈਰੋਜ਼ਲ ਨੂੰ ਆਟੋਪਲੇ ਕਰਦਾ ਹੈ। |
ਸਮੇਟਣਾ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਕੀ ਕੈਰੋਜ਼ਲ ਨੂੰ ਲਗਾਤਾਰ ਸਾਈਕਲ ਚਲਾਉਣਾ ਚਾਹੀਦਾ ਹੈ ਜਾਂ ਸਖ਼ਤ ਸਟਾਪਾਂ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ। |
ਅਸਿੰਕ੍ਰੋਨਸ ਵਿਧੀਆਂ ਅਤੇ ਪਰਿਵਰਤਨ
ਸਾਰੀਆਂ API ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ ।
ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪਾਂ ਨਾਲ ਕੈਰੋਜ਼ਲ ਨੂੰ object
ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ ਅਤੇ ਆਈਟਮਾਂ ਰਾਹੀਂ ਸਾਈਕਲ ਚਲਾਉਣਾ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ।
ਖੱਬੇ ਤੋਂ ਸੱਜੇ ਕੈਰੋਜ਼ਲ ਆਈਟਮਾਂ ਰਾਹੀਂ ਚੱਕਰ।
ਕੈਰੋਜ਼ਲ ਨੂੰ ਆਈਟਮਾਂ ਰਾਹੀਂ ਸਾਈਕਲ ਚਲਾਉਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।
ਕੈਰੋਸਲ ਨੂੰ ਕਿਸੇ ਖਾਸ ਫ੍ਰੇਮ (0 ਅਧਾਰਤ, ਇੱਕ ਐਰੇ ਦੇ ਸਮਾਨ) ਵਿੱਚ ਚੱਕਰ ਲਗਾਓ। ਟਾਰਗੇਟ ਆਈਟਮ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆ ਜਾਂਦਾ ਹੈ (ਭਾਵ slid.bs.carousel
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
ਪਿਛਲੀ ਆਈਟਮ ਲਈ ਚੱਕਰ। ਪਿਛਲੀ ਆਈਟਮ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ slid.bs.carousel
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
ਅਗਲੀ ਆਈਟਮ 'ਤੇ ਚੱਕਰ ਲਗਾਓ। ਅਗਲੀ ਆਈਟਮ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਆਉਂਦੀ ਹੈ (ਭਾਵ slid.bs.carousel
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)।
ਕਿਸੇ ਤੱਤ ਦੇ ਕੈਰੋਸਲ ਨੂੰ ਨਸ਼ਟ ਕਰਦਾ ਹੈ।
ਬੂਟਸਟਰੈਪ ਦੀ ਕੈਰੋਜ਼ਲ ਕਲਾਸ ਕੈਰੋਜ਼ਲ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਜੋੜਨ ਲਈ ਦੋ ਘਟਨਾਵਾਂ ਦਾ ਪਰਦਾਫਾਸ਼ ਕਰਦੀ ਹੈ। ਦੋਵਾਂ ਘਟਨਾਵਾਂ ਦੀਆਂ ਹੇਠ ਲਿਖੀਆਂ ਵਾਧੂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ:
direction
: ਉਹ ਦਿਸ਼ਾ ਜਿਸ ਵਿੱਚ ਕੈਰੋਜ਼ਲ ਖਿਸਕ ਰਿਹਾ ਹੈ (ਜਾਂ"left"
ਜਾਂ"right"
)।relatedTarget
: DOM ਤੱਤ ਜੋ ਕਿਰਿਆਸ਼ੀਲ ਆਈਟਮ ਦੇ ਤੌਰ 'ਤੇ ਥਾਂ 'ਤੇ ਖਿਸਕਿਆ ਜਾ ਰਿਹਾ ਹੈ।from
: ਮੌਜੂਦਾ ਆਈਟਮ ਦਾ ਸੂਚਕਾਂਕto
: ਅਗਲੀ ਆਈਟਮ ਦਾ ਸੂਚਕਾਂਕ
ਕੈਰੋਜ਼ਲ ਦੀਆਂ ਸਾਰੀਆਂ ਘਟਨਾਵਾਂ ਕੈਰੋਜ਼ਲ 'ਤੇ ਹੀ ਫਾਇਰ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ (ਭਾਵ 'ਤੇ <div class="carousel">
)।
ਘਟਨਾ ਦੀ ਕਿਸਮ | ਵਰਣਨ |
---|---|
slide.bs.carousel | ਇਹ ਇਵੈਂਟ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦਾ ਹੈ ਜਦੋਂ slide ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
slid.bs.carousel | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਕੈਰੋਜ਼ਲ ਆਪਣੀ ਸਲਾਈਡ ਤਬਦੀਲੀ ਨੂੰ ਪੂਰਾ ਕਰ ਲੈਂਦਾ ਹੈ। |
ਜੇਕਰ ਤੁਸੀਂ ਕੰਪਾਇਲ ਕੀਤੇ CSS ਦੀ ਵਰਤੋਂ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਕੰਪਾਇਲ ਕਰਨ ਜਾਂ ਕਸਟਮ ਸਟਾਈਲ ਤੋਂ ਪਹਿਲਾਂ Sass ਵੇਰੀਏਬਲ ਨਾਲ .carousel-item
ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ । $carousel-transition
ਜੇਕਰ ਮਲਟੀਪਲ ਪਰਿਵਰਤਨ ਲਾਗੂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਤਾਂ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਟਰਾਂਸਫਾਰਮ ਪਰਿਵਰਤਨ ਪਹਿਲਾਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ (ਉਦਾਹਰਨ ਲਈ transition: transform 2s ease, opacity .5s ease-out
)।