Gallery ▸ Overview

@model DevExtreme.MVC.Demos.ViewModels.GalleryViewModel

<div class="widget-container">
    @(Html.DevExtreme().Gallery()
        .ID("gallery")
        .DataSource(Model.Images)
        .Height(300)
        .Loop(true)
        .SlideshowDelay(2000)
        .ShowNavButtons(true)
        .ShowIndicator(true)
    )
</div>
<div class="options">
    <div class="caption">Options</div>
    <div class="option">
        @(Html.DevExtreme().CheckBox()
            .Value(true)
            .Text("Loop mode")
            .OnValueChanged("loopMode_changed")
        )
    </div>
    <div class="option">
        @(Html.DevExtreme().CheckBox()
            .Value(true)
            .Text("Slide show")
            .OnValueChanged("slideshowDelay_changed")
        )
    </div>
    <div class="option">
        @(Html.DevExtreme().CheckBox()
            .Value(true)
            .Text("Navigation buttons")
            .OnValueChanged("showNavigationButtons")
        )
    </div>
    <div class="option">
        @(Html.DevExtreme().CheckBox()
            .Value(true)
            .Text("Indicator")
            .OnValueChanged("showIndicator")
        )
    </div>
</div>

<script>
    function getGalleryInstance() {
        return $("#gallery").dxGallery("instance");
    }

    function loopMode_changed(data) {
        getGalleryInstance().option("loop", data.value);
    }

    function slideshowDelay_changed(data) {
        getGalleryInstance().option("slideshowDelay", data.value ? 2000 : 0);
    }

    function showNavigationButtons(data) {
        getGalleryInstance().option("showNavButtons", data.value);
    }

    function showIndicator(data) {
        getGalleryInstance().option("showIndicator", data.value);
    }
</script>

using DevExtreme.MVC.Demos.Models.SampleData;
using DevExtreme.MVC.Demos.ViewModels;
using System;
using System.Linq;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class GalleryController : Controller {

        public ActionResult Overview() {
            var images = Enumerable.Range(1, 9).Select(i =>
                new ImageItem {
                    imageSrc = Url.Content(String.Format("~/Content/Images/Gallery/{0}.jpg", i)),
                    imageAlt = String.Format("Image {0}", i)
                }
            ).ToList();

            return View(new GalleryViewModel { Images = images });
        }

    }
}

using System;
using System.Collections.Generic;
using System.Linq;

namespace DevExtreme.MVC.Demos.ViewModels {
    public class ImageItem {
        public string imageSrc { get; set; }
        public string imageAlt { get; set; }
    }

    public class GalleryViewModel {
        public IEnumerable<ImageItem> Images { get; set; }
    }
}

.widget-container {
    margin-right: 240px;
}

#gallery {
    margin: auto;
    max-width: 450px;
}

.options {
    padding: 20px;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 180px;
    top: 0;
    background-color: rgba(191, 191, 191, 0.15);
}

.caption {
    font-size: 18px;
    font-weight: 500;
}

.option {
    margin-top: 10px;
}