im use bootstrap 4.3.1 version along with the vue.js version 2
my code
<div class="container">
<div class="row">
<div class="col-md-7">
<div
class="tooltip-icon"
#click="show = !show"
id="tooltip-button-1"
></div>
<b-tooltip
:show.sync="show"
target="tooltip-button-1"
custom-class="tooltip-custom"
placement="bottom"
triggers="click"
>
<div class="tooltip-text-title">
Тест
</div>
</b-tooltip>
</div>
<div class="col-md-5"></div>
</div>
</div>
JS:
<script>
export default {
name: "Test",
data() {
return {
show: false,
};
},
};
</script>
and in this case, if I change the style of the tooltip, I increase its max-width on 1000px or more (.tooltip-inner), and if its width is greater than that of the parent (col-md-7), it changes the placement to the left
it turns out that the tooltip cannot go beyond the column
Your code is working fine. I did not see any issue in that. Tooltip is behaving correct as per the col width (col-md-7) provided.
Live Demo :
new Vue({
el: "#app",
data: {
show: false
}
});
<script src="https://unpkg.com/vue#2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.12.0/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.5.0/dist/bootstrap-vue-icons.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.12.0/dist/bootstrap-vue.css"/>
<div id="app">
<div class="container">
<div class="row" style="text-align: center">
<div class="col-md-7" style="background-color: yellow">
<div #click="show = !show" id="tooltip-button-1">
Click Me
</div>
<b-tooltip target="tooltip-button-1" triggers="click" placement="bottom">Тест</b-tooltip>
</div>
<div class="col-md-5"></div>
</div>
</div>
</div>
new Vue({
el: "#app",
data: {
show: false
}
});
<script src="https://unpkg.com/vue#2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.12.0/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.5.0/dist/bootstrap-vue-icons.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.12.0/dist/bootstrap-vue.css"/>
<div id="app">
<div class="container" style="max-width: 1024px;">
<div class="row" style="text-align: center">
<div style="background-color: yellow; width: 55%; overflow-y: scroll">
<div #click="show = !show" id="tooltip-button-1">
Click Me
</div>
<b-tooltip target="tooltip-button-1" triggers="click" placement="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</b-tooltip>
</div>
<div style="background-color: red; width: 45%;">
<div style="height: 40px"></div>
</div>
</div>
</div>
</div>
<style>
.tooltip-inner {
max-width: 300px!important
}
</style>
I found a more correct interpretation of my error
it appears if the block has scrolling
Related
I am not sure what is happening here, but seems like I can't change the class of the active-class prop of my v-expansion-panels dynamically.
I am trying to change it between green and red depending on a model state (changed by a click on a button), but even though the model changes the v-expansion-panels doesn't pick the new active class.
Might be doing something wrong here, but can't figure it out.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
edited: false,
}
},
computed: {
activeClass() {
return this.edited ? 'active-panel-edited' : 'active-panel-normal';
}
}
})
<style scoped>
.active-panel-edited {
background-color: #ff000038 !important;
}
.active-panel-normal {
background-color: #00ff1438 !important;
}
</style>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<v-app>
The current active class: {{activeClass}}
<v-expansion-panels :active-class="activeClass">
<v-expansion-panel
v-for="(item,i) in 5"
:key="i"
>
<v-expansion-panel-header>
Item
</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor sait amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<v-btn #click="edited = !edited">Change Color</v-btn>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-app>
</div>
</body>
</html>
Thank you in advance!
apply the active class v-expansion-panel instead of v-expansion-panels
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
edited: false,
}
},
computed: {
activeClass() {
return this.edited ? 'active-panel-edited' : 'active-panel-normal';
}
}
})
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<style>
.active-panel-edited {
background-color: #ff000038 !important;
}
.active-panel-normal {
background-color: #00ff1438 !important;
}
</style>
</head>
<body>
<div id="app">
<v-app>
The current active class: {{activeClass}}
<v-expansion-panels>
<v-expansion-panel
:active-class="activeClass"
v-for="(item,i) in 5"
:key="i"
>
<v-expansion-panel-header>
Item
</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor sait amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<v-btn #click="edited = !edited">Change Color</v-btn>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-app>
</div>
</body>
</html>
I'm trying to create a sidebar which can slide-in and -out by clicking on a trigger element. The trigger-element should be sticked to the sidebar.
However, in my current fiddle, the triggler-element only changes position after the sidebar completed its transition.
How can I accomplish the expected behavior?
new Vue({
el: "#app",
data: {
exposed: true
}
})
.sidebar {
width: 200px;
height: 200px;
}
.toggler {
height: 30px;
}
/**********************
* Transition classes *
**********************/
.slide-leave-active,
.slide-enter-active {
transition: 1s;
}
.slide-enter {
transform: translate(-200px, 0);
}
.slide-leave-to {
transform: translate(-200px, 0);
}
<script src="https://vuejs.org/js/vue.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app" class="px-0 py-4">
<div class="d-flex">
<!-- Sidebar content -->
<transition name="slide">
<div v-if="exposed" class="sidebar bg-dark text-white p-1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</transition>
<!-- Sidebar toggler -->
<div class="toggler px-2 bg-secondary">
<a href="#" v-on:click="exposed = !exposed" class="text-white">
<span v-if="exposed">[X]</span>
<span v-else>(?)</span>
</a>
</div>
</div>
</div>
jsfiddle
I made minor css change as below
.slide-enter {
margin-left:-200px;
}
.slide-enter-to {
margin-left:0px;
}
.slide-leave-to {
margin-left:-200px;
}
Please check if it works.
https://jsfiddle.net/z43xug9n/3/
If you want to slide both the sidebar and the toggle at the same time, it is better to slide their parent (container).
https://jsfiddle.net/4mju0rzt/31/
<div id="app">
<div v-bind:class="{'minimized': hide}" class="sidebar-container">
<div class="sidebar bg-dark text-white p-1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<!-- Sidebar toggler -->
<div class="toggler px-2 bg-secondary">
<a href="#" v-on:click="hide = !hide" class="text-white">
<span v-if="!hide">[X]</span>
<span v-else>(?)</span>
</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
hide: false
}
})
</script>
Found a solution with Velocity.js. The trick is to move the sidebar away instead of removing it from the DOM.
new Vue({
el: "#app",
data: {
exposed: true
},
methods: {
slideIn (el, done) {
Velocity(el, {
marginLeft: 0
}, {
duration: 500
}, {
complete: done
});
},
slideOut (el, done) {
Velocity(el, {
marginLeft: -200
}, {
duration: 500
}, {
complete: done
});
}
}
})
.sidebar {
width: 200px;
height: 200px;
}
.toggler {
height: 30px;
width: 36px;
}
<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.3/velocity.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app" class="px-0 py-4">
<div class="d-flex">
<!-- Sidebar content -->
<transition v-on:enter="slideIn" v-on:leave="slideOut">
<div v-show="exposed" id="sidebar" class="sidebar bg-dark text-white p-1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</transition>
<!-- Sidebar toggler -->
<div class="toggler px-2 bg-secondary">
<a href="#" v-on:click="exposed = !exposed" class="text-white">
<span v-if="exposed">[X]</span>
<span v-else>(?)</span>
</a>
</div>
</div>
</div>
I was wondering what are the practices to integrate HTML frameworks (bootstrap, uikit) with Cycle.js?
I can see two different approaches:
Have a fairly bulky static HTML that adds all the relevant menus, gadgets, ... of your page, which also loads the cycle app.
Have a minimal HTML file that just loads the cycle app and the cycle app then does everything.
I am currently using solution 1, but I can see it not scaling with more complex pages (as these would make lots of changes to the HTML structure of the page, anyway).
But, in the case of solution 2, what is then the best way of using template frameworks from the cycles programmatic API?
What I'm doing I think is more of a combination of 1. and 2. in your question. All the markup is in a HTML file but it's not static. It's a model that the snabbdom-template module uses to dynamically populate with custom data then returned to CycleJS for rendering into the DOM.
main.js
const xs = require('xstream').default
const run = require('#cycle/run').run
const makeDOMDriver = require('#cycle/dom').makeDOMDriver
const st = require('snabbdom-template')
const fs = require('fs')
const template = fs.readFileSync('template.html', 'utf-8')
function main(sources) {
return {
DOM: xs.of(['one','two','three','four']) // mock data
.map(list =>
st(template, { // call snabbdom-template
'div#message': {class: 'myclass', '_html': 'Ready.'}, // link selectors and data
'#mapme': {_map: {'li': list}}
})
)
}
}
run(main, {
DOM: makeDOMDriver('#main-container')
})
Given index.html
<html>
<body>
<div id="main-container"></div>
<script src="bundle.js"></script>
</body>
</html>
...and template.html
<div id="message">message goes here</div>
<ul id="mapme">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
...produces something like
<html>
<body>
<div id="main-container">
<div id="message" class="myclass">Ready.</div>
<ul id="mapme">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
<script src="bundle.js"></script>
</body>
</html>
To run this example create the main.js, index.html, and template.html files, then in your terminal...
npm i xstream #cycle/run #cycle/dom snabbdom-template brfs
browserify -t brfs main.js > bundle.js
open index.html
.
And here's a UIkit example:
function main(sources) {
return {
DOM: xs.of([
['one', 'testing 1'],
['two', 'testing 2'],
['three', 'testing 3'],
['four', 'testing 4']
])
.map(function (list) {
return st(template, {
'#mapme': {_map: {'li': list.map(function (item, ii) {
const ret = {'h3.uk-accordion-title': item[0], 'div.uk-accordion-content p': item[1]}
if ( 0 === ii ) { ret['li'] = {class: 'uk-open'} }
return ret
})}}
})
})
}
}
Given template.html
<ul uk-accordion id="mapme">
<li>
<h3 class="uk-accordion-title">Item 1</h3>
<div class="uk-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li>
<h3 class="uk-accordion-title">Item 2</h3>
<div class="uk-accordion-content">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
</div>
</li>
<li>
<h3 class="uk-accordion-title">Item 3</h3>
<div class="uk-accordion-content">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
</div>
</li>
</ul>
...produces something like
<html>
<body>
<div id="main-container">
<ul uk-accordion id="mapme">
<li class="uk-open">
<h3 class="uk-accordion-title">one</h3>
<div class="uk-accordion-content">
<p>testing 1</p>
</div>
</li>
<li>
<h3 class="uk-accordion-title">two</h3>
<div class="uk-accordion-content">
<p>testing 2</p>
</div>
</li>
<li>
<h3 class="uk-accordion-title">three</h3>
<div class="uk-accordion-content">
<p>testing 3</p>
</div>
</li>
<li>
<h3 class="uk-accordion-title">four</h3>
<div class="uk-accordion-content">
<p>testing 4</p>
</div>
</li>
</ul>
</div>
<script src="bundle.js"></script>
</body>
</html>
Which displays like
Try an online example here.
I am composing a modal component as I learn VueJS. The modal component basically consists of two major elements: the actual box containing all contents and an overlay.
Now the problem I am stuck in is the overlay element is not rendered at all. But if I moved the overlay from the component template to parent scope, everything would be alright.
Here is the code of parent scope:
<my-modal v-show="show" v-on:hide="show = false"></my-modal>
<!-- Overlay will be rendered properly if I put overlay here. -->
<!-- <div class="my-modal-overlay" v-show="show" #click="show = false"></div> -->
And the code of component template:
<template id="tpl-my-modal">
<transition name="modal-fade" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
<div class="my-modal-box">
<div class="my-modal-content">
<div class="my-modal-header"><h1>Title</h1></div>
<div class="my-modal-body">Body</div>
<div class="my-modal-footer"><button class="btn btn-danger" #click="$emit('hide')">Close</button></div>
</div>
</div>
<!-- Overlay is not rendered at all if I put it here. -->
<div class="my-modal-overlay" #click="show = false"></div>
</transition>
</template>
The Javascript:
Vue.component('my-modal', {
template: '#tpl-my-modal'
})
Two screenshots. The grey layer is the overlay element which covers all the viewport.
Could anyone shed some light upon the problem? Thank you!
Update:
Here come the snippets. Feel free to comment/comment out line 11 / line 26 in HTML to see the difference.
Update:
It turns out that a Vue Component can have no more than one root element, and <transition> tag can only have a single element, which means what I did before was wrong.
Thus I tweaked the code a bit, and now in the console Vue does not complain any more. And both modal box and overlay are rendered.
<template id="tpl-my-modal">
<div>
<transition name="modal-fade" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
<div class="my-modal-box">
<div class="my-modal-content">
<div class="my-modal-header">
<h1>{{ program.title }}</h1></div>
<div class="my-modal-body"> {{ program.intro }}</div>
<div class="my-modal-footer">
<button class="btn btn-danger" #click="$emit('hide')">Close</button>
</div>
</div>
</div>
</transition>
<div class="my-modal-overlay" #click="show = false"></div>
</div>
</template>
But one problem is unsolved: all transitions are gone. Here are the snippets. What is the problem?
For the transition problem, you should put the transition tag right after the root div of your template like this..
<template id="tpl-my-modal">
<transition name="modal-fade" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
<div>
//the rest of your code..
because v-show will be applied to the root div when you use it to the component my-modal
<my-modal v-show="show" v-on:hide="show = false" v-bind:program="activeProgram"></my-modal>
check this fiddle https://jsfiddle.net/cihkem/0rmt28y2/
Vue.component('my-modal', {
template: '#tpl-my-modal',
props: ['program', 'show']
})
new Vue({
el: '#app',
data: {
show: false,
activeProgram: {},
programs: [{
title: 'Westworld',
intro: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi cum incidunt ipsum impedit nostrum, repellendus illum, officia labore neque ea quam ad maiores corporis deserunt quos odio distinctio similique in.'
}, {
title: 'Game of Thrones',
intro: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet perspiciatis eos aperiam, veritatis, voluptate eius similique saepe libero consectetur suscipit dolorem molestiae animi nostrum voluptatem quidem sapiente? Fugit, hic, fugiat!'
}, {
title: 'X Files',
intro: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit nobis, nisi ex exercitationem magnam nemo repudiandae dolor maxime odio reprehenderit animi ducimus a consequatur, saepe suscipit dolorem ratione tempore perferendis.'
}]
},
methods: {
showDetails: function(program) {
this.show = true;
this.activeProgram = program;
}
}
})
.my-modal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
opacity: .3;
}
.my-modal-box {
opacity: 1;
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
}
.my-modal-content {
background-color: #fff;
position: relative;
height: auto;
width: 600px;
margin: 30px auto;
padding: 10px;
z-index: 1050;
}
.my-modal-header {
text-align: center;
}
.my-modal-body,
.my-modal-footer {
padding: 10px 0;
}
.my-modal-header,
.my-modal-body {
border-bottom: 1px solid #d0d0d0;
}
.my-modal-footer {
text-align: right;
}
.program-list-item {
padding: 3px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<body>
<div class="container">
<div id="app">
<ol>
<li v-for="program in programs" class="program-list-item">
{{ program.title}}
<button class="btn btn-primary btn-sm" #click="showDetails(program)">Details</button>
</li>
</ol>
<my-modal :show="show" v-on:hide="show = false" v-bind:program="activeProgram"></my-modal>
<!-- <div class="my-modal-overlay" v-show="show" #click="show = false"></div> -->
</div>
</div>
<template id="tpl-my-modal">
<div>
<transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
<div v-show="show" class="my-modal-box" key="modal">
<div class="my-modal-content">
<div class="my-modal-header">
<h1>{{ program.title }}</h1></div>
<div class="my-modal-body"> {{ program.intro }}</div>
<div class="my-modal-footer">
<button class="btn btn-danger" #click="$emit('hide')">Close</button>
</div>
</div>
</div>
</transition>
<div v-show="show" class="my-modal-overlay" #click="show = false" key="overlay"></div>
</div>
</template>
</body>
Is it what you need?
I'd like to implement a slider such as Bootstrap Carousel to rotate through some text rather than images...
Is this possible as all examples I've come across are based on images.
Thanks
Yes you can show text only. I used an implementation on jsfiddle under technotarek/gXN2u/
The Following Example shows how you can use text instead of images.
setCarouselHeight('#carousel-example');
function setCarouselHeight(id)
{
var slideHeight = [];
$(id+' .item').each(function()
{
// add all slide heights to an array
slideHeight.push($(this).height());
});
// find the tallest item
max = Math.max.apply(null, slideHeight);
// set the slide's height
$(id+' .carousel-content').each(function()
{
$(this).css('height',max+'px');
});
}
.carousel-content {
color:black;
display:flex;
align-items:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-content">
<div>
<h3>#1</h3>
<p>This is a twitter bootstrap carousel that only uses text. There are no images in the carousel slides.</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<h3>#2</h3>
<p>This is another much longer item. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, sint fuga temporibus nam saepe delectus expedita vitae magnam necessitatibus dolores tempore consequatur dicta cumque repellendus eligendi ducimus placeat! Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p>
</div>
</div>
</div>
<div class="item">
<div class="carousel-content">
<div>
<h3>#3</h3>
<p>This is the third item.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls --> <a class="left carousel-control" href="#carousel-example" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>