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>
Related
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'm using Bootstrap scrollspy to update a navbar. I want to change the color of the highlighted active li on the navbar to match the background-color of the matching section.but it is dynamic content
I know what data-spy attribute does and how to use it, but I do not know how the scrollspy plugin really works under the bonnet.so i can make a own code to work on it.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Section 4-1</li>
<li>Section 4-2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>
above is the example of scrollspy. The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position. need is to change color of active navbar to background color of respective position
This is an example of what I am starting with.
If you're wanting to change the background of the active (highlighted) navbar item to match the background of the current section, here's how I would do that:
First, listen to the activate.bs.scrollspy event. This event fires whenever the scrollspy moves to a new section. This would happen on the element with data-spy="scroll" or window if your scrollspying on the body element.
Within that event handler, look for .active to figure out which section is active. What you are looking for is an <a> element. Dropdown menus are the tricky part since there can be multiple .active elements. You need the final one. The way you get there depends on the markup. For the example you linked to, $('.active').last().children().first() would work.
With that done, you can grab href of the <a>, turn it into a class, and apply it to the navbar. You would also need to remove any classes this event has previously applied.
This gets you to have specific classes on the navbar for each section, dynamically applied only when that section is active. The rest is done with CSS.
The CSS will key off your dynamic class and apply a background to the active a elements. Bootstrap gets a little annoying here with all the classes that you have to override. For simplicity, I'm getting around it by using an id:
#navbar.bg-section2 .active a {
background-color: #28a745;
}
The bg-section2 is the dynamically applied class.
That is all that it takes. Below is a live example. Click "Full page" to see it better.
var $navbar = $('#navbar');
var currentClass = 'bg-section1';
$(window).on('activate.bs.scrollspy', function() {
var $active = $('.active');
var $link = $active.last().children().last();
// Classes have the form "bg-id" (with no # in the id)
var newClass = 'bg-' + $link.attr('href').slice(1);
$navbar.removeClass(currentClass);
$navbar.addClass(newClass);
// Keep track of which class is active
currentClass = newClass;
});
body {
position: relative;
padding-top: 50px;
}
section {
padding: 2rem;
color: #fff;
min-height: 70vh;
}
#section1,
#navbar.bg-section1 .active>a {
background-color: #007bff;
}
#section2,
#navbar.bg-section2 .active>a {
background-color: #28a745;
}
#section3_1,
#navbar.bg-section3_1 .active>a {
background-color: #ffc107;
}
#section3_2,
#navbar.bg-section3_2 .active>a {
background-color: #17a2b8;
}
#section3_3,
#navbar.bg-section3_3 .active>a {
background-color: #dc3545;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div id="navbar" class="collapse navbar-collapse bg-section1">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Section 3</a>
<ul class="dropdown-menu">
<li>Section 3.1</li>
<li>Section 3.2</li>
<li>Section 3.3</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<section id="section1">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p>
</section>
<section id="section3_1">
<h2>Section 3.1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p>
</section>
<section id="section3_2">
<h2>Section 3.2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p>
</section>
<section id="section3_3">
<h2>Section 3.3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptate unde facere cupiditate hic, voluptates nobis reiciendis ipsum autem! Deserunt deleniti libero dolores, provident velit repellat. Deleniti omnis, et ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat impedit alias, fugit aliquid, architecto minus nemo nihil odio quam tempore. Odit perspiciatis voluptatum culpa provident. Minus et voluptas facilis delectus.</p>
</section>
</body>
I was practicing bootstrap 4 carousal example given in http://v4-alpha.getbootstrap.com/examples/ . carousal caption is not visible when testing it for mobile or small screen. Any help please.
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption d-none d-md-block text-left">
<h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption d-none d-md-block">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption d-none d-md-block text-right">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Remove the classes d-none d-md-block from all of the carousel-caption classes, the class d-none gives the caption a display of none and the class d-md-block gives it a display of block for md and above screens.
Note: you may need to adjust the text size on smaller screens to make everything fit if you have a lot of text in your captions.
Here's what you ought to do:
Remove class d-none.
Remove class d-md-block.
associated with the carousel-caption class of Bootstrap carousel.
Actually, just removing the class "d-none" will do it for you.
I need to equally size the .media-body elements so they can grow up to the left limit of the page no matter the text they wrap.
<div class="container">
<div class="media">
<a class="media-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<p class="text-justify deal-text" >Lorem ipsum dolor sit amet, consectetur dipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</p>
</div>
<a class="media-right" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
</div>
<div class="media">
<a class="media-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<p class="text-justify deal-text" >Lorem ipsum</p>
</div>
<a class="media-right" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
</div>
<div class="media">
<a class="media-left" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
<div class="media-body">
<p class="text-justify deal-text" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</p>
</div>
<a class="media-right" href="#">
<img class="media-object" data-src="holder.js/64x64">
</a>
</div>
</div>
Here's the snippet
This seems to work...
<style>
.media-body {
width: 100% ;
}
</style>
I'm having trouble with creating a carousel slider with thumbnail navigation in Bootstrap 3.
The problem is the carousel-indicators which needs to be inside the container to outline the rest of the content.
The result I'm aiming for is this:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x440/999999/cccccc" style="width:100%" data-src="holder.js/900x500/auto/#7cbf00:#fff/text: " alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x440/999999/cccccc" style="width:100%" data-src="" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x440/999999/cccccc" style="width:100%" data-src="" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->
Does anyone know how to fix this?