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:
And this is the way how the App looks in an Emulator , displayed as Nexus Galaxy :
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">
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>
We add a button to start the slideshow:
After clicking the button: (an Alert is displayed)
<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">
<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:
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:
2) Create the Carousel Controls:
Our Carousel will have controls to display Next and Previous slides, as follows:
3) Starting the Carousel from javascript:
Then we add the javascript to handle the button click event , as follows:
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 :
After clicking the button: (an Alert is displayed)
2- On Medium and Big desktops:
by Carmel Schvartzman
כתב: כרמל שוורצמן
No comments:
Post a Comment