μ μΆν©λλ€...
νμ¬ νλμ 무μμ λκΉ?
μ΄λ€ μ΄μ λ‘ indexChanged λ©μλκ° μ λλ‘ μλνμ§ μλ κ²μΌλ‘ λνλ¬μ΅λλ€. κ°λμ λ§μ§λ§ μΈλ±μ€λ₯Ό λλ €μ£Όλλ° μΊλ¬μ μ 보면 λμ΄ μλλλ€. κ·Έ λλ¬Έμ moveRight λ©μλκ° λ μ΄μ μλνμ§ μλλ€κ³ κ°μ ν©λλ€(λ§μ§λ§ μΈλ±μ€μ λλ¬ν¨).
indexChanged λ©μλλ₯Ό νΈμΆνμ¬ μ΄λ₯Ό μ¬ννκ³ μ€μ μΈλ±μ€μ (μκ°μ μΌλ‘) λΉκ΅ν μ μμ΄μΌ ν©λλ€.
μμλλ λμμ 무μμ
λκΉ?
μ¬λ°λ₯Έ μΈλ±μ€λ₯Ό μ»μ κ²μΌλ‘ μμνμ§λ§ μ΄λ€ μ΄μ λ‘ μ¬μ© μ§μ μμ μΈλ±μ€κ° λ§μ§λ§ μΈλ±μ€λ‘ μ ννκ³ μμ΅λλ€.
νλμ λ°κΎΈλ λκΈ°/μ¬μ© μ¬λ‘λ 무μμ
λκΉ?
μ΄λ₯Ό λλ²κΉ
νλ©΄ MoveRight/MoveLeft λ©μλλ₯Ό λ€μ μ¬μ©ν μ μμ΅λλ€.
κ·νμ νκ²½μ λν΄ μλ €μ£Όμμμ€.
@Andi1990λ , λ°λͺ¨ μ ν리μΌμ΄μ μΊλ¬μ μμ λ¬Έμ λ₯Ό μ¬νν μ μμ΅λκΉ? λ§μ§λ§ μΈλ±μ€ λ¬Έμ λ₯Ό μ¬νν μ μλ κ² κ°μ΅λλ€.
λ°λͺ¨ λ§ν¬κ° μ£½μμ΅λλ€. λ°μ΄μ¬λ¦°μ΄λ κΈ°νκ° μμ΅λκΉ?
κ·Έλ¬λ κ·Έ μ΄μ λ λλκ·Έ μ€ν¬λ‘€ 컨ν
μ΄λμ μλ img λμ divκ° μκΈ° λλ¬ΈμΌ μ μμ΅λλ€.
λ€μμ μ¬μ©νμ¬ λ°λͺ¨λ₯Ό μ€νν μ μμ΅λλ€.
$ git clone [email protected]:bfwg/ngx-drag-scroll.git
$ cd ngx-drag-scroll
$ npm install
$ npm start
https://github.com/bfwg/ngx-drag-scroll.git μ 볡μ νμ¬ λ°λͺ¨λ₯Ό μ€ννλλ° μλνμ΅λλ€. κ°μ¬ν©λλ€.
λ¬Έμ λ₯Ό μ¬νν μ μμ΅λλ€.
μ€λ₯Έμͺ½μΌλ‘ μ΄λ λ²νΌμ μ¬λ¬ λ² ν΄λ¦νλ©΄ λ€μ μ½μ μΆλ ₯μ΄ μμ±λ©λλ€.
Angularκ° κ°λ° λͺ¨λμμ μ€ν μ€μ
λλ€. enableProdMode()λ₯Ό νΈμΆνμ¬ νλ‘λμ
λͺ¨λλ₯Ό νμ±νν©λλ€.
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 1λ‘ λ³κ²½λ¨
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 0μΌλ‘ λ³κ²½λ¨
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 1λ‘ λ³κ²½λ¨
home.component.ts:92 μ€λ
μ λλ©μ΄μ
μλ£
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 2λ‘ λ³κ²½λ¨
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 1λ‘ λ³κ²½λ¨
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 2λ‘ λ³κ²½λ¨
home.component.ts:92 μ€λ
μ λλ©μ΄μ
μλ£
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 3μΌλ‘ λ³κ²½λ¨
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 2λ‘ λ³κ²½λ¨
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 3μΌλ‘ λ³κ²½λ¨
home.component.ts:92 μ€λ
μ λλ©μ΄μ
μλ£
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 4λ‘ λ³κ²½λ¨
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 3μΌλ‘ λ³κ²½λ¨
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 4λ‘ λ³κ²½λ¨
home.component.ts:92 μ€λ
μ λλ©μ΄μ
μλ£
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 5λ‘ λ³κ²½λ¨
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 4λ‘ λ³κ²½λ¨
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 5λ‘ λ³κ²½λ¨
home.component.ts:92 μ€λ
μ λλ©μ΄μ
μλ£
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 6μΌλ‘ λ³κ²½λ¨
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 5λ‘ λ³κ²½λ¨
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 6μΌλ‘ λ³κ²½λ¨
home.component.ts:92 μ€λ
μ λλ©μ΄μ
μλ£
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 7λ‘ λ³κ²½λ¨
home.component.ts:92 μ€λ
μ λλ©μ΄μ
μλ£
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 8λ‘ λ³κ²½λ¨
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 9λ‘ λ³κ²½λ¨
home.component.ts:92 μ€λ
μ λλ©μ΄μ
μλ£
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 8λ‘ λ³κ²½λ¨
ngx-drag-scroll.ts:113 μΈλ±μ€κ° 9λ‘ λ³κ²½λ¨
home.component.ts:92 μ€λ
μ λλ©μ΄μ
μλ£
ngx-drag-scroll.tsμμ μ½μ μΆλ ₯μ ν μ€μ μΆκ°νμ΅λλ€.
currIndex(κ°) μ€μ {
if (κ° !== this._index) {
this._index = κ°;
this.indexChanged.emit(κ°);
console.log('μΈλ±μ€κ° ' + this._indexλ‘ λ³κ²½λ¨);
}
}
λ°λΌμ λ κ°μ§ λ¬Έμ κ° μμ΅λλ€.
2.0.0-beta.7μ μ¬μ©ν΄ 보μμμ€. λ€μ μ΄μ΄μΌ νλ κ²½μ° μλ €μ£ΌμΈμ. μ κ³ ν΄ μ£Όμ μ κ°μ¬ν©λλ€!
λΆννλ λ¬Έμ λ μ¬μ ν μ‘΄μ¬ν©λλ€. λ€μ μ¬μμμ€.
[email protected]λ‘ λ°λͺ¨λ₯Ό μλνλλ° μΈλ±μ€ 6μμ μΈλ±μ€ 10κΉμ§ μμ§μμ΄ μλνμ§ μλ κ²μΌλ‘ λνλ¬μ΅λλ€. "μ€λ₯Έμͺ½" λ²νΌμ λλ₯΄λ©΄ μ΄λ―Έμ§κ° μ¬μ ν μΌμͺ½μΌλ‘ μ΄λν κ²μΌλ‘ μμν©λλ€.
λ¬Έμ λ λ§μ§λ§ μ΄λ―Έμ§(μΈλ±μ€)λ₯Ό μ νν κ²½μ°μλ§ λ°μνλ κ²μΌλ‘ λνλ¬μ΅λλ€. κ·Έλ° λ€μ μ΄μ μ΄λ―Έμ§λ‘ μ΄λ(μ€ν¬λ‘€ λλ λ²νΌ μ¬μ©)νλ©΄ νμμ΄ μ λλ‘ μλνμ§λ§ _indexChanged()_ ν¨μκ° λ³κ²½λ μΈλ±μ€λ₯Ό μΈμνμ§ λͺ»νκ±°λ λ§μ§λ§ μΈλ±μ€λ‘ λ€μ μλͺ» μ νλ©λλ€.
λ§μ§λ§ μ΄λ―Έμ§μμ μ΄μ μ΄λ―Έμ§λ‘ μ΄λνλ €κ³ ν λμ μμ μ½μ μΆλ ₯(λ§μ§λ§ μΈλ±μ€ = 8):
μΈλ±μ€ λ³κ²½ 7
μΈλ±μ€ λ³κ²½ 8
λμμ΄ λμ ¨λμ?
μ€λ ν΄κ·Όνκ³ λ΄μΌκ² μ΅λλ€. μ§μ° λΌμ μ£μ‘ν©λλ€.
@Andi1990λ , 2.0.2λ₯Ό μ¬μ©ν΄ μ£Όμκ² μ΅λκΉ? κ°μ¬ ν΄μ
μλν©λλ€. μνμ΅λλ€!
κ°μ₯ μ μ©ν λκΈ
λΆννλ λ¬Έμ λ μ¬μ ν μ‘΄μ¬ν©λλ€. λ€μ μ¬μμμ€.
[email protected]λ‘ λ°λͺ¨λ₯Ό μλνλλ° μΈλ±μ€ 6μμ μΈλ±μ€ 10κΉμ§ μμ§μμ΄ μλνμ§ μλ κ²μΌλ‘ λνλ¬μ΅λλ€. "μ€λ₯Έμͺ½" λ²νΌμ λλ₯΄λ©΄ μ΄λ―Έμ§κ° μ¬μ ν μΌμͺ½μΌλ‘ μ΄λν κ²μΌλ‘ μμν©λλ€.