Krobbins.com

Bootstrap Carousel

10/15/2016

In this article we will use the default bootstrap.css Carousel and modify it slightly to your theme. In this case we will use blue and gray base colors that one might use for a theme such as the Bootstrap Cerulean theme. Before we start, let's have a little refresher on what some of the items we will be working with are and what they do. As always we will be working in Visual Studio.

>Note: This article relies on Bootstrap style sheets and JavaScript being installed on your web site or project although you can use what you need as you see fit. You can download Bootstrap's individual carousel.js file and write your own CSS or let Bootstrap do the heavy lifting for you by downloading Bootstrap 4. This website and many of the examples here use Bootstrap 3.3 which is still available. Another option would be to get the Carousel running and then learn about the CSS by playing with it.

Bootstrap is what's known as a front end framework. It became very popular with developers over the past few years due to the need for rapid development of web applications that scale well between computers, tablets, and phones. Scaling is the ability of an application to look good and scale properly on a big computer screen, a small smart phone screen, or anything in between. Boostrap uses CSS and JavaScript to position and manipulate elements of HTML, like a <div> on a web page.

JavaScript is a high-level programming language (sometimes referred to as a scripting language) and is considered, along with HTML and CSS as one of the three core technologies for the World Wide Web production of content. JavaScript can be included on the web page or in a separate file that the page or web site has a reference to.

CSS stands for Cascading Style Sheets and is the language that describes how the elements on a web page will look. If you created your website with a Visual Studio template, you are probably using Bootstrap CSS. The style sheet files are in the Content folder of your project or solution, but CSS can also be included on individual pages and even separate elements. CSS is used to give your web site a consistent look and feel or theme across the entire web site. See my sidebar for links to download other Bootstrap themes. This website currently uses a modified version of the Readable theme from Thomas Park at http://bootswatch.com.

Cascading refers to the precedence of styles and how they have a cascading effect.

The precedence of CSS is as follows. They are listed in order of occurrence (1-4), but order of precedence is the reverse. :

Browser - all browsers have a default style for all pages opened in the browser.
External - CSS file outside the page, such as the bootstrap.css file in the Content folder. Applies to the web site.
Internal - CSS written within the <head> area of a page and applies to everything on that page.
Inline - CSS added to a tag or element and applies to only that element.

HTML is the basic text language of the web. Browsers like Firefox and Chrome read HTML, CSS, JavaScript and other languages and turn the code into not only readable, but hopefully beautiful web pages. HTML stands for Hyper-Text Markup Language.

All HTML, CSS, JavaScrip files are actually plain text files that use markup, constructors, elements, and other plain text items to communicate with a browser.

The <DIV> is a tag or an element of HTML. Tags or elements are enclosed in less than (<) and greater than (>) brackets and define and hold text, images and/or other elements and render them on a web page. The <DIV> element is usually used as a container that holds other elements. We can change the appearance of an element like a <DIV> by assigning Styles to it.

Since there are so many tutorials on creating the Bootstrap Carousel, I just have the code from w3schools.com which I modified slightly. There are two entries on the sidebar for the two best tutorials on the web regarding this.

Carousels are also called sliders or image sliders.

In the HTML example below, the only changes to the default Bootstrap Carousel I have made are changing the data-interval so slides advance every 4 seconds and adding a solid, gray, 1 pixel wide border with a 3 pixel radius on the corners. If you add a radius, about 3 pixels is the maximum. A greater radius will cause background items, which have no radius, to appear producing an undesired effect.

Code

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000" data-pause="hover" style="border:solid; border-color:#033769; border-width:1px; border-radius: 2px">
	
<!-- Indicators -->
<ol class="carousel-indicators">
	<li data-target="#myCarousel" data-slide-to="0" class="active">/li>
	<li data-target="#myCarousel" data-slide-to="1">/li>
	<li data-target="#myCarousel" data-slide-to="2">/li>
</ol>
	
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
	<div class="item active">
	    <img src="#" alt="Alternate Text" height="360" width="270">
	    <div class="carousel-caption">
	        <p>Caption text</p>
	    </div>
	</div>
	
	<div class="item">
	    <img src="#" alt="Alternate Text" height="360" width="270">
	    <div class="carousel-caption">
	        <p>Caption text</p>
	    </div>
	</div>
	
	<div class="item">
	    <img src="#" alt="Alternate Text" height="360" width="270">
	    <div class="carousel-caption">
	        <p>Caption text</p>
	    </div>
	</div>
</div>
	
<!--Left and right side controls-->
	
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
	<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	<span class="sr-only">Next</span>
</a>
	
   </div>

If you have Bootstrap installed, it will be necessary to add some CSS to the web page to overwrite the bootstrap.css file that determines styles for the site. This little addition will keep the image in the center of the carousel. If you have an HTML web page the CSS below goes in the HEAD area. For an ASP.net page it goes below the ASP:Content tag.

Internal CSS

<style>
   .carousel-inner > .item > img,
   .carousel-inner > .item > a > img {
       width: auto;
       height: auto;
       margin: auto;
        }
</style>

At this point you should have a working Bootstrap Carousel. It may be larger than my example at the bottom of this page, due to larger images. If you have not specified any sizes the viewer will default to your image size, with a limitation of 1000 pixels. The Bootstrap system will scale it down without cropping the image.

The entire side area, with the forward and backward chevrons, is a button. Clicking anywhere in these areas will advance or return the slides. You may notice that these areas are gray in your carousel and blue on my example, which means I have finally gotten to the purpose of this article.

How to style your carousel for your theme.

Step by step:

1. Go to your Content folder and double-click bootstrap.css and it will open in the Code Window.

2. Press Ctrl-F to open the Find window in the upper right corner.

3. Type "carousel-control-left" in the find field. The Visual Studio Code Editor will move to the text you type automatically. The bootstrap.css file is pretty big and using the Find function is a good way to locate the code we are looking for.

The .carousel-control.left and below it .carousel-control.right are the control areas where the forward and backward chevrons are located.

Always make sure you have a backup of important files like the one you are working on. One method of working on a project without compromising your working files is to use a copy of the file you are working on. You can copy, rename bootstrap.css and point your Bundle.config file to the renamed file so the styles you are working on will appear. A method I use is to copy the area I want to work on and then comment it out and past the copied text below the comment.

4. Take a look at the CSS below and compare it to yours. Then we'll take a quick look at what that CSS means. Copy and paste into Notepad to print.

External CSS

.carousel-control.left {
  background-image: -webkit-linear-gradient(left, rgba(3, 55, 105, .9) 20%, rgba(0, 0, 0, 0.0001) 100%);
  background-image: -o-linear-gradient(left, rgba(3, 55, 105, .9) 20%, rgba(0, 0, 0, 0.0001) 100%);
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(3, 55, 105, .9)), to(rgba(0, 0, 0, 0.0001)));
  background-image: linear-gradient(to right, rgba(3, 55, 105, .9) 20%, rgba(0, 0, 0, 0.0001) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000066', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
  left: auto;
  right: 0;
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(3, 55, 105, .9) 100%);
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(3, 55, 105, .9) 100%);
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.0001)), to(rgba(3, 55, 105, .9)));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(3, 55, 105, .9) 80%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#ff000066', GradientType=1);
}

5. Here is the meaning of the background-image and background-repeat values in the CSS above:

background-image:
     -webkit- (various versions of Safari)
     -o- (various versions of Opera)
     -moz- (various versions of Firefox)
     -DXImageTransform (older versions of Internet Explorer)
     -linear-gradient (standard for all new browsers)

background-repeat:
     -repeat-x (repeat horizontally)

Most of the lines in the background-image element are for backwards compatibility, so use the linear-gradient line first to see your changes. Use the link at the bottom of the side bar for a good color picker with an alpha (opacity) value.

Here is the meaning of the gradient values in the above CSS using rgba(3, 55, 105, .9) 20%):

rgba = red, green, blue, alpha
        3 = red color value between 0 and 255
      55 = green color value between 0 and 255
   105 = blue color value between 0 and 255
       .9 = opacity value between 0.0 and 1.0
   20% = begin fading at %

Here is the finished example below. Take a look at the page source for any inline styles, such as the container border, radius, and color. This example is intentionally small for use in this article. To see a more responsive example, click here.

Many thanks to photographer Kathy Sharma for the use of her photographs.