dynamic ရုပ်ပုံများနှင့် php နှင့်အတူ slideshows ဖန်တီးရန်လမ်းညွှန်

ရုပ်ပုံ carousel ၏အခြေခံစာမျက်နှာဖွဲ့စည်းပုံကိုအကောင်အထည်ဖော်ပါ

ပုံရိပ် carousel အင်္ဂါရပ်ကိုမတည်ဆောက်မီပထမအဆင့်မှာ၎င်း၏ HTML ဖွဲ့စည်းပုံကိုဒီဇိုင်းဆွဲရန်ဖြစ်သည်။ ကျွန်ုပ်တို့သည်များသောအားဖြင့် carousel အတွက်ကွန်တိန်နာတစ်ခုတပ်ဆင်ထားပြီးကလေးသူငယ်များမှပုံများအားလုံးတွင်အသိုက်ကိုတပ်ဆင်ထားသည်။ ဤတွင်ဖွဲ့စည်းတည်ဆောက်ပုံဆိုင်ရာဥပမာတစ်ခုဖြစ်သည်။

<div class="slider-container">
  <div class="slides">
    <!-- ပုံဒြပ်စင်ဖြစ်လိမ့်မည် PHP တက်ကြွသောမျိုးဆက် -->
  </div>
</div>

Style Beautification Carousel အစိတ်အပိုင်းကိုထည့်ပါ

စာမျက်နှာပေါ်ရှိ carousel ရုပ်ပုံကိုကောင်းစွာပုံဖော်နိုင်ရန်အတွက်ကွန်တိန်နာအရွယ်အစား, zoom နှင့် layout ကိုသတ်မှတ်ရန် CSS ရေးရန်လိုအပ်သည်။

.Slider-container {
  အကျယ်: 600px;
  အမြင့်: 400px;
  အနေအထား - ဆွေမျိုး,
  လျှံ: ဝှက်ထားသော;
}

.Slides {
  WIDTH: 100%;
  အမြင့်: 100%;
  ပြသ: flex;
}

.Slides img {
  WIDTH: 100%;
  အမြင့်: 100%;
  အရာဝတ်ထု - မထိုက်မတန်: အဖုံး;
}

PHP နှင့်အတူပုံရိပ်စာရင်းကို dynamically ထုတ်ပေး

carousels ရှိပုံများသည်များသောအားဖြင့်ဆာဗာဘက်မှများသောအားဖြင့် PHP ကိုအသုံးပြုသည်။ အောက်ဖော်ပြပါသည်၎င်းကိုအကောင်အထည်ဖော်ရန်ဖြစ်သည်။

<?php
$images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

echo '<div class="slider-container"> &#39;&#39;;
ပဲ့တင်သံ<div class="slides"> &#39;&#39;;
foreach ($ image အဖြစ် $ images) {
  ပဲ့တင်သံ<img src="' . $image . '" alt="လေှျာ"> &#39;&#39;;
}
ပဲ့တင်သံ</div> &#39;&#39;;
ပဲ့တင်သံ</div> &#39;&#39;;
>

အထက်ဖော်ပြပါကုဒ်များသည် $ Images Array ရှိဖိုင်လမ်းကြောင်းပေါ် မူတည်. အလိုအလျောက်ထုတ်ပေးလိမ့်မည် ဒြပ်စင်။

carousel ကာတွန်းသက်ရောက်မှုများကိုထည့်ရန် swiper.js ကိုသုံးပါ

နောက်တစ်ခုက sloding နဲ့ autoplay ကို carousel ကိုထည့်လိုက်တယ်။ swiper ကဲ့သို့သောရင့်ကျက်သော JavaScript carousel စာကြည့်တိုက်ကိုအသုံးပြုနိုင်သည်။ SWIFTER ၏ JS script ကို HTML တွင်ပထမဆုံးမိတ်ဆက်ပါ။

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

ထို့နောက် swiper carousel ယုတ္တိဗေဒကို loop scrolling လုပ်ခြင်းနှင့်အလိုအလျောက် switching ကိုထောက်ပံ့ရန်အစပြုပါ။

<script>
var mySwiper = new Swiper('.slider-container', {
  loop: true,
  autoplay: {
    delay: 3000,
  },
});
</script>

အကျဉ်းချုပ်

HTML စာမျက်နှာဖွဲ့စည်းပုံကိုပေါင်းစပ်ခြင်းအားဖြင့် CSS style, php dynamic output နှင့် Javascript Antsation Logic ကိုပေါင်းစပ်ခြင်းအားဖြင့်ကျွန်ုပ်တို့သည်အလွန်အမင်းအပြန်အလှန်ဆက်သွယ်နိုင်ပြီးပြောင်းလဲနေသောရုပ်ပုံ carousel စနစ်ကိုတည်ဆောက်နိုင်သည်။ ဤလုပ်ဆောင်မှုသည်ကော်ပိုရိတ်တရားဝင်ဝက်ဘ်ဆိုက်များ, အလုပ်ပြသမှုများ, အဖြစ်အပျက်များစသည့်စာမျက်နှာများကဲ့သို့သောစာမျက်နှာများပေါ်တွင်အသုံးပြုရန်အလွန်သင့်လျော်သည်။