Carousel
in namespace DotVVM.Framework.Controls.Bootstrap
Renders a Bootstrap carousel widget.
Usage & Scenarios
Renders a Bootstrap carousel widget.
Sample 1: Basic Carousel
Carousel images have to be placed inside the SlidesTemplate
property. It is a control default property so you can place the <bs:CarouselItem>
elements directly
inside the <bs:Carousel>
control. Each image is defined using the CarouselItem
control.
The CarouselItem
has the IsActive
that specifies which image will be displayed first.
<div style="height: 428px; width: 640px;">
<bs:Carousel>
<SlidesTemplate>
<bs:CarouselItem IsActive="true">
<bs:Image ImageUrl="~/Images/LA.jpg" />
</bs:CarouselItem>
<bs:CarouselItem>
<bs:Image ImageUrl="~/Images/NY.jpg" />
</bs:CarouselItem>
<bs:CarouselItem>
<bs:Image ImageUrl="~/Images/Miami.jpg" />
</bs:CarouselItem>
</SlidesTemplate>
</bs:Carousel>
</div>
Sample 2: Carousel Settings
The Carousel
control has the following properties:
The
RenderSideControls
property specifies whether the left and right controls which switch the slides will be rendered.The
EnableAnimation
property specifies whether the transitions between slides are animated or not.The
AutoSlideInterval
property sets the interval of automatic transitions in seconds. If this property is not set, the user has to switch the slides manually.
<div style="height: 428px; width: 640px;">
<bs:Carousel RenderSideControls="false" EnableAnimation="false" AutoSlideInterval="3">
<bs:CarouselItem IsActive="true">
<bs:Image ImageUrl="~/Images/LA.jpg" />
</bs:CarouselItem>
<bs:CarouselItem>
<bs:Image ImageUrl="~/Images/NY.jpg" />
</bs:CarouselItem>
<bs:CarouselItem>
<bs:Image ImageUrl="~/Images/Miami.jpg" />
</bs:CarouselItem>
</bs:Carousel>
</div>
Sample 3: Side Controls
The RightControlTemplate
and LeftControlTemplate
you can specify your own buttons which will used instead the default ones.
<div style="height: 428px; width: 640px;">
<bs:Carousel>
<SlidesTemplate>
<bs:CarouselItem IsActive="true">
<bs:Image ImageUrl="~/Images/LA.jpg" />
</bs:CarouselItem>
<bs:CarouselItem>
<bs:Image ImageUrl="~/Images/NY.jpg" />
</bs:CarouselItem>
<bs:CarouselItem>
<bs:Image ImageUrl="~/Images/Miami.jpg" />
</bs:CarouselItem>
</SlidesTemplate>
<RightControlTemplate>
<span class="glyphicon glyphicon-hand-right" aria-hidden="true"></span>
</RightControlTemplate>
<LeftControlTemplate>
<span class="glyphicon glyphicon-hand-left" aria-hidden="true"></span>
</LeftControlTemplate>
</bs:Carousel>
</div>
Sample 4: Captions
The Caption
or the CaptionTemplate
properties can be used to set description of the image.
<div style="height: 428px; width: 640px;">
<bs:Carousel>
<bs:CarouselItem>
<CaptionTemplate>
<h1>Los Angeles</h1>
<p>On of the most beautiful cities on the west coast.</p>
</CaptionTemplate>
<bs:Image ImageUrl="~/Images/LA.jpg" />
</bs:CarouselItem>
<bs:CarouselItem Caption="{value: Caption}">
<bs:Image ImageUrl="~/Images/NY.jpg" />
</bs:CarouselItem>
</bs:Carousel>
</div>
using DotVVM.Framework.ViewModel;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace DotvvmWeb.Views.Docs.Controls.bootstrap.Carousel.sample4
{
public class ViewModel : DotvvmViewModelBase
{
public string Caption { get; set; } = "New York";
}
}
Sample 5: Carousel Data-binding
The Carousel
slides can also be loaded from a collection in the viewmodel. Use the DataSource
property to specify the source collection.
Then use the ImageUrlBinding
to specify which property of the collection item will be used as the URL of the image.
Similarly, the CaptionBinding
property can specify which property will be the slide caption, and finally the IsActiveBinding
specifies which of the slides will be displayed first.
<div style="height: 428px; width: 640px;">
<bs:Carousel DataSource="{value: Images}"
ImageUrlBinding="{value: URL}"
CaptionBinding="{value: Caption}"
IsActiveBinding="{value: Active}"/>
</div>
using DotVVM.Framework.ViewModel;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace DotvvmWeb.Views.Docs.Controls.bootstrap.Carousel.sample5
{
public class ViewModel : DotvvmViewModelBase
{
public ImageData[] Images { get; set; } = new[]
{
new ImageData("/Images/LA.jpg", "Los Angeles"),
new ImageData("/Images/NY.jpg", "New York", true),
new ImageData("/Images/Miami.jpg", "Miami")
};
}
public class ImageData
{
public ImageData()
{
}
public ImageData(string url, string caption, bool active = false)
{
Active = active;
URL = url;
Caption = caption;
}
public string Caption { get; set; }
public bool Active { get; set; }
public string URL { get; set; }
}
}
Properties
Name | Type | Description | Notes | Default Value | |
---|---|---|---|---|---|
Attributes | Dictionary<String,Object> |
attribute
static value
|
null | ||
AutoSlideInterval | Int32? | Gets or sets interval (in seconds) of changing slides. |
attribute
static value
|
null | |
CaptionBinding | IValueBinding | Gets or sets a value binding that points to a property that contains the image caption. |
attribute
bindable
|
null | |
CaptionTemplateBinding | IValueBinding | Gets or sets a value binding that points to a property that contains the image caption HTML. |
attribute
bindable
|
null | |
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static | |
DataContext | Object | Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. |
attribute
static value
bindable
|
null | |
DataSource | Object | Gets or sets the source collection or a GridViewDataSet that contains data in the control. |
attribute
bindable
|
null | |
EnableAnimation | Boolean | Gets or sets whether the transitions between the slides should be animated or not. |
attribute
static value
|
True | |
ID | String | Gets or sets the unique control ID. |
attribute
static value
bindable
|
null | |
ImageUrlBinding | IValueBinding | Gets or sets a value binding that points to a property that contains the URL of the image. |
attribute
bindable
|
null | |
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True | |
InnerText | String | Gets or sets the inner text of the HTML element. |
attribute
static value
bindable
|
null | |
IsActiveBinding | IValueBinding | Gets or sets a value binding that points to a property indicating whether the item is active or not. |
attribute
bindable
|
null | |
LeftControlTemplate | ITemplate | Gets or sets the template for the "move left" control. |
inner element
static value
|
null | |
RenderIndicators | Boolean | Gets or sets whether the dots indicating the current slide will be rendered. |
attribute
static value
|
True | |
RenderSideControls | Boolean | Gets or sets whether the controls for changing the slides will be rendered. |
attribute
static value
|
True | |
RightControlTemplate | ITemplate | Gets or sets the template for the "move right" button. |
inner element
static value
|
null | |
SlidesTemplate | ITemplate | Gets or sets the template of the individual slides inside the control. |
inner element
static value
default
|
null | |
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
True |