گالری عکس jQuery Carousel با استفاده از Image Slider در MVC

ما در این مقاله با یک مثال، نحوه پیاده سازی گالری عکس jQuery Carousel را با استفاده از Image Slider و با کمک پلاگین jQuery jCarousel در ASP.Net MVC پیاده سازی و توضیح خواهیم داد.

گالری عکس jQuery Carousel با استفاده از Image Slider در MVC

کنترلر

کنترلر شامل اکشن متد زیر می باشد:

یک اکشن متد باید برای رسیدگی به عملیات از نوع Get وجود داشته باشد که در آن یک جنریک لیست از نوع string ساخته شود.

که این جنریک لیست شامل فهرستی از آدرس استاتیک عکس ها می باشد که این فهرست در نهایت هنگام فراخوانی View به آن ارسال داده خواهد شد.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        List<string> images = new List<string>();
        images.Add("https://static.flickr.com/66/199481236_dc98b5abb3_s.jpg");
        images.Add("https://static.flickr.com/75/199481072_b4a0d09597_s.jpg");
        images.Add("https://static.flickr.com/57/199481087_33ae73a8de_s.jpg");
        images.Add("https://static.flickr.com/77/199481108_4359e6b971_s.jpg");
        images.Add("https://static.flickr.com/58/199481143_3c148d9dd3_s.jpg");
        images.Add("https://static.flickr.com/72/199481203_ad4cdcf109_s.jpg");
        images.Add("https://static.flickr.com/58/199481218_264ce20da0_s.jpg");
        images.Add("https://static.flickr.com/69/199481255_fdfe885f87_s.jpg");
        images.Add("https://static.flickr.com/60/199480111_87d4cb3e38_s.jpg");
        images.Add("https://static.flickr.com/70/229228324_08223b70fa_s.jpg");
 
        return View(images);
    }
}

در داخل View یک مدل از نوع string به صورت IEnumerable تعریف میکنیم.

یک حلقه بر روی مدل اجرا میشود تا یک لیست از نوع Unordered در Html ایجاد کند که هر ایتم شامل یک عنصر Image در Html  باشد و نیز در داخل Value این عناصر آدرس عکس ها را قرار می دهیم.

در نهایت ، در داخل اداره کننده رویداد document ready جی کوئری پلاگین  jQuery jCarousel را در داخل عناصر لیست پیاده سازی می کنیم.

@model IEnumerable<string>
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <ul id="mycarousel" class="jcarousel-skin-tango">
        @foreach (string image in Model)
        {
            <li>
                <img alt=""style='height: 75px; width: 75px' src='@image'/>
            </li>
        }
    </ul>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jcarousel/0.2.8/jquery.jcarousel.min.js"></script>
    <link href="https://cdn.jsdelivr.net/jcarousel/0.2.8/skins/tango/skin.css" rel="Stylesheet"/>
    <script type="text/javascript">
    $(function () {
        $('#mycarousel').jcarousel();
    });
    </script>
</body>
</html>

دانلود فایل های ضمیمه مخصوص اعضای سایت می باشد !
کاربر مهمان! جهت دانلود و استفاده از امکانات سایت لطفا وارد سایت شوید و یا ثبت نام کنید