Gallery - Overview

The Gallery is a UI component that displays a collection of images in a carousel. The component is supplied with various navigation controls that allow a user to switch between images.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

@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; }