Modx պատկերի կարուսել ապրանքի էջում: մեծ ու սարսափելի

Բարև համայնք:

Այս գրառման մեջ դուք կսովորեք, թե ինչ են Multiple Formtabs-ը և ինչպես ստեղծել կոնֆիգուրացիա այլ տվյալների հավաքածուով: Եվ իհարկե, մենք ձեզ հետ կստեղծենք սլայդեր, որը կունենա տարբեր տեսակի սլայդներ, իսկ վերջում դուք կգտնեք շատ հետաքրքիր պատմությունորը ես երկար ժամանակ չէի համարձակվում որևէ մեկին ասել (եթե, իհարկե, ձեզ հետաքրքրում է, բայց պատմությունը հետաքրքիր է. հավատացեք ինձ): Եվ այսպես, սլայդների օրինակներ.

• Ֆոնային պատկեր
• Տեսանյութի ֆոն
• պինդ գույնի ֆոն

Ուշադրություն. Այս անգամ էկրաններից մի հեռացրեք երեխաներին և հղիներին, քանի որ սա ինչ-որ տեսակի խտրականություն է՝ հիմնված տարիքի և սեռի վրա:

Այդպես էլ կլինի

Եվս մեկ հայտարարություն. Ես հաճախ կանդրադառնամ առաջին դասին, որպեսզի չկրկնվեմ, ուստի խստորեն խորհուրդ եմ տալիս ծանոթանալ

Ինչի համար?

Եկեք երևակայենք՝ դուք ստանում եք մի նախագիծ, որտեղ, օրինակ, գլխավոր էջում կա մի սլայդեր, որն ունի մի քանի տեսակի սլայդներ, մեկը ունի վիդեո ֆոն, մյուսը՝ նկար, իսկ երրորդը՝ օրինակ՝ միաձույլ գույն։ Դուք չեք ստեղծի դաշտերի մեկ հավաքածու (մեկ կոնֆիգուրացիա) և չխցկեք (ներողություն բառապաշարի համար) այս բոլոր դաշտերը դրա մեջ և կառավարչին ասեք, թե ինչպես ապրել դրա հետ և լինել: Չէ լուրջ վերաբերմունք!? (Հուսով եմ, որ ինչ-որ մեկը հասկանում է)

Պատճառի համար

Մենք ձեզ հետ հասկացանք «ինչու»-ն, հիմա պարզենք «ինչպես»-ը։ Եթե ​​դուք արդեն կարդացել եք առաջին դասը, ապա մենք պետք է գնանք MIGX բաղադրիչի էջ և ստեղծենք 3 կոնֆիգուրացիա։ Նախապես տեղադրեք ColorPicker-ը Jako-ի կողմից (բայց դա նշանակություն չունի):

Այն ամենը, ինչ իմ կողմից նշված չէ, բաց թողեք:

ամուր կոնֆիգուրացիա (պինդ գույն)

• ներդիր Կարգավորումներ
  • Անուն- ամուր
  • Ավելացնել նոր կատեգորիա- Սահող
• ներդիր Ձևաչափեր
  • Դաշտեր Դաշտերստեղծել 3 դաշտ
    1. Ֆոնի գույնը:
       • դաշտի անվանումը-bgcolor
       • Վերնագիր- Ընտրեք ֆոնի գույնը
       • Մուտքագրեք հեռուստացույցի տեսակը- ColorPicker (կամ նա, ով դուք
         օգտագործել)
    2. Կոչում:
       • դաշտի անվանումըվերնագիր
       • Վերնագիր- Սլայդի վերնագիր
    3. Նկարագրություն:
       • դաշտի անվանումը- նկարագրություն
       • Վերնագիր- Սլայդի նկարագրությունը
       • Մուտքագրեք հեռուստացույցի տեսակը- textarea
  • Multiple Formtabs դաշտ-տիպ( Տրված արժեքկլինի մուտքի բանալին
    ելքային զանգված. Կանխադրված՝ MIGX_formname)
  • - Ֆոնի վրա միաձույլ գույնով (Տեքստ
    այս կոնֆիգուրացիան ընտրության ցանկում)
  • - ամուր (Նույն տեսակի դաշտի արժեքը
    զանգվածով)

վիդեո կոնֆիգուրացիա

• ներդիր Կարգավորումներ
  • Անուն- տեսանյութ
  • Կարգավիճակ- Սահող
• ներդիր Ձևաչափեր
  • Դաշտեր- Ստեղծեք 1 ներդիր և դաշտում Դաշտերկրկին, մենք ստեղծում ենք 3 դաշտ, այս դաշտերից միայն մեկն է այլ տեսակի:

    Այստեղ պետք է հստակեցնեմ, որ տարբեր կոնֆիգուրացիաներում դաշտերի քանակը և դրանց տեսակները կարող են այնքան տարբեր լինել, որքան ձեր երևակայությունը սահմանափակ է... Բայց ես գիտե՞մ, որ ձեր երևակայություններով ամեն ինչ կարգի՞ն է:

    1. Տեսանյութ (այսինքն՝ ֆայլ).
       • դաշտի անվանումը- տեսանյութ
       • Վերնագիր- Վերբեռնեք տեսանյութ
       • Մուտքագրեք հեռուստացույցի տեսակը- ֆայլ
    2. Կոչում:
       • դաշտի անվանումըվերնագիր
       • Վերնագիր- Սլայդի վերնագիր
    3. Նկարագրություն:
       • դաշտի անվանումը- նկարագրություն
       • Վերնագիր- Սլայդի նկարագրությունը
       • Մուտքագրեք հեռուստացույցի տեսակը- textarea
  • Multiple Formtabs դաշտ- տիպ
  • Multiple Formtabs Optionsext- Հետին պլանում տեսանյութով
  • Multiple Formtabs Optionsvalue- տեսանյութ

սլայդերի կոնֆիգուրացիա

Լռելյայն, այն կընդունի պատկեր և կլինի մի տեսակ հիմնական կոնֆիգուրացիա:

• ներդիր Կարգավորումներ
  • Անուն- սահիկ
  • Կարգավիճակ- Սահող
  • Փոխարինեք «Ավելացնել տարր»- Ավելացնել սլայդ
  • Ձևի վերնագիր
  • պատուհանի վերնագիր- Ավելացնել / խմբագրել սլայդը
• ներդիր Ձևաչափեր
  • Դաշտեր- Ստեղծեք 1 ներդիր և Fields դաշտում կրկին ստեղծեք 3 դաշտ
    1. Պատկեր՝
       • դաշտի անվանումը- պատկեր
       • Վերնագիր- Վերբեռնեք պատկեր
       • Մուտքագրեք հեռուստացույցի տեսակը- պատկեր
       • Նշեք ձեզ անհրաժեշտ ֆայլերի աղբյուրը, ես նկարագրեցի այս առաջադրանքը առաջին դասում
    2. Կոչում:
       • դաշտի անվանումըվերնագիր
       • Վերնագիր- Սլայդի վերնագիր
    3. Նկարագրություն:
       • դաշտի անվանումը- նկարագրություն
       • Վերնագիր- Սլայդի նկարագրությունը
       • Մուտքագրեք հեռուստացույցի տեսակը- textarea
  • Բազմաթիվ ձևաչափեր- Ահա հենց կախարդանքը, մենք պետք է ընտրենք նախորդ քայլերում ստեղծված կոնֆիգուրացիաները, ներառյալ այն, որը մենք ներկայումս ստեղծում ենք, այսինքն. ընտրեք տեսանյութ, պինդ և սահիկ

    Կոնֆիգուրացիաներ սահիչցուցակում չի լինի, քանի որ իրականում այն ​​դեռ չի ստեղծվել, այնպես որ դուք պետք է անցնեք մնացած կետերը, պահպանեք կոնֆիգուրացիան, նորից բացեք այս կոնֆիգուրացիան խմբագրման համար, և այս անգամ այն ​​հասանելի կլինի ցուցակում։ սահիչ

    
    

    Եվս մեկ պարզաբանում. կոնֆիգուրացիաները կդասավորվեն հենց ձեր ընտրած հերթականությամբ, այսինքն. լռելյայնորեն նոր սլայդ ավելացնելիս կընտրվի այն, որը կլինի առաջինը ցանկում
    

  • Multiple Formtabs Label- Ընտրեք սլայդի տեսակը (Տեքստը նշված է այստեղ
    որը օգտվողը կտեսնի սլայդի տեսակի ընտրության ցանկի կողքին)
  • Multiple Formtabs դաշտ- տիպ
  • Multiple Formtabs Optionsext- Ֆոնի վրա պատկերով
  • Multiple Formtabs Optionsvalue- պատկեր
• ներդիր սյունակներ
  • Դաշտ Սյունակներ.Երկու տարրի ավելացում
    1. վերնագիր
       • ներդիր Սյունակ
         • վերնագիր- Կոչում
         • դաշտվերնագիր
       • ներդիր Բջջային խմբագիր
         • Խմբագիր- this.textEditor
    2. Նկարագրություն
       • ներդիր Սյունակ
         • վերնագիր- Նկարագրություն
         • դաշտ- նկարագրություն
       • ներդիր Բջջային խմբագիր
         • Խմբագիր- this.textEditor

Ինչպես արդեն նկատել եք, առաջին երկու կոնֆիգուրացիաներում մենք կառավարման վահանակում չենք ստեղծել այսպես կոչված սյունակներ ելքի համար, այսինքն. հեռուստացույցի պարամետրն ինքնին խմբագրելիս: Այս սյունակները պետք է ստեղծվեն վերջինիս մեջ, այսինքն. այն կոնֆիգուրացիայի մեջ, որը նշված կլինի հեռուստացույցում և որում դաշտում Բազմաթիվ ձևաչափերներդիր Ձևաչափերբոլոր կոնֆիգուրացիաները, որոնք մեզ անհրաժեշտ են, կցուցարկվեն, ներառյալ նույն կոնֆիգուրացիան

Եկեք գնանք և դաշտում արագ ստեղծենք հեռուստացույց մուտքային տիպով migx Կոնֆիգուրացիաներգրեք մեր կոնֆիգուրացիայի անունը, այսինքն. slider , նշանակեք անհրաժեշտ ձևանմուշները և բացեք ռեսուրսը խմբագրման համար կամ ստեղծեք այն: Եթե ​​մենք ամեն ինչ ճիշտ ենք արել, ապա մենք պետք է տեսնենք հետևյալ պատկերը.

Պատկերը սեղմելի է, և եթե դուք արդեն դիտել եք գիֆը գրառման սկզբում նշված հղումից, ապա սա հենց այն է:

Մենք արագ լրացնում ենք տվյալները և անցնում մեր սլայդների ելքին:

Ինչպե՞ս հանել:

Տվյալների մուտքագրումը լավ է, բայց ինչ վերաբերում է ելքին: Մի անհանգստացեք ընկերներ, ամեն ինչ լավ է լինելու։ Արդյունքի համար մենք կրկին ունենք 2 լավ տարբերակ, և մենք դիտարկել ենք այս երկու տարբերակները , սա MIGX-ի բնիկ հատված է getImageListև ամենակարող երեւույթ. Տեսնենք, թե ինչ տեսք ունեն մեր տվյալները.

getImageList

Եկեք կանչենք հատվածը՝ առանց tpl պարամետրը նշելու՝ չմշակված տվյալները տեսնելու համար.

[] Զանգված ( => 14 => պատկեր => ֆայլեր/avatar.png => Սա պատկերով սլայդ է => Դե, կարճ նկարագրություն) [_alt] => 0 [_first] => 1 [_վերջին] => => 1 = > սահիչ) Զանգված ( => 15 => տեսանյութ => ֆայլեր/Իմ տունը ամոթալի է: MOV => Եվ սա տեսանյութ է => Այո, իսկապես: [_alt] => 1 [_first] => [ _last] => => 2 => slider) Array ( => 16 => պինդ => ff0000 => Իսկ կարմիրն այստեղ գեղեցիկ գույն է => ինձ դուր է գալիս: [_alt] => 0 [_first] => [_last ] => 1 => 3 = > սահող)

երեւույթ

($_modx->resource.slider| fromJSON | տպել) Array ( => Array ( => 14 => պատկեր => files/avatar.png => Սա պատկերի սլայդ է => Դե, կարճ նկարագրություն)) => Զանգված ( = > 15 => տեսանյութ => ֆայլեր/Իմ տունը ամոթալի է: MOV => Եվ սա տեսանյութ է => Այո, իսկապես!) => Զանգված ( => 16 => պինդ => ff0000 => Եվ ահա կարմիրը գեղեցիկ գույն => Ինձ դուր է գալիս!))
Ինչպես տեսնում ենք, մեր զանգվածներում, ի թիվս այլ բաների, բանալին տիպայն արժեքներով, որոնք մենք նշել ենք կոնֆիգուրացիաները ստեղծելիս:

Մեր սլայդերը ցուցադրելու համար getImageList, մենք պետք է ստեղծենք 3 կտոր մեր հիմնական արժեքների անուններով տիպ, այսինքն՝ պատկեր, տեսանյութ և ամուր: Հետագայում դուք կհասկանաք, թե ինչու:

Հատված օրինակներ.

// Հատված պատկեր

// Հատված տեսանյութ // Հատված պինդ
Իսկ զանգը պետք է այսպիսի տեսք ունենա.

Այստեղ մենք արժեքներ ենք վերցնում յուրաքանչյուր սլայդի զանգվածներից, հետևաբար մենք ստեղծեցինք երեք կտոր, որոնց անունները համապատասխանում են դաշտի արժեքներին: Multiple Formtabs դաշտ

Դե, շարունակեք երեւույթամեն ինչ շատ ավելի պարզ է թվում.

(var $slider = $_modx->resource.slider| fromJSON) (եթե $slider)

(/եթե)

Արդյունքը և խոստացված պատմությունը

Ինչպես տեսնում ենք, MIGX-ը հաղթահարում է այս խնդիրը, եթե չասենք «գերազանց», բայց գոնե «լավ»: Եվս մեկ անգամ կրկնում եմ, որ MIGX-ը ձեզ չի սահմանափակում կոնֆիգուրացիաների քանակով, յուրաքանչյուր կոնֆիգուրացիայի ներդիրներով և դրանցում գտնվող դաշտերի քանակով: Եվ օրինակները, ինչպես արդեն հուսով ենք հասկացել, բավականին պարզ են, որպեսզի դուք նույնպես հեշտությամբ կարողանաք ծանոթանալ այս ֆունկցիոնալությանը: Եվ ևս մեկ կարևոր բան. կտորներ արտածելիս ես խստորեն խորհուրդ եմ տալիս ստուգել դաշտերի լրիվությունը և միշտ հաշվի առնել, որ տվյալները կարող են լրացվել կամ չլինել կամ ինչ-ինչ պատճառներով չգալ, հետևաբար օգտագործել phx զտիչներ MODX շարահյուսության համար: կամ պայմաններ ֆենոմում:

Շնորհակալ եմ բոլորիդ ուշադրության համար, բոլորին հաջողություն կմաղթեմ, բայց չեմ անի, որովհետև ինչպես ասում են. «Պարտվածներին հաջողություն մաղթեք», ուրեմն ձեզ երջանկություն և առողջություն կամ մի բան եմ մաղթում, բայց ում հոգ է տանում, ուրեմն պատմություն.

Մի անգամ մեզ հյուր եկան հարազատներս, որոնց թվում էր իմ եղբորորդին (քրոջս տղան): հարեւան երկիրև իմ երկու զարմիկները (Մենք գրեթե բոլորս նույն տարիքի ենք): Գյուղական տուն, արևոտ Կենտրոնական Ասիա, մոտակայքում փոքրիկ սար և գետ։ Նույն գիշեր մենք չորսով որոշեցինք զբոսնել հենց այս գետի երկայնքով, և սկզբում ամեն ինչ հանգիստ էր, հուզմունքի պատճառներ չկար։ Նրանք շատ զվարճանում էին, պատմում էին պատմություններ (երբեմն սարսափելի և սահմռկեցուցիչ), կատակում և նման բաներ: Բայց մի պահ նկատեցի, որ զարմիկներիցս մեկը գունատվեց, և սա պարզապես բանավոր շրջադարձ կամ զարդարանք չէ, քանի որ այս դեպքից առաջ և հետո ես երբեք նման վախ և տարակուսանք չեմ տեսել մարդու դեմքին: Առանց աչքը կտրելու նա նայեց այն ուղղությամբ, որտեղ մեջքս էր շրջվել, այսինքն. նա կարծես ինչ-որ բանի կամ ինչ-որ մեկին էր նայում իմ հետևում, բայց ոչ ուղիղ հետևից ու մոտիկից, ինձ թվում էր, թե նա ինչ-որ տեղ հեռվում է նայում։ Սարսափելի էր, և ես նրան հարցրի. - Ի՞նչ է պատահել: Եւ նա…

Այս պարբերությունը պետք է ձևացնի, որ այս գրառման պատմությունը շարունակություն ունի, բայց իրականում ես պարզապես մի փոքր խաբեցի ձեզ, հուսալով, որ կարող եմ ձեզ մի փոքր ուրախացնել տեխնիկական, ձանձրալի և մեծ տեքստից, և դուք լավ կլինեք: տրամադրություն. Պատմությունն ինքնին իրական է և շատ հետաքրքիր: Այժմ, շնորհակալություն բոլորիդ ուշադրության համար:

UPD:
Եթե ​​ես ի՞նչ եմ Բահա:

Եթե ​​հանկարծ ինչ-որ մեկը ցանկանում է շնորհակալություն հայտնել ռուբլու համար, ուրեմն այդպես էլ լինի՝ Sberbank քարտ +79609354545

Այս դասում մենք կանդրադառնանք MIGX-ի հիմունքներին և կաշխատենք նոր սլայդերի վրա, որը կարող եք օգտագործել ձեր բլոգում:

Պահանջներ:

• MODX Revolution կայք.
• Տեղադրված MIGX մաքսային ձևանմուշի փոփոխական տեսակը (փաթեթի կառավարման միջոցով):
• Պատկերասրահի սլայդեր կամ սցենար, որը մենք կցանկանայինք ինտեգրել: Ես օգտագործել եմ WooThemes' FlexSlider-ը, քանի որ այն ինքն իրեն հարմարեցնում է տարայի լայնությանը (շատ կարևոր է արձագանքող դիզայնի համար): Այն նաև շատ կարգավորելի է, աջակցում է սմարթֆոնների վրա ոլորելու հնարավորությունը, և տուփից դուրս հիանալի տեսք ունի:
• Տեղադրվել է phpthumbof հատվածը Package Manager-ի միջոցով՝ պատկերների ինքնաբերման համար:
• Ցանկացած պատկեր!

Սկսել

Աշխատանքում օգտագործվում են մի քանի մասեր. Սկզբում մենք պետք է տեղադրենք MIGX հեռուստացույցը, և մենք պետք է վերցնենք այս տվյալները առջևի ծայրից և աշխատենք մեր սլայդերը: Այս ձեռնարկը ենթադրում է FlexSlider-ի օգտագործում, մենք կհամոզվենք, որ նշագրումն այն է, ինչ անհրաժեշտ է, բայց այն պետք է նաև շատ հեշտ լինի հարմարվել այլ սլայդերներին:

Քայլ 1. Տեղադրեք MIGX հեռուստացույց՝ նկարների կառավարման համար

Սկսենք հեռուստացույցի կարգավորումից: MIGX-ի ուժն այն է, որ դուք կարող եք սահմանել ձեզ անհրաժեշտ դաշտերը: Դուք դրանք կտեսնեք որպես աղյուսակ, և ձեզ հարկավոր է միայն անվանել վերնագրերը: Այս դեպքում ինձ անհրաժեշտ կլինեն երեք տարբեր դաշտեր.

• Մուտքագրման դաշտ՝ ֆայլային համակարգում պատկեր ընտրելու համար (կամ ձեր մեդիա աղբյուրներից 2.2-ում):
• Տեքստի մուտքագրման դաշտ՝ վերնագիր / պիտակ / նկարագրություն մուտքագրելու համար: FlexSlider-ը հիանալի աշխատանք է կատարում ենթագրերի հետ, ուստի մենք կօգտագործենք դրանք:
• Նաև ես ավելացրեցի տեքստային մուտքագրում «Set»-ի համար: Ինչպես կտեսնենք ավելի ուշ, ես այն կօգտագործեմ անսահման թվով անհատական ​​սլայդերների համար, որոնք կավելացվեն ռեսուրսի ցանկացած վայրից:

Եթե ​​ցանկանում եք, կարող եք օգտագործել այլ դաշտեր, բայց ձեռնարկը կօգտագործի հենց այն դաշտերը, որոնք ես վերը թվարկեցի:

Անցնենք հեռուստացույցի ստեղծմանը։ Ահա պատկերների նկարագրություններով սլայդեր (այն դեպքում, երբ մանրապատկերում ոչինչ չի երևում):

Ստեղծեք նոր կաղապարային փոփոխական Elements ներդիրում և տվեք դրան համապատասխան անուն: Ես այն կանվանեմ ws.images, եթե դու դրան քո անունը տաս, մի ​​մոռացիր [[*ws.images]]-ը փոխարինել քո անունով: Ներածման ընտրանքների ներդիրում բացվող ընտրացանկից ընտրեք «migx» տեսակը: Եթե ​​դուք չեք տեսնում այս տեսակը, ապա ստուգեք՝ արդյոք տեղադրել եք MIGX փաթեթը Փաթեթների կառավարչի միջոցով: Կնկատեք, որ էկրանի ներքևում ավելացվել են մի քանի տարբերակներ, այդ թվում՝ «Ձևի ներդիրները» և «Ցանցային սյունակները»: Սա վերաբերում է MODX >2.0-ին, ավելի վաղ տարբերակների համար ես խորհուրդ եմ տալիս թարմացնել:

Նկատի ունեցեք, որ Form Tabs և Grid Columns դաշտերը պետք է լրացված լինեն վավեր JSON տողերով: JSON-ը հիմնականում օբյեկտների, զանգվածների կամ key -> արժեքների համակցությունները ցուցադրելու միջոց է այնպես, որ աջակցում է գրեթե ցանկացած ծրագրավորման լեզու: Ահա տեխնիկական բնութագրերը և որոշ օրինակներ JSON-ի պաշտոնական կայքից:

Ձևի ներդիրների կարգավորում

Ձևը թույլ է տալիս օգտագործել տարբեր ներդիրներ: Յուրաքանչյուր ներդիր ունի նկարագրություն և մի քանի դաշտ: Դրանով դուք կարող եք շատ առաջադեմ բաներ անել, քանի որ ժամանակի մեծ մասը կօգտագործեք մեկ ներդիր, այնպես որ պարզապես հիշեք առայժմ: Ահա JSON կոդը այն Ձևերի ներդիրների համար, որոնք ես օգտագործում եմ.

[("վերնագիր":"Պատկեր", "դաշտեր": [ ("դաշտ":"սահմանված", "վերնագիր":"Սահմանել"), ("դաշտ":"նկարագրություն", "վերնագիր":"Նկարագրություն") , ("դաշտ":"պատկեր","վերնագիր":"Պատկեր","inputTVtype":"պատկեր") ] )]

Եկեք անցնենք յուրաքանչյուր տողով.

• Առաջինը ցույց է տալիս ներդիրների զանգվածի բացումը քառակուսի փակագծով ([), իսկ ներդիրի բացվող օբյեկտը գանգուր փակագծով ((): Դրանից հետո մենք սահմանում ենք Image դաշտի մակագրությունը: Նկատի ունեցեք, որ ձեզ անհրաժեշտ է. Հատկությունների և դրանց արժեքների համար կրկնակի չակերտներ (" ") օգտագործելու համար, միայնակները կարող են հանգեցնել անսպասելի արդյունքների: Եթե ունեք այս փակագծերը որևէ հատկության, արժեքի մեջ, ապա դրանք բաց թողեք կտրվածքով (\): Նկարագրությունը (վերնագիր) սահմանելուց հետո, եկեք շարունակենք և սկսենք սահմանել «դաշտերի» զանգվածը՝ բացելով այն քառակուսի փակագծերով ([) ։
• Մենք կսահմանենք մեր առաջին դաշտը որպես սահմանված: «field»: «set» նշանակում է, որ մենք ցանկանում ենք ունենալ պարզ տեքստի մուտքագրում այս դաշտում: «Վերագիր». Այնուհետև տվեք «Set» մակագրությունը, որը կցուցադրվի ձևի վրա որպես դաշտի պիտակ:
• Հաջորդը, նույն կերպ սահմանեք նկարագրության դաշտը
• Տող 4-ը սահմանում է պատկերը: Այստեղ առանձնահատուկն այն է, որ մենք օգտագործում ենք մեկ այլ հեռուստացույց («պատկեր» անվանումը) որպես մուտքագրման տեսակ: Սա MIGX-ի շատ ուժեղ հատկանիշն է, որը թույլ է տալիս օգտագործել այլ հեռուստացույցներ ձեր ձևը ձևավորելու համար: Այս դեպքում «image» հեռուստացույցը շատ պարզ է. մուտքագրման տեսակը պատկերն է, իսկ 2.2-ում այն ​​կարող եք վերագրել ճիշտ մեդիա աղբյուրին: Ձեզ հարկավոր չէ այն կապել կաղապարների հետ, ինչպես սովորական հեռուստացույցի դեպքում: Դա անելու մեկ այլ եղանակ (որը ես օգտագործում եմ այլ MIGX հեռուստացույցների վրա) ռադիո տուփեր պատրաստելն է կամ տուփեր ընտրելը:
• Հինգերորդ տողը փակում է դաշտերի զանգվածը: Նաև նշեք, որ դաշտը (պատկերը) սահմանող վերջին տողը չի ավարտվում ստորակետով. սա կարևոր է: Եթե ​​զանգվածում ստորակետ եք դնում, JSON-ը չի վերլուծվի, և ձեր ձևը չի աշխատի:
• Վեցերորդ տողը փակում է ներդիրի օբյեկտը և ներդիրների ամբողջ զանգվածը:

Այսպիսով, մենք ստեղծել ենք «իմիջ» հեռուստատեսություն։ Տվյալները լրացնելու համար դուք արդեն պետք է ունենաք ձևաթուղթ, բայց դրանք ցուցադրելու համար պետք է նշեք...

Սյունակի նշագրման կարգավորում

Սյունակի դասավորությունը աղյուսակ է ռեսուրսի հեռուստատեսային վահանակի վրա: Դուք պետք է սահմանեք այս աղյուսակի վերնագրերը «Column Markup» մուտքագրման ընտրանքների միջոցով: Ահա (կրկին JSON) սահմանումը, թե ինչ եմ օգտագործում. [( "header": "Set", "sortable": "true", "dataIndex": "set" ), ( "header": "Description" , "sortable" : "true", "dataIndex": "description" ),( "header": "Image", "sorted": "false", "dataIndex": "image","renderer": "this. renderImage» )]

Եկեք անցնենք յուրաքանչյուր տողով.

• Բացեք վերնագրերի զանգվածը քառակուսի փակագծերով ([) և հինգերորդ սյունակը վերնագրով գանգուր փակագծերով (():
• Վերնագիրն անվանում ենք «Set», նշում ենք, որ այն կարող է լինել տեսակավորելի (տեսակավորելի) և նշում ենք «set» պարամետրը, որը համապատասխանում է Set Form Tabs-ի սահմանմանը, որոնք ունեն «field»: «set»:
• Կոմպլեկտի ավարտը / Նկարագրության սկիզբը
• Վերնագիրն անվանում ենք «Նկարագրություն», տեսակավորվող և համընկնում դաշտի նկարագրության dataIndex-ի հետ։
• Վերջի նկարագրությունը / Սկսել պատկերը
• Վերնագիրն անվանեք «Image», անտեսակավոր և քարտեզագրեք այն dataIndex - պատկերի դաշտում: Մենք նաև կսահմանենք մատուցող, որը ExtJS-ում թույլ կտա փոխել ելքային տվյալների տեսքը։ Այս դեպքում «this.renderImage» ցուցադրիչը ավտոմատ կերպով կվերցնի ընտրված պատկերի url-ը և փոխարենը կարտադրի մանրապատկեր:
• Image օբյեկտի վերջը և վերնագրերի զանգվածը:

Դրանից հետո դուք կարող եք վերագրել այս MIGX հեռուստացույցը ձեր կաղապարին և ստուգել արդյունքը: Նշումը չի՞ ցուցադրվում: Վերադարձեք ներդիրներին և համոզվեք, որ բոլոր արժեքները կցված են կրկնակի չակերտների մեջ, և ոչ թե մեկ չակերտների մեջ, և ստուգեք լրացուցիչ ստորակետեր:

Տեղեկություն

JSON-ը վավերացնելու համար օգտագործեք JSONLint-ը:

• Լրացրեք մանրամասները
• Տվյալներ բերեք կայք

Լրացրեք մեր ws.image կաղապարի փոփոխականը կամայական տվյալներով

Եթե ​​փորձեք այս տվյալները ցուցադրել որպես սովորական հեռուստացույց, կտեսնեք այսպիսի բան.

[( "MIGX_id":"1","set":"set1","description":"Նշեք կատվին, ով երշիկ է գողանում և ուտում, երբ արթուն է","image":"demo/uroki/15/1 .jpg" ),("MIGX_id":"2","set":"set1","description":"drum","image":"demo/uroki/15/2.jpg"),( "MIGX_id" ":"3","set":"set1","description":"como esta nuevo","image":"demo/uroki/15/3.jpg"),("MIGX_id":"4", "set":"set1", "description":"այս գրքով կարող ես մարդ սպանել","image":"demo/uroki/15/4.jpg" )]

Սա JSON զանգված է՝ մուտքագրված դաշտերով և արժեքներով:

Քանի որ MIGX-ը գալիս է getImageList հատվածով, կարող եք փորձել ցուցադրել տվյալները՝ օգտագործելով այն: Այս հատվածի փաստաթղթերը կարող եք գտնել այստեղ: Կամ ստեղծեք ձեր սեփական հատվածը (parseMIGXToGallery), որը ես օգտագործում եմ հեռուստացույցի տվյալների վրա հիմնված &tpl հատվածից նշումներ ստեղծելու համար.

fromJSON ($input); $ելք = զանգված(); եթե (!$input || դատարկ ($tpl)) վերադարձնել «ոչ նյութ»; foreach ($input որպես $ տող) ( if (isset($set) && !empty($set) && ($set != $row["set"])) շարունակել; $output = $modx->getChunk($) tpl, $row); ) վերադարձնել implode("\n", $output);

Եկեք անցնենք յուրաքանչյուր տողով.

• Մենք վերցնում ենք $input փոփոխականը (որը վերցնում է հատվածի զանգի &input պարամետրում պարունակվող տվյալները, դրա մասին ավելի ուշ) և վերլուծում JSON-ը php զանգվածի մեջ:
• Մենք դատարկ զանգված կդնենք մեր ելքը պահելու համար:
• Եկեք համոզվենք, որ $input փոփոխականը NULL կամ False չէ, ինչը կնշանակի, որ JSON-ը չի փոխանցվել կամ անվավեր է, ինչպես նաև ստուգենք, արդյոք $tpl փոփոխականը (հատված զանգի &tpl պարամետրով փոխանցված) դատարկ չէ։ Եթե ​​պայմաններից որևէ մեկը True է, մենք կտպենք «դատարկ» սխալի հաղորդագրություն, որը հուշում է բովանդակության կառավարչին, որ ինչ-որ բան այն չէ:
• Հաջորդը, կրկնեք $input զանգվածի յուրաքանչյուր տարրի միջով՝ որպես $ տող:
• Մենք ստուգում ենք, արդյոք $set փոփոխականը դրված է (որը դրված է հատվածի կանչում &set պարամետրում), և եթե այն դատարկ չէ, մենք ստուգում ենք դրա արժեքը ընթացիկ տողի «set» արժեքի համեմատ։ Եթե ​​դա այն չէ, ինչ ցանկանում եք, անցեք զանգվածի հաջորդ տարրին:
• Մենք ստանում ենք $tpl անունով մի կտոր և տեղադրում ենք ընթացիկ տողի արժեքները որպես տեղապահներ:
• Մենք փակում ենք foreach հանգույցը:
• Ի վերջո, մենք սոսնձում ենք $output զանգվածը, յուրաքանչյուր տարր առանձնացնելով տողերի ընդմիջումով և դուրս բերելով էջ:
• Այսպիսով, ամփոփելու համար վերը նշվածը, մենք վերցնում ենք մուտքագրումը, անցնում ենք յուրաքանչյուր տողով և ստուգում, թե արդյոք դրանք պատկանում են մեր սահմանած բազմությանը, այնուհետև այն ստանում է մի կտոր և ավելացնում է ամեն ինչ ելքին:
• Գործարկման հատված

Մեզ անհրաժեշտ է ընդամենը մի հատված զանգ, որտեղ մեզ պետք են մեր պատկերները և մի կտոր, որը կարտադրի ամեն ինչ ճիշտ ձևով FlexSlider-ի համար: Ահա թե ինչպես է կոչվում հատվածը.

[]` &set=`set1` ]]

Իսկ images.gallery.tpl հատվածը.

[[+ նկարագրություն]]

Դուք նաև պետք է ամբողջ հատվածի ելքը փաթաթեք div-ով և չպատվիրված ցուցակով, համաձայն FlexSlider-ի փաստաթղթերի: Ամեն ինչ ավելի հեշտ դարձնելու համար եկեք այդ ամենը դնենք մեկ մասի մեջ: Իմ կտորը կոչվում է սլայդեր և պարունակում է հետևյալը.

Օգտագործելով այս հատվածը, ես կարող եմ ուղղակի կապել բովանդակության մեջ ինչ-որ բանի, որը շատ ավելի հեշտ է հիշել կամ տեղադրել խաբեության թերթիկի մեջ:

[[$slider?set=`հավաքածուի անունը`]]

Այժմ կարող եք սկսել FlexSlider-ի դասավորությունը:

Քայլ 3. FlexSlider-ի օգտագործում

FlexSlider-ը համեմատաբար հեշտ է օգտագործել (ներբեռնել դրա ֆայլերը), և նրա կայքում կան բազմաթիվ օրինակներ: Դուք նաև պետք է ներառեք jQuery-ի զանգը էջում և դրա CSS ֆայլը (փաթեթավորված zip ֆայլում) և FlexSlider հավելվածը (նաև zip արխիվում): Դրանից հետո դուք պետք է գործարկեք ճիշտ տարրը՝ օգտագործելով հետևյալ կոդը.

Կայքը խորհուրդ է տալիս ամեն ինչ դնել ֆայլի գլխում, բայց ես անձամբ եմ այդ ամենը դրել ներքեւում։ Եթե ​​ձեր սահիկը ցուցադրվում է էջի վերևում, ապա ավելի լավ է տեղադրել այն որպեսզի այն բեռնվի մինչև էջը հայտնվի, այնպես որ տեղադրեք այն որտեղ ցանկանում եք:

Այսքանը: Հուսով եմ, որ այս երկար հոդվածը կօգնի ինչ-որ մեկին սկսել օգտագործել MIGX-ը և FlexSlider-ի նման սլայդերները:

Այսօր մի փոքրիկ հոդված դրա մասին ինչպես ստեղծել սլայդեր modx-ումօգտագործելով BanerY փաթեթը: Այս փաթեթը կարելի է ներբեռնել և տեղադրել պահոցից:

BanerY-ով սլայդերի ստեղծում

Եվ այսպես, կա ստատիկ սահիչ, թող դա լինի սովորական bootstrap սահիչ, այս նշագրմամբ.

Նպատակը այս նշագրումից կառավարվող սլայդեր ստեղծելն է: Եկեք սկսենք.

Սկսենք BannerY-ում սլայդներ ստեղծելուց, դրա համար գնում ենք Applications - BannerY - Positions և ստեղծում ենք դիրք (օրինակ, home-slider):

Դրանից հետո անցեք Բաններների ներդիր և սեղմեք Նոր դրոշակակիր կոճակը: Կբացվի պատուհան՝ նոր պաստառ ստեղծելու համար:

Մենք լրացնում ենք ամեն ինչ.

• Անունը, այն կարող է ցուցադրվել օգտագործելով [[+name]]:
• Ընտրեք պատկեր - [[+image]]:
• Նշեք URL-ը, որտեղ գնալ - [[+url]]:
• Լրացրե՛ք նկարագրությունը - [[+description]] - այստեղ, ի դեպ, կարող եք լիցքավորել ոչ միայն տեքստը, այլև սովորական html, և դա հիանալի է։
• Դե, ընտրեք դիրքը (այն ավելի վաղ է ստեղծել):

Եվ այսպես, մենք ստեղծում ենք անհրաժեշտ քանակությամբ սլայդներ:

Այժմ դուք պետք է բաժանեք վերը նշված նշագրումը մասերի և տեղադրեք կոդը BanerY շարահյուսության մեջ:

Ստեղծեք մի կտոր առանձին սլայդերի համար՝ դասի հետ ակտիվ, թող այդպես լինի; թող դա լինի Սլայդև ներարկել շարահյուսությունը դրա մեջ.

Այժմ պատճենեք այդ հատվածը և անուն տվեք սլայդ 2և հեռացնել դասը ակտիվ

Դե, փաստորեն մնում է միայն սլայդները ցուցադրելը։

[]

Արդյունքում մենք ստանում ենք հետևյալը.

Ահա և վերջ) Շատ հեշտ է սլայդեր ստեղծել modx-ում BanerY-ի միջոցով:

Այո, ի դեպ, դրա փաստաթղթերն այստեղ են. docs.modx.pro/components/bannery/snippet

Slider Revolution-ը ամենահայտնի սլայդերներից մեկն է՝ շնորհիվ իր հսկայական հնարավորությունների և օգտագործման հեշտության:
ThemePunch-ից: Այս սլայդերը գնվել է 273,441+ անգամ և օգտագործվում է 2500000+ կայքերի կողմից ամբողջ աշխարհում:

Ստորև թվարկված են այս սլայդերի հիմնական առավելություններից մի քանիսը, որոնք տարբերում են այն անվճար և
Պրեմիում անալոգների մեծ մասը.

• Հզոր վիզուալ խմբագիր. հարմարեցրեք սահող էկրանը ձեր նախագծի կարիքներին համապատասխանելու համար հարմար մենյուի միջոցով, որում
  ամեն ֆունկցիա իր տեղում է։ Խիստ աստիճանավորումը թույլ չի տա ձեզ շփոթվել։ Միակ դժվարությունը
  առաջին անգամ կլինի բոլորը փորձելու ցանկությունը:
• Յուրաքանչյուր սլայդի փոփոխականության վերահսկում - բլոկների պլանավորված ցուցադրում համակարգչի, պլանշետի և հեռախոսի էկրանին
  ցուցադրված է տեսողական խմբագրում: Դուք կարող եք փոխել սլայդների չափերը անհատապես յուրաքանչյուր սարքի համար:
  Պատասխանող ձևանմուշը թույլ չի տա, որ նկարներն ու տեսանյութերը խեղաթյուրվեն կամ ավելի շատ տեղ գրավեն, քան պահանջվում է
  հարմար դիտում.
• Աշխատեք սոցիալական ցանցերի և վիդեոհոսթինգի հետ - Slider Revolution հինգերորդ սերունդը թույլ է տալիս ներառել սլայդերի մեջ
  տվյալները Instagramm-ից, Facebook-ից, Flickr-ից, Twitter-ից, Vimeo-ից և Youtube-ից: Եթե ​​դուք նախատեսում եք տեղադրել տեսանյութը ինքնուրույն
  սերվեր, կարող եք օգտագործել HTML5 լեզուն: Կոդի մասերը կգրվեն ավտոմատ կերպով:
• Բարձր կատարողականություն և սլայդների օպտիմիզացում. հավելվածն արագ է աշխատում խմբագրման ռեժիմում և նվազեցնում է
  սլայդերի քաշը՝ առանց բովանդակության որակի կորստի: Դուք չպետք է անհանգստանաք էջի բեռնման երկար ժամանակի մասին: Ինչն է հատկապես
  համապատասխան բջջային սարքերի հետ կապված, որոնք անհասանելի են WiFi կապերի համար:
• Հսկայական թվով հատուկ էֆեկտներ սլայդների անցման ժամանակ
• Շատ անիմացիոն էֆեկտներ տեքստ, տեսանյութ և նկարներ ցուցադրելիս
• Կայքը բացելիս ինքնաբերաբար սկսելով տեսանյութը կամ ձեռքով, ընտրելու համար, տեսանյութը դիտելիս սահիչը կանգնեցնելով,
  հետ փաթաթել և այլն:
• Նավիգացիոն կարգավորումների մեծ ընտրություն
• Տեղադրեք գրառումների հայտարարությունները հղումներով անմիջապես սահիկի մեջ, մինչդեռ այն կազմաձևված է SEO-ի օպտիմալացման համար
• Google Fonts-ի աջակցություն և տեղադրում
• Օգտագործելով բազմաթիվ շերտեր (նկարներ, տեսանյութեր, ենթագրեր և հղումներ) մեկ սլայդում, դրանք անհամար են
  ծածկել միմյանց՝ այդպիսով ստեղծելով իրատեսական տեսանյութ կամ որևէ ներկայացում:

Ուշադրություն.Առցանց պրեմիում սլայդերի կաղապարներ և գրադարանային օբյեկտներ ներբեռնելու համար անհրաժեշտ է ThemePunch-ից գնել առանձին լիցենզիա, որն այս տեքստը գրելու պահին արժե 19 դոլար, այնուհետև ակտիվացնել այն՝ մուտքագրելով գնման կոդը նշված դաշտում։ ստորև բերված նկարում:

Տեսանյութի վերանայում modSliderRevolution

Այսօր մենք կանդրադառնանք, թե ինչպես կարելի է ստեղծել Bootstrap slider օգտագործելով MIGX: Նախքան ուսումնասիրությունը սկսելը, խորհուրդ եմ տալիս նախ այցելել այս մեկը:

MIGX կոնֆիգուրացիայի ստեղծում

Ես գնում եմ կառավարման MIGXև ավելացրեք նոր տարր անունով սահիչ, փոխարինման դաշտում գրել « Ավելացնել Սլայդներ«և գնացեք ներդիր» Ձևաչափեր».

• Դաշտի անվանումը՝ վերնագիր, վերնագիր՝ վերնագիր:
• Դաշտի անվանումը՝ սլայդ, վերնագիր՝ սլայդ, մուտքային հեռուստացույցի տեսակը՝ պատկեր:
• Դաշտի անվանում - նկարագրություն, վերնագիր - նկարագրություն:
• Դաշտի անուն - idstranici, վերնագիր - Նշեք փաստաթղթի ID-ն, որին կապվելու է:

• Վերնագիր - վերնագիր, դաշտ - վերնագիր:
• Վերնագիր - Սլայդ, Դաշտ - սլայդ, Պատկերող - this.renderImage:
• Վերնագիր - Նկարագրություն, Դաշտ - նկարագրություն:
• Վերնագիր - փաստաթղթի id, դաշտ - idpage:

Նշում:Ըստ էության, մենք տարրեր ենք փոխանցում Formtabs-ից։ Այո, կարող եք նաև լրացնել դաշտերը Սյունակի լայնությունը՝ սյունակների լայնությունը։

Պահպանել (կատարել):

Նրանց համար, ովքեր ընդհանրապես չեն ցանկանում լողանալ, մենք ստեղծում ենք դատարկ կոնֆիգուրացիա և դրա մեջ արտահանում հետևյալ կոդը.

("formtabs":[ ( "MIGX_id":1, "վերնագիր":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0430\u0430\u0430\u04, tab. ", "print_before_tabs" ":"0", "fields":[ ( "MIGX_id":1, "field":"title", "վերնագիր":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432 \u043e\u043a" , "նկարագրություն":"\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u043b\u043b\u04_9" description: , "inputTV": "", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "display":"", "sourceFrom":"config" , "sources": "", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":1 ), ( "MIGX_id":2, "field":"slide ", "վերնագիր" :"\u0421\u043b\u0430\u0439\u0434", "description":"", "description_is_code":"0", "inputTV":"", "inputTVtype":"image", " վավերացում»։ լռելյայն":"" , "useDefaultIfEmpty":"0", "pos" :2 ), ("MIGX_id":3, "դաշտ":"նկարագրություն", "վերնագիր":"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "նկարագրություն":"", " description_is_code":"0", "inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "ցուցադրել":"", " sourceFrom":"config", "sources":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":3 ), ( "MIGX_id":4, "field":"idstranici", "վերնագիր":"\u0423\u043a\u0430\u0436\u0438\u0442\u0435 id \u0434\u043e\u043a\u0443\u043c\u040u043c\u0443 "description" inputTV":"", "inputTVtype":"", "validation":"", "configs":"", "restrictive_condition":"", "ցուցադրել":"", "sourceFrom":"config", " աղբյուրներ":"", "inputOptionValues":"", "default":"", "useDefaultIfEmpty":"0", "pos":4 ) ], "pos":1 ) ], "contextmenus":"" , "actionbuttons":"", "columnbutton s":"", "ֆիլտրեր":"", "ընդլայնված":( "migx_add":"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u044\u0430\u0430 u044b", "disable_add_item":"", "add_items_directly":"", "formcaption":"", "update_win_title":"", "win_id":"", "maxRecords":"", "addNewItemAt":" bottom", "media_source_id":"", "multiple_formtabs":"", "multiple_formtabs_label":"", "multiple_formtabs_field":"", "multiple_formtabs_optionstext":"", "multiple_formtabs_optionsvalue":"", "actionbuttonsperrow": , "winbuttonslist":"", "extrahandlers":"", "filtersperrow":4, "packageName":"", "classname":"", "task":"", "getlistsort":"", " getlistsortdir":"", "sortconfig":"", "gridpagesize":"", "use_custom_prefix":"0", "prefix":"", "grid":"", "gridload_mode":1, "check_resid": ":1, "check_resid_TV":"", "join_alias":"", "has_jointable":"yes", "getlistwhere":"", "joins":"", "hooksnippets":"", "cmpmaincaption" :"", "cmptabcaption":"", "cmptabdescription":"", "cmptabcontroller":"", "winbuttons" ":"", "onsubmitsuccess":"", "submitparams":"" ), "columns":[ ( "MIGX_id":1, "header":"\u0417\u0430\u0433\u043e\u043b\u043e\ u0432\u043e\u043a", "dataIndex":"header", "width":100, "sortable":"false", "show_in_grid":1, "customrenderer":"", "Renderer":"", " clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( "MIGX_id":2, "header":"\u0421\ u043b\u0430\u0439\u0434", "dataIndex":"slide", "width":100, "sortable":"false", "show_in_grid":1, "customrenderer":"", "renderer":"սա .renderImage", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ), ( "MIGX_id":3, "header" :"\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435", "dataIndex":"description", "width":200, "sortable":"false", "show_in_customrender":1, ":"", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "խմբագիր":"" ), ( " MIGX_id":4, "header":"id \u0434\u043 e\u043a\u0443\u043c\u0435\u043d\u0442\u0430", "dataIndex":"idstranici", "width":50, "sortable":"false", "show_in_grid":1, "customrenderer": ", "renderer":"", "clickaction":"", "selectorconfig":"", "renderchunktpl":"", "renderoptions":"", "editor":"" ) ], "category": «»)

Հեռուստացույցի ստեղծում MIGX կոնֆիգուրացիայով

MODX ծառի վրա, « Տարրեր», սեղմել + կետին հակառակ Լրացուցիչ դաշտեր« և մուտքագրեք հետևյալը.

• «Անուն» - սահիկ; «Ստորագրություն» - Slider.
• «Input Options» ներդիրում «Input Type» ընտրեք migx, իսկ «Configurations» դաշտում մուտքագրեք սահիչ.
• «Հասանելի է կաղապարների համար» ներդիրում ընտրեք այն ձևանմուշները, որոնց համար այս դաշտում մուտքագրումը հասանելի կլինի:

Տվյալների մուտքագրում

Եկեք բացենք փաստաթուղթ, որի համար սլայդերի դաշտը նշանակված է MIGX-ով կոնֆիգուրացիայով և մուտքագրենք որոշ տվյալներ դրա մեջ:

Bootstrap 3 կարուսելային ելք դեպի էջ

Մենք ունենք ստանդարտ Html նշագրում getbootstrap.com/docs/3.3/javascript/#carousel-examples, վերափոխեք այն MIGX-ի համար և կաղապարի անհրաժեշտ տեղում գրեք հետևյալ կոդը.

Եվ ստեղծեք կտորներ.

tplsliderՑուցանիշ:

և կտոր tplslider Նյութհետևյալ բովանդակությամբ.

Bootstrap 4 կարուսելի թողարկում մեկ էջի համար

Ինչպես նախորդ դեպքում, մենք վերցնում ենք ստանդարտ նշումը getbootstrap.com/docs/4.1/components/carousel/և կրկնել այն, արդյունքում մենք ստանում ենք

Որտեղ է կտորը tplsliderՑուցանիշունի հետևյալ կոդը.

և կտոր tplslider Նյութհետևյալ ծածկագրով.