Monday, August 3, 2015

Bootstrap Tutorial Lesson 8 - Carousel Slideshows

In this Step by step Bootstrap Tutorial Lesson 8 - Carousel Slideshows
  we explain the implementation of responsive sliders , by building an App for using on both Mobile screens and desktop computers. This Carousel Slider will display pictures and text to the user .
You can download the complete app from the following GitHub repository:
https://github.com/CarmelSoftware/Bootstrap_CarouselAjaxJSON

This is how this Bootstrap Carousel App is displayed:


Bootstrap Tutorial Lesson 8 - Carousel Slideshowss


And this is the way how the App looks in an Emulator , displayed as Nexus Galaxy :    

Bootstrap Tutorial Lesson 8 - Carousel Slideshowss    1




Bootstrap Tutorial Lesson 8 - Carousel Slideshows


You can start developing this Application by using a Bootstrap template , which you can download  from www.initializr.com/ (see this short Tutorial about Bootstrap Templates). Also you can start from scratch, in which case just add the following references to the   <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">


Bootstrap Tutorial Lesson 8 - Carousel Slideshows   2


And this references will be located before the "Body" closing tag :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


If you need a Mobile Emulator, getting one is seen in this  tutorial on installing the FREE Ripple Emulator.


1) Add the Bootstrap Carousel:


The Bootstrap Carousel can be obtained by copy-paste it from the http://getbootstrap.com web site . Check that the "carousel-indicators" , which will be shown as little circles to browse to the corresponding carousel items, are the same number as the slides in the Carousel, as follows:
Bootstrap Tutorial Lesson 8 - Carousel Slideshows    3

The directive data-ride="carousel" tells to start the slides animation right on Page load.
It is enough to display the Slider.
But for this exercise we'll open the Carousel by using a button and javascript .
Inside the Carousel, there is a role=listbox, which will contain the Slides, which are of class=item.
Inside the first displayed slide (the "active" one) , we insert an img , a Title and a text.
Then we add some other Slides as follows:

Bootstrap Tutorial Lesson 8 - Carousel Slideshows     4


Bootstrap Tutorial Lesson 8 - Carousel Slideshows  5




2) Create the Carousel Controls:

Our Carousel will have controls to display Next and Previous slides, as follows:

Bootstrap Tutorial Lesson 8 - Carousel Slideshows    6


3) Starting the Carousel from javascript:


We add a button to start the slideshow:

Bootstrap Tutorial Lesson 8 - Carousel Slideshows 7


Then we add the javascript to handle the button click event , as follows:

Bootstrap Tutorial Lesson 8 - Carousel



As you see, we send to the carousel() method , a JSON object which sets the Interval and also tells the slider to stop if the user performs a mouseover some slide.
We also added some feedback to the user , by using an alert.


We also have a custom style  CSS3 for the App:

body {
    padding-top: 60px;
    padding-bottom: 20px;
}

.jumbotron h1 {
    font: 900 17px Verdana;
    color: #a8a3a3;
}

h2 {
    font: 900 14px Verdana;
    color: #a8a3a3;
}

.well {
    font: 900 11px Comic Sans MS;
    color: #a8a3a3;
}

.well-footer, .well-footer a {
    font: 900 10px Comic Sans MS;
    color: #a8a3a3;
}

.alert {
    font: 600 9px Verdana;
}

.centered {
    text-align: center;
}

.carousel-title {
    font: 900 20px Verdana;
}

.carousel-text {
    font: 700 15px Comic Sans MS;
}
.item {
background:#c0c0c0;
}
img {
    width: 400px;
    height: 400px;
}




That's all. Our Carousel Slider will be displayed this way:

1- In Mobile devices : 

Bootstrap Tutorial Lesson 8


After clicking the button: (an Alert is displayed)


Bootstrap Tutorial Lesson

Bootstrap Tutorial



2- On Medium and Big desktops:


Bootstrap



      by Carmel Schvartzman


כתב: כרמל שוורצמן