Carousel

A carousel is used to enclose a set of (typically) images, providing controls to move slides back-and-forth.

# S3 method for bsplus_carousel
bs_append(tag, content, caption = NULL, ...)

bs_carousel(id, use_indicators = FALSE, use_controls = TRUE)

Arguments

tag

htmltools::[tag][htmltools::tag], carousel <div/> to which to append a panel

content

character (HTML) or htmltools::[tagList][htmltools::tagList], content for the slide

caption

character (HTML) or htmltools::[tagList][htmltools::tagList], caption for the slide

...

other args (not used)

id

character, unique id for accordion <div/>, also serves as root id for slides appended using bs_append()

use_indicators

logical, denotes use of slide-position indicators (dots)

use_controls

logical, denotes use of controls (chevrons at sides)

Value

bsplus_carousel object (htmltools::[tag][htmltools::tag], <div/>)

Details

All of these functions return a bsplus_carousel object (which is also an htmltools::[tag][htmltools::tag], <div/>), so you can compose a carousel by piping. There are two parts to this system:

1. A constructor function for the carousel, bs_carousel()

2. A function to append a slide to the carousel, bs_append()

The verb append is used to signify that you can append an arbitrary number of slides to a carousel.

For the constructor, bs_carousel(), it is your responsibility to ensure that id is unique among HTML elements in your page. If you have non-unique id's, strange things may happen to your page.

See also

https://getbootstrap.com/docs/3.3/javascript/#carousel, bs_carousel_image(), bs_carousel_caption()

Examples

bs_carousel(id = "with_the_beatles") %>%
  bs_append(content = bs_carousel_image(src = "img/john.jpg")) %>%
  bs_append(content = bs_carousel_image(src = "img/paul.jpg")) %>%
  bs_append(content = bs_carousel_image(src = "img/george.jpg")) %>%
  bs_append(content = bs_carousel_image(src = "img/ringo.jpg"))
#> <div id="with_the_beatles" class="carousel slide" data-ride="carousel">
#>   <div class="carousel-inner" role="listbox">
#>     <div class="item active">
#>       <img src="img/john.jpg" class="img-responsive center-block"/>
#>     </div>
#>     <div class="item">
#>       <img src="img/paul.jpg" class="img-responsive center-block"/>
#>     </div>
#>     <div class="item">
#>       <img src="img/george.jpg" class="img-responsive center-block"/>
#>     </div>
#>     <div class="item">
#>       <img src="img/ringo.jpg" class="img-responsive center-block"/>
#>     </div>
#>   </div>
#>   <a class="left carousel-control" href="#with_the_beatles" role="button" data-slide="prev">
#>     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
#>     <span class="sr-only">Previous</span>
#>   </a>
#>   <a class="right carousel-control" href="#with_the_beatles" role="button" data-slide="next">
#>     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
#>     <span class="sr-only">Next</span>
#>   </a>
#> </div>