Your search did not match any results.
Gallery

Overview

Documentation
The Gallery is a widget that displays a collection of images in a carousel. The widget is supplied with various navigation controls that allow a user to switch between images.
@model DevExtreme.MVC.Demos.ViewModels.GalleryViewModel <div class="gallery-container"> @(Html.DevExtreme().Gallery() .ID("gallery") .DataSource(Model.Images) .Height(300) .Loop(true) .SlideshowDelay(2000) .ShowIndicator(true) ) </div> <div class="options"> @(Html.DevExtreme().CheckBox() .Value(true) .Text("Loop mode") .OnValueChanged("loopMode_changed") .ElementAttr(new Dictionary<string, object> { { "class", "option" }}) ) @(Html.DevExtreme().CheckBox() .Value(true) .Text("Slide show") .OnValueChanged("slideshowDelay_changed") .ElementAttr(new Dictionary<string, object> { { "class", "option" } }) ) @(Html.DevExtreme().CheckBox() .Value(true) .Text("Navigation buttons") .OnValueChanged("showNavigationButtons") .ElementAttr(new Dictionary<string, object> { { "class", "option" } }) ) @(Html.DevExtreme().CheckBox() .Value(true) .Text("Indicator") .OnValueChanged("showIndicator") .ElementAttr(new Dictionary<string, object> { { "class", "option" } }) ) </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.ViewModels; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class GalleryController : Controller { public ActionResult Overview() { var images = new List<string>(); foreach(var i in Enumerable.Range(1, 9)) images.Add(Url.Content(String.Format("~/Content/Images/Gallery/{0}.jpg", i))); return View(new GalleryViewModel { Images = images }); } } }
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.MVC.Demos.ViewModels { public class GalleryViewModel { public IEnumerable<string> Images { get; set; } } }
.gallery-container { display: inline-block; margin-bottom: 10px; width: 100%; max-width: 450px; } #gallery { margin: auto; } .options { display: inline-block; vertical-align: top; margin-left: 10px; } .option { display: block; margin-bottom: 5px; }