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

​x
 
@model DevExtreme.NETCore.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>​

xxxxxxxxxx
 
using DevExtreme.NETCore.Demos.Models.SampleData;using DevExtreme.NETCore.Demos.ViewModels;using Microsoft.AspNetCore.Mvc;using System;using System.Collections.Generic;using System.Linq;​namespace DevExtreme.NETCore.Demos.Controllers {    public class GalleryController : Controller {        public ActionResult Overview() {            var images = Enumerable.Range(1, 9).Select(i =>                new ImageItem {                    imageSrc = Url.Content(String.Format("~/images/Gallery/{0}.jpg", i)),                    imageAlt = String.Format("Image {0}", i)                }            ).ToList();​            return View(new GalleryViewModel { Images = images });        }    }}

xxxxxxxxxx
 
using System;using System.Collections.Generic;using System.Linq;​namespace DevExtreme.NETCore.Demos.ViewModels {    public class ImageItem {        public string imageSrc { get; set; }        public string imageAlt { get; set; }    }​    public class GalleryViewModel {        public IEnumerable<ImageItem> Images { get; set; }    }}​

xxxxxxxxxx
 
.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;}