I am trying to set animation to bootstrap carousel caption. But I am not getting.
Here is my code index.html
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MatajerWebSite.Index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/style.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<%--<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#mycarousel').jcarousel();
});
</script>--%>
</head>
<body>
<form id="form1" runat="server">
<div class="container main-container">
<h1>Bootstrap Carousel with Animate.css</h1>
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!-- First slide -->
<div class="item active deepskyblue">
<div class="carousel-caption">
<h3 data-animation="animated bounceInLeft">This is the caption for slide 1
</h3>
<h3 data-animation="animated bounceInRight">This is the caption for slide 1
</h3>
<button class="btn btn-primary btn-lg" data-animation="animated zoomInUp">Button</button>
</div>
</div>
<!-- /.item -->
<!-- Second slide -->
<div class="item skyblue">
<div class="carousel-caption">
<h3 class="icon-container" data-animation="animated bounceInDown">
<span class="glyphicon glyphicon-heart"></span>
</h3>
<h3 data-animation="animated bounceInUp">This is the caption for slide 2
</h3>
<button class="btn btn-primary btn-lg" data-animation="animated zoomInRight">Button</button>
</div>
</div>
<!-- /.item -->
<!-- Third slide -->
<div class="item darkerskyblue">
<div class="carousel-caption">
<h3 class="icon-container" data-animation="animated zoomInLeft">
<span class="glyphicon glyphicon-glass"></span>
</h3>
<h3 data-animation="animated flipInX">This is the caption for slide 3
</h3>
<button class="btn btn-primary btn-lg" data-animation="animated lightSpeedIn">Button</button>
</div>
</div>
<!-- /.item -->
</div>
<!-- /.carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- /.carousel -->
</div>
<!-- /.container -->
<p class="p">Demo by Antonietta Perna. See article.</p>
</form>
style.js
/* Demo Scripts for Bootstrap Carousel and Animate.css article
* on SitePoint by Maria Antonietta Perna
*/
(function( $ ) {
//Function to animate slider captions
function doAnimations( elems ) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#carousel-example-generic'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
//Pause carousel
$myCarousel.carousel('pause');
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
})(jQuery);
style.css file
.main-container {
padding: 10px 15px;
}
.skyblue {
background-color: #22c8ff;
}
.deepskyblue {
background-color: #00bfff;
}
.darkerskyblue {
background-color: #00a6dd;
}
.carousel-indicators {
bottom: 0;
}
.carousel-control.right,
.carousel-control.left {
background-image: none;
}
.carousel .item {
min-height: 350px;
height: 100%;
width:100%;
}
.carousel-caption h3,
.carousel .icon-container,
.carousel-caption button {
background-color: #09c;
}
.carousel-caption h3 {
padding: .5em;
}
.carousel .icon-container {
display: inline-block;
font-size: 25px;
line-height: 25px;
padding: 1em;
text-align: center;
border-radius: 50%;
}
.carousel-caption button {
border-color: #00bfff;
margin-top: 1em;
}
/* Animation delays */
.carousel-caption h3:first-child {
animation-delay: 1s;
}
.carousel-caption h3:nth-child(2) {
animation-delay: 2s;
}
.carousel-caption button {
animation-delay: 3s;
}
h1 {
text-align: center;
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
}
.p {
padding-top: 125px;
text-align: center;
}
.p a {
text-decoration: underline;
}
this is my complete code. I got error like below
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:1): status=2147746065 source: http://localhost:49905/fonts/glyphicons-halflings-regular.woff2
The error message gives you a fairly clear indication of the problem.
You are referencing glyphicons but the font has failed to load. Check the browser console for any other information and then correct the HTML to make sure it is loaded.
Related
This is the site. You don't have to visit the site, everything is written here. It's wordpress using an old wordpress theme that I can't modify to make the images look like a slideshow with thumbnails. I could access header and footer to write the css and the javascript needed but it's so hard to find which function is echoing the images and write the classes by hand. I can edit the classes using jquery
So I took this example
// thumbnails.carousel.js jQuery plugin
;(function(window, $, undefined) {
var conf = {
center: true,
backgroundControl: false
};
var cache = {
$carouselContainer: $('.thumbnails-carousel').parent(),
$thumbnailsLi: $('.thumbnails-carousel li'),
$controls: $('.thumbnails-carousel').parent().find('.carousel-control')
};
function init() {
cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
cache.$thumbnailsLi.first().addClass('active-thumbnail');
if(!conf.backgroundControl) {
cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
}
else {
cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
}
if(conf.center) {
cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
}
}
function refreshOpacities(domEl) {
cache.$thumbnailsLi.removeClass('active-thumbnail');
cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
}
function bindUiActions() {
cache.$carouselContainer.on('slide.bs.carousel', function(e) {
refreshOpacities(e.relatedTarget);
});
cache.$thumbnailsLi.click(function(){
cache.$carouselContainer.carousel($(this).index());
});
}
$.fn.thumbnailsCarousel = function(options) {
conf = $.extend(conf, options);
init();
bindUiActions();
return this;
}
})(window, jQuery);
$('.thumbnails-carousel').thumbnailsCarousel();
/* Just for demo */
body {
padding: 10px;
text-align: center;
}
#carousel-example-generic {
display: inline-block;
}
/*****************************/
/* Plugin styles */
ul.thumbnails-carousel {
padding: 5px 0 0 0;
margin: 0;
list-style-type: none;
text-align: center;
}
ul.thumbnails-carousel .center {
display: inline-block;
}
ul.thumbnails-carousel li {
margin-right: 5px;
float: left;
cursor: pointer;
}
.controls-background-reset {
background: none !important;
}
.active-thumbnail {
opacity: 0.4;
}
.indicators-fix {
bottom: 70px;
}
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- bootstrap carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active srle">
<img src="https://s28.postimg.org/4237b0cjh/image.jpg" alt="1.jpg" class="img-responsive">
<div class="carousel-caption">
<p> 1.jpg </p>
</div>
</div>
<div class="item">
<img src="https://s29.postimg.org/xaf064313/image.jpg" alt="2.jpg" class="img-responsive">
<div class="carousel-caption">
<p> 2.jpg </p>
</div>
</div>
<div class="item">
<img src="https://s17.postimg.org/sv1x15jlb/image.jpg" alt="3.jpg" class="img-responsive">
<div class="carousel-caption">
<p> 3.jpg </p>
</div>
</div>
<div class="item">
<img src="https://s7.postimg.org/4z602gd8b/image.jpg" alt="4.jpg" class="img-responsive">
<div class="carousel-caption">
<p> 4.jpg </p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!-- Thumbnails -->
<ul class="thumbnails-carousel clearfix">
<li><img src="https://s2.postimg.org/h6uti3zud/1_tn.jpg" alt="1_tn.jpg"></li>
<li><img src="https://s27.postimg.org/n4fjr7q2n/2_tn.jpg" alt="1_tn.jpg"></li>
<li><img src="https://s29.postimg.org/afuhmf61f/3_tn.jpg" alt="1_tn.jpg"></li>
<li><img src="https://s29.postimg.org/p45dxi6hf/4_tn.jpg" alt="1_tn.jpg"></li>
</ul>
</div>
And modified it like so, assuming I have nothing but images and I want to build the rest using jquery
;(function(window, $, undefined) {
var conf = {
center: true,
backgroundControl: false
};
var cache = {
$carouselContainer: $('.thumbnails-carousel').parent(),
$thumbnailsLi: $('.thumbnails-carousel li'),
$controls: $('.thumbnails-carousel').parent().find('.carousel-control')
};
function init() {
cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
cache.$thumbnailsLi.first().addClass('active-thumbnail');
if(!conf.backgroundControl) {
cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
}
else {
cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
}
if(conf.center) {
cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
}
}
function refreshOpacities(domEl) {
cache.$thumbnailsLi.removeClass('active-thumbnail');
cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
}
function bindUiActions() {
cache.$carouselContainer.on('slide.bs.carousel', function(e) {
refreshOpacities(e.relatedTarget);
});
cache.$thumbnailsLi.click(function(){
cache.$carouselContainer.carousel($(this).index());
});
}
$.fn.thumbnailsCarousel = function(options) {
conf = $.extend(conf, options);
init();
bindUiActions();
return this;
}
})(window, jQuery);
$('.thumbnails-carousel').thumbnailsCarousel();
// here's what i added
$('img').wrap('<div class="img-responsive"></div>');
$('.img-responsive').wrap('<div class="item"></div>');
$('.item').wrapAll('<div class="carousel-inner"></div>');
$('.carousel-inner').wrapAll('<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"></div>');
$('.carousel-inner').after(' <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>');
var numItems = $('.img-responsive').length;
var counter =0;
for (i = counter; i < numItems; i++) {
// I don't know how to continue from here
}
$('.item:first').addClass('active srle');
body {
padding: 10px;
text-align: center;
}
#carousel-example-generic {
display: inline-block;
}
/*****************************/
/* Plugin styles */
ul.thumbnails-carousel {
padding: 5px 0 0 0;
margin: 0;
list-style-type: none;
text-align: center;
}
ul.thumbnails-carousel .center {
display: inline-block;
}
ul.thumbnails-carousel li {
margin-right: 5px;
float: left;
cursor: pointer;
}
.controls-background-reset {
background: none !important;
}
.active-thumbnail {
opacity: 0.4;
}
.indicators-fix {
bottom: 70px;
}
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<img src="https://s28.postimg.org/4237b0cjh/image.jpg" >
<img src="https://s29.postimg.org/xaf064313/image.jpg" >
<img src="https://s17.postimg.org/sv1x15jlb/image.jpg" >
As you can see, I'm getting there, I don't know what to put in the for loop in order to generate the thumbnails and the carousel-indicators. I hope I'm not missing anything.
You need carousel indicators added to your carousel
(function(window, $, undefined) {
var conf = {
center: true,
backgroundControl: false
};
var cache = {
$carouselContainer: $('.thumbnails-carousel').parent(),
$thumbnailsLi: $('.thumbnails-carousel li'),
$controls: $('.thumbnails-carousel').parent().find('.carousel-control')
};
function init() {
cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
cache.$thumbnailsLi.first().addClass('active-thumbnail');
if(!conf.backgroundControl) {
cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
}
else {
cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
}
if(conf.center) {
cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
}
}
function refreshOpacities(domEl) {
cache.$thumbnailsLi.removeClass('active-thumbnail');
cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
}
function bindUiActions() {
cache.$carouselContainer.on('slide.bs.carousel', function(e) {
refreshOpacities(e.relatedTarget);
});
cache.$thumbnailsLi.click(function(){
cache.$carouselContainer.carousel($(this).index());
});
}
$.fn.thumbnailsCarousel = function(options) {
conf = $.extend(conf, options);
init();
bindUiActions();
return this;
}
})(window, jQuery);
$('.thumbnails-carousel').thumbnailsCarousel();
// here's what i added
$('img').wrap('<div class="img-responsive"></div>');
$('.img-responsive').wrap('<div class="item"></div>');
$('.item').wrapAll('<div class="carousel-inner"></div>');
$('.carousel-inner').wrapAll('<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"></div>');
$('.carousel-inner').after(' <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>');
var numItems = $('.img-responsive').length;
var counter =0;
var $indicators = $('<ol/>', {
'class': 'carousel-indicators'
}).appendTo('#carousel-example-generic');
for (i = counter; i < numItems; i++) {
var indClass = '';
if(i == 0) {
indClass = 'active'
}
$('<li/>', {
'data-target': '#carousel-example-generic',
'data-slide-to': i,
'class': indClass
}).appendTo($indicators);
}
$('.item:first').addClass('active srle');
body {
padding: 10px;
text-align: center;
}
#carousel-example-generic {
display: inline-block;
}
/*****************************/
/* Plugin styles */
ul.thumbnails-carousel {
padding: 5px 0 0 0;
margin: 0;
list-style-type: none;
text-align: center;
}
ul.thumbnails-carousel .center {
display: inline-block;
}
ul.thumbnails-carousel li {
margin-right: 5px;
float: left;
cursor: pointer;
}
.controls-background-reset {
background: none !important;
}
.active-thumbnail {
opacity: 0.4;
}
.indicators-fix {
bottom: 70px;
}
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<img src="https://s28.postimg.org/4237b0cjh/image.jpg" >
<img src="https://s29.postimg.org/xaf064313/image.jpg" >
<img src="https://s17.postimg.org/sv1x15jlb/image.jpg" >
I am working on angular and bootstrap application. I am implementing carousel of bootstrap in my application. Facing the width and height resized issues.
Demo link: https://plnkr.co/edit/tPKXHeN3JWyqZgOtrTTS?p=preview
When user click's on next arrow in the above link, we can see graph but the dimensions of the graph are reduced. I want all the images/graphs used to be 100% width and height.Any suggestions would be helpful.
css code:
.panel-info .panel-heading {
background-color: #c1c6dd;
}
.carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
.carousel-control.left, .carousel-control.right {
color: #2fa4e7;
background-image: none;
}
.carousel-control {
z-index: 10;
top: 2%;
width: 30px;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.carousel-control.left { left: -10px; }
.carousel-control.right { right: -10px; }
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
font-size: 70px;
margin-left : -17px;
margin-right : 24px
}
html code:
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div id='id1' class="item active">
<table style="width:100%;height:80%;">
<tr>
<td id="id1td" ng-controller="myController1">
<div google-chart chart="myChart" style="height:100%; width:100%;" align="center"/>
</td>
</tr>
</table>
</div>
<div id='id2' class="item" ng-controller="myController2">
<table style="width:100%;height:90%;">
<tr style="height:5%;">
<td>
<h1>Title and some content goes here----</h1>
</td>
<tr style="height:85%;">
<td id="id2td">
<div google-chart chart="myChart" style="height:100%; width:100%;" align="center"/>
</td>
</tr>
</table>
</div>
</div>
<!-- Left and right controls -->
<span class="left carousel-control" href="#myCarousel" data-slide="prev" >
<span class="glyphicon glyphicon-chevron-left"></span>
</span>
<span class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</span>
</div>
there is always a problem with tabs and carousel. when you render the chart. if tabs or carousel is not active it will not render charts properly. so I have found the solution for it.
find all delete-me class in the new code it only in index.html file and remove them after page is loaded
<script type="text/javascript" charset="utf-8">
setTimeout(function() {
$('.delete-me').removeClass('active delete-me');
}, 500);
</script>
I just updated your code
DEMO here: https://plnkr.co/edit/EoOxuhH8FTPEOTg5MlHH?p=preview
In order to make second div appear above the slide div, I make the second div position:absolute. Because the first div is slide..so I cannot put second div inside the first div. How to solve it?
<div class="carousel slide">
<div class="carousel-inner" style="height:1000px">
<div class="item active">
<div class="fill" style="background-image:url(picture.jpg);"></div>
</div>
</div>
</div>
<div>some form.....</div>
css
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
here are samples of how the images look
Desktop
Mobile
solved!!....
I am not completely clear on your question but here is a solution using standard bootstrap markup.
your issue was that you are trying to put the form markup after the carousel if you do indeed need it to overlap this is not the answer please clarify your question and i will revise the answer
If this is not what you are looking for let me know
$(document).ready(function() {
//console.log('Ready!')
})
.carousel-inner .item {
min-height: 80px;
}
#form_2 {
position: relative;
z-index: 1000;
display: none;
}
.form-cont {
background-color: rgba(255,255,255,.5);
border:1px solid #ccc;
height: 300px;
width: 50%;
position: absolute;
z-index: 999;
left: 25%;
top:0;
padding:10px;
}
.item img {
min-height:300px;
}
.item.slide1 {
background-color:red;
}
.item.slide2 {
background-color:lightblue;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="realtive">
<div class="form-cont">
<h4>Header</h4>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
</div>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active slide1">
<img src="https://i.stack.imgur.com/4hEOH.jpg" alt="...">
<div class="carousel-caption">
slide 1
</div>
</div>
<div class="item slide2">
<img src="https://i.stack.imgur.com/COO5g.jpg" alt="...">
<div class="carousel-caption">
slide 2
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
var audio, playbtn, mutebtn, seek_bar;
function initAudioPlayer() {
audio = new Audio();
audio.src = "nineDays.mp3";
audio.loop = true;
audio.play();
// Set object references
playbtn = document.getElementById("playpausebtn");
mutebtn = document.getElementById("mutebtn");
// Add Event Handling
playbtn.addEventListener("click", playPause);
mutebtn.addEventListener("click", mute);
// Functions
function playPause() {
if (audio.paused) {
audio.play();
playbtn.style.background = "url(video_pause.png) no-repeat";
} else {
audio.pause();
playbtn.style.background = "url(play.png) no-repeat";
}
}
function mute() {
if (audio.muted) {
audio.muted = false;
mutebtn.style.background = "url(speaker.png) no-repeat";
} else {
audio.muted = true;
mutebtn.style.background = "url(mute.png) no-repeat";
}
}
}
window.addEventListener("load", initAudioPlayer);
body {
background: #282828;
color: white;
font-family: sans-serif;
}
.nav {
display: flex;
justify-content: flex-end;
position: absolute;
width: 100%;
top: 0;
left: 0;
list-style-type: none;
}
li a {
color: white;
text-decoration: none;
padding: 0 10px;
}
h1 {
font-size: 13px;
margin-bottom: 80%;
margin-right: 50%;
font-family: 'Montserrat';
}
.container {
padding-top: 8%;
}
button {
border: none;
cursor: pointer;
outline: none;
}
button#playpausebtn {
background: url(video_pause.png) center center no-repeat;
background-size: cover;
margin-left: 20px;
marging-top: 35px;
width: 20px;
height: 15px;
}
button#mutebtn {
background: url(speaker.png) center center no-repeat;
background-size: cover;
margin-top: 35px;
width: 25px;
height: 20px;
}
.soundNav {
position: absolute;
width: 20%;
height: 30px;
z-index: 99999;
}
<body>
<div class="soundNav">
<button id="playpausebtn"></button>
<button id="mutebtn"></button>
</div>
<ul class="nav nav-tabs">
<li role="presentation">Home
</li>
<li role="presentation">About me
</li>
<li role="presentation" class="active">Work
</li>
<li role="presentation">Get In Touch
</li>
</ul>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="my-slider" class="carousel slide" data-ride="carousel">
<!--Indicators dot nav-->
<ol class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class="active"></li>
<li data-target="#my-slider" data-slide-to="1"></li>
<li data-target="#my-slider" data-slide-to="2"></li>
<li data-target="#my-slider" data-slide-to="3"></li>
</ol>
<!--wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="1.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> © Ed Sheeran Concert at Blossom Center</br>
August 2015
</h1>
</div>
</div>
<div class="item">
<img src="5.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </br>
</h1>
</div>
</div>
<div class="item">
<img src="6.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </br>
</h1>
</div>
</div>
<div class="item ">
<img src="2.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </h1>
</div>
</div>
<!--controls or next and prev buttons-->
<a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to understand what the problem is- whenever someone opens the page, the music starts. I want the user to be able to pause or mute the music whenever they want to. And that works fine, except my icons won't show, it's as they are hidden. Everything is in the same folder. I was thinking to use glyphicons, but I don't know how to use them inside of the javascript.
the javascript style syntax is littlebit different. use
mutebtn.style.backgroundImage = "url('mute.png') no-repeat";
and make sure ./mute.png exists and is readable
I'm having a lot of time creating a sidebar that is flush with my current bootstrap carousel. Here's what my current site looks like:
http://i.imgur.com/lwEox4a.png
And here's what I'm trying to achieve after a user clicks the media object button:
http://i.imgur.com/nbNVDLy.png
I've been trying to do this for a while now and the sidebar always ends up moving the picture down, on top of the arrows, or completely behind the carousel. Can someone help with this or show me a template that achieves this?
Also this is a single plage design so if you also know of a way for the sidebar to basically remain frozen on the left side of the page no matter what part of the site you are on, please tell me!
Thanks
Edit: The site, materializecss, is kind of is what I'm aiming for. I don't even really care about the media object button.
Edit 2: So I'm using this carousel and this one page template
http://startbootstrap.com/template-overviews/full-slider/
http://startbootstrap.com/template-overviews/scrolling-nav/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/full-slider.css" rel="stylesheet">
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<!-- Navigation -->
<!-- Full Page Image Background Carousel Header -->
<div class="navmenu navmenu-default navmenu-fixed-left">
<a class="navmenu-brand" href="#">Project name</a>
<ul class="nav navmenu-nav">
<li>Slide in</li>
<li>Push</li>
<li class="active">Reveal</li>
<li>Off canvas navbar</li>
</ul>
<ul class="nav navmenu-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu navmenu-nav">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<div class="canvas">
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container-fluid">
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/460/345/cats" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/business" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/abstract" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/transportation" />
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- Intro Section -->
<!-- <section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Scrolling Nav</h1>
<p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class and set the link target to a corresponding ID on the page.</p>
<a class="btn btn-default page-scroll" href="#about">Click Me to Scroll Down!</a>
</div>
</div>
</div>
</section> -->
<!-- About Section -->
<section id="photos" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Photos section</h1>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="projects" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Projects Section</h1>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="recognition" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Recognition Section</h1>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="teammembers" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Team Members Section</h1>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="contact" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Section</h1>
</div>
</div>
</div>
</section>
<!-- Page Content -->
<div class="container">
<!-- Responsive iFrame -->
<div class="Flexible-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3326.973484035864!2d-111.93373599999995!3d33.50206699673241!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x872b749e6453718b%3A0x2efd3ce15e57a886!2sNorris+Architects+LLC!5e0!3m2!1sen!2sus!4v1432435089092" width="1300" height="600" frameborder="0" style="border:0"></iframe></div>
<div class="row">
<div class="col-lg-12">
<h1>Full Slider by Start Bootstrap</h1>
<p>The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the <code>full-slider.css</code>file.</p>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 0 //changes the speed
})
</script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
</body>
</html>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
html, body {
height: 100%;
}
.navbar-toggle {
float: left;
margin-left: 15px;
}
.navmenu {
z-index: 1;
}
.canvas {
position: absolute;
left: 0;
right: 0!important;
z-index: 2;
min-height: 100%;
padding: 50px 0 0 0;
background: #fff;
}
.navbar-toggle {
display: block;
}
.navbar {
right: auto;
background: none;
border: none;
}
.container-fluid {
padding: 0px;
}
/*!
* Start Bootstrap - Scrolling Nav HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children
of those sections to manage the look and feel of the site. */
.intro-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
.about-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
.services-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0px;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
}
Jasny Bootstrap has a great offcanvas menu plugin. Using that example with a couple of modifications and this example carousel, I came up with this
(Demo)
CSS
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
html, body {
height: 100%;
}
.navbar-toggle {
float: left;
margin-left: 15px;
}
.navmenu {
z-index: 1;
}
.canvas {
position: absolute;
left: 0;
right: 0!important;
z-index: 2;
min-height: 100%;
padding: 50px 0 0 0;
background: #fff;
}
.navbar-toggle {
display: block;
}
.navbar {
right: auto;
background: none;
border: none;
}
HTML
<div class="navmenu navmenu-default navmenu-fixed-left">
<a class="navmenu-brand" href="#">Project name</a>
<ul class="nav navmenu-nav">
<li>Slide in</li>
<li>Push</li>
<li class="active">Reveal</li>
<li>Off canvas navbar</li>
</ul>
<ul class="nav navmenu-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu navmenu-nav">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<div class="canvas">
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container-fluid">
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/460/345/cats" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/business" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/abstract" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/transportation" />
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
Then make sure to include these files if you haven't included them already
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>