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.
Related
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
Description
I am creating a simple news publishing site for a personal project. At this stage, I have been trying to make use of the Http.get by using the VueResources but I am stuck on this error which I do not understand. I want to develop it without using the Vue CLI.
Additional Notes:
index.html is used in the public folder >>
vue.js <!DOCTYPE html>
<html lang="en">
**Error Code:**
app.js:1 Uncaught SyntaxError: Unexpected identifier
I have tried the following:
I searched through the internet and the results so far are to check for
import VueResource from 'vue-resource'
Vue.use(VueResource)
var app = new Vue({
el: '#form-id',
data: {
formStatus: false,
blog: [{
id: '',
title: '',
}
]
},
methods: {
},
mounted: function(){
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dexterous - Technology News Site</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
</head>
<body>
<!--Navigation bar-->
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand mb-0 h1">Dexterous</a>
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Highlights</a></li>
<li class="nav-item"><a class="nav-link" href="#">Categories</a></li>
</ul>
</nav>
<!--End of Navigation bar-->
<div class="container-fluid">
<div class="row">
<div class="col">
<!--Carousel Slides-->
<div id="dexterous-slides" class="carousel slide border rounded" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#dexterous-slides" data-slide-to="0" class="active"></li>
<li data-target="#dexterous-slides" data-slide-to="1" class="active"></li>
<li data-target="#dexterous-slides" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100 h-100">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1110/370/?random" alt="cat" class="d-block w-100">
</div>
</div>
<a class="carousel-control-prev" href="#dexterous-slides" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#dexterous-slides" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--End of Carousel Slides-->
</div>
</div>
<!--Action tools: Create a new post-->
<div id="form-id">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h5>Post Management</h5>
</div>
<div class="card-body">
<button v-on:click="formStatus = !formStatus" class="btn btn-light">➕ Add new Post</button>
<button v-on:click="" class="btn btn-light">📝 Manage Post</button>
</div>
</div>
</div>
</div>
<!--Form-->
<div class="row" v-if="formStatus">
<div class="col-md-12 mt-3">
<div class="card bg-light">
<div class="card-header">
<h3>Create a Post</h3>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="blogTitle"><h5>Title:</h5></label>
<input type="text" v-model="blog.title" class="form-control" id="blogInput1" placeholder="enter blog title...">
</div>
<div class="form-group">
<label for="blogContent"><h5>Content:</h5></label>
<textarea class="form-control" v-model="blog.content" id="blogInput2" placeholder="enter content.."></textarea>
</div>
<button type="submit" v-on:click.prevent="posts" class="btn btn-primary mb-2">Add Post</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!--Form end-->
<div class="row mt-3">
<div class="col-md-4">
<div class="card w-100" style="width:18rem;">
<div class="card-header"><h5>Year</h5></div>
<ul class="list-group list-group-flush">
<li class="list-group-item">2017</li>
<li class="list-group-item">2018</li>
<li class="list-group-item">2019</li>
</ul>
</div>
<div class="card w-100 mt-3" style="width:18rem;">
<div class="card-header"><h5>Posts</h5></div>
<ul class="ml-3 list-group list-group-flush">
<li class="list-group-item">Welcome to Dexterous</li>
<li class="list-group-item">New Javascript JS</li>
<li class="list-group-item">2019</li>
</ul>
</div>
</div>
<!--Content fields-->
<div class="col-md-8">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/1110/150/?random" alt="New JavaScript">
<div class="card-body">
<h5 class="card-title">Welcome to Dexterous</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id!</p>
Read more
</div>
</div>
</div>
</div>
<div class="row justify-content-end mb-3 ">
<div class="col-md-8">
<div class="card bg-light">
<img class="card-img-top" src="https://picsum.photos/1110/150/?random" alt="New JavaScript">
<div class="card-body">
<h5 class="card-title">New Javascript JS</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia et odit, numquam quo totam nam, ipsam praesentium sint sunt necessitatibus consectetur consequuntur delectus suscipit iure placeat optio recusandae dolorem id!</p>
Read more
</div>
</div>
</div>
</div>
</div>
<!--Functional scripts-->
<script src="https://cdn.jsdelivr.net/npm/vue-resource#1.5.1"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../app.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</body>
</html>
Node.js and npm is updated ✅
Missing semicolon(So far I have not noticed any) ✅
The only problem was the import so I would just comment it out and bam!. The rest of the code would work.
Anyway to fix it?
VueResource is already available as a global variable when you imported it like this:
<script src="https://cdn.jsdelivr.net/npm/vue-resource#1.5.1"></script>
That means you can use Vue.use(VueResource); without having to re-import it like this: import VueResource from 'vue-resource'.
In your browser console, check if it's available by using this: typeof VueResource. If it returns a function, it works perfectly. Otherwise, it would return an undefined value.
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>
If you press on menu item than go to another one it's not possible to go back to the one you came from, because all stay on active.
How can I fix this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu1">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu2">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu3">JavaScript</a></li>
</ul>
</div>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
Both are possible using bootstrap's built in events. Put the following in your html just before the close body tag. This effectively removes all active classes from li's when the menu is shown.
<script>
$(document).ready(function(){
$(".dropdown").on("show.bs.dropdown", function(){
$(".dropdown-menu li").removeClass("active");
});
});
</script>
Here is a fiddle
Bootstrap documentation
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>