Why does my bootstrap carousel have extra space on the sides? - html

I'm fairly certain that this is a simple fix, but I've spent hours on it and am not sure why I haven't been able to fix it. Any help would be greatly appreciated!
My HTML is standard bootstrap:
<div class="row">
<div class="container" id="main">
<div class=col-md-12>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="5000">
<!-- 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="*IMAGE*" alt="Power Grid">
<div class="carousel-caption">
<h3>HELLO</h3>
<p>World</p>
</div>
</div>
<div class="item">
<img src="*IMAGE*" alt="Power Grid">
<div class="carousel-caption">
<h3>GOODBYE</h3>
<p>World</p>
</div>
</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>
</div>
Here is my current CSS:
#main.container {
padding: 0 10% 5% 10%;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 50%;
margin: auto;
}
#carousel-example-generic {
border: #000000 solid 10px;
border-radius: 15px;
}

Related

Shiny HTML full page Bootstrap carousel

I am begining in styling shiny apps.
I want to create a create a full screen slider into a tabpanel of my application for my landing page.
According to this snippet, here's my application.
The carousel is empty. How can I solve this issues (perhaps the inline css <div class="item active" style="background-image: url(https://unsplash.it/1600/840?image=697);"> not working?
library(shiny)
ui <- fluidPage(includeCSS("carousel.css"),
navbarPage("project",
collapsible = TRUE,
tabPanel("Home",
tags$div(HTML('<div class="tcb-bs-fullscreen">
<div id="carousel-example-generic" class="carousel slide carousel-bg" 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" style="background-image: url(https://unsplash.it/1600/840?image=697);">
<div class="carousel-caption">
...
</div>
</div>
<div class="item" style="background-image: url(https://unsplash.it/1600/840?image=545);">
<div class="carousel-caption">
...
</div>
</div>
<div class="item" style="background-image: url(https://unsplash.it/1600/840?image=673);">
<div class="carousel-caption">
...
</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>')
)
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {}
# Run the application
shinyApp(ui = ui, server = server)
And the LESS css:
/****************************
TURN BOOTSTRAP CAROUSEL INTO FULL SCREEN SLIDER
*****************************/
html,
body {
height: 100%;
}
.tcb-bs-fullscreen{
height: 100%;
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
}
/****************************
USE BACKGROUND IMAGES IN CAROUSEL SLIDER
*****************************/
.carousel-bg {
.carousel-inner {
.item {
background-color: darkslategrey;
background-size: cover;
background-position: center;
min-height: 360px;
}
}
}
The URL's of the images loaded within your carousel seem dead except for the second or middle URL:
Does not load:
<div class="item active" style="background-image: url(https://unsplash.it/1600/840?image=697);">
Does load:
<div class="item" style="background-image: url(https://unsplash.it/1600/840?image=545);">
Does not load:
<div class="item" style="background-image: url(https://unsplash.it/1600/840?image=673);">
The code is working fine (you might want to fix your CSS however):
html, body {
height: 100%;
}
.tcb-bs-fullscreen {
height: 100%;
}
.carousel, .item, .active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.carousel-bg .carousel-inner .item {
background-color: #ccc;
background-size: cover;
background-position: center;
min-height: 360px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="tcb-bs-fullscreen">
<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">
<img src="https://unsplash.it/1600/840?image=697" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="https://unsplash.it/1600/840?image=545" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="https://unsplash.it/1600/840?image=673" alt="...">
<div class="carousel-caption">
...
</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>
JSFiddle

Slider inside image - CSS

I am trying to create slider inside an image.
As to the attachment, I want to change the proportion of the background color and then to insert inside this div the slider.
I was using this example:
Fiddle here
The code:
HTML
<div class="col-6 col-md-4">
<img class="temp" src="img/phone.png">
<div class="bg-image">
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./img/testimonial-bg.jpg" alt="...">
</div>
<div class="item">
<img src="http://www.freedomwallpaper.com/nature-wallpaper/nature-hd-wallpapers-water.jpg" alt="...">
</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>
</div>
CSS
#application img {
width: 250px;
height: 375px;
position: absolute;
}
.temp {
background: #440;
}
/*Image slider */
.bg-image {
width:250px;
height:350px;
background-repeat:no-repeat;
background-size:100%;
position: relative;
padding: 150px 0 0 0;
z-index: 1;
}
.carousel-inner>.item>a>img,
.carousel-inner>.item>img{
height: 350px;
}
Thank you for your help.

bootstrap carousel - 2 carousel in the same row

I decided 2 use bootstrap carousel to show some pictures of some projects, but sadly I have some problems with this.
I want 2 carousels on the same row, but this seems like an impossible mission.
I have tried to use css where I give the outter div a width on 100% and then created to "inner divs" with a width on 40 % each.
Sadly this doesn't solve the problem.
<div class="outterBound row">
<div class="insideSize">
<!-- This is the slideshow, all the css works and the pictures wont be too wide -->
<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>
<!-- remember to add the number of pictures here, else the idicator wont work! -->
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/img/sogo/Photo 26-05-16 15.52.38.png" alt="login">
</div>
<div class="item">
<img src="/img/sogo/Photo 26-05-16 15.52.41.png" alt="frontPage">
</div>
<div class="item">
<img src="/img/sogo/Photo 26-05-16 15.52.50.png" alt="updateProfile">
</div>
<div class="item">
<img src="/img/sogo/Photo 26-05-16 15.53.10.png" alt="createAccount">
</div>
<!-- just add another "item" here if you want more pictures -->
</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>
<!-- slideshow ends here, you can add/remove pictures as you want to. -->
<div class="insideSize">
<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> -->
<!-- remember to add the number of pictures here, else the idicator wont work! -->
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/img/sogo/diverse/Billede1_1.jpg" alt="login">
</div>
<!-- just add another "item" here if you want more pictures -->
</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>
<!-- slideshow ends here, you can add/remove pictures as you want to. -->
</div>
</div>
and here is the css file:
#charset "UTF-8";
p{
font-family: Garamond;
font-size: 14px;
}
.font{
font-family: Garamond;
font-size: 14px;
}
.padding{
padding-left: 15px;
}
.jumbotron p{
font-family: Garamond;
font-size: 16px;
}
h4{
align-items: left;
}
.carousel-inner>.item>img{margin:0; max-height: 70%;}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 40%
margin: 0;
}
#media screen and (min-width: 1023px){
div.outterBound{
width: 100%;
}
}
#media screen and (min-width: 1023px){
div.insideSize{
width: auto;
}
}
Any ideas?
Here's a link for the website so you can see it with the pictures.
Try to use bootstrap column.
<div class="outterBound row">
<div class="insideSize col-sm-6">
First Carousel
</div>
<div class="insideSize col-sm-6">
Second Carousel
</div>
</div>
Be carful with the use of ID, an ID is unique, you can't have two id="myCarousel". Change the id for each carousel or use class.

Floating a Bootstrap Carousel

I'm trying to float a div with text content in it to the left of a Bootstrap Carousel, but the results make no sense. Can someone help me out?
It seems like the elements are staying block, even though I specify them as inline. Could this have to do with Bootstrap itself?
I've also included the CSS just in case it helps.
<div class="container">
<div id="elSlideShow">
<div id="slideShowLeft">
<h2>Description of Piano</h2>
<p>werg wer foierjfoi jerij eri ioerjioj eruueruer uerueuerguerurhgueruig eurgu eruig eruiguerguer ueruigerigneign</p>
</div>
<div id="slideShowRight">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide">
</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#666:#444/text:Second slide" alt="Second slide">
</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#555:#333/text:Third slide" alt="Third slide">
</div>
</div>
<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>
</div>
h2 {
font-size: 30px;
}
#slideShowLeft {
float: left;
display: inline;
width: 40%;
}
#slideShowRight {
width: 55%;
float: right;
display: inline;
}
You can simply float them by using "float: left;" property. Put it in either CSS or in div, like style="float:left;"
https://fiddle.jshell.net/odzbg8rh/
You can adjust the distance between each button in CSS
I've copied your code and its working. Just a few points to correct.
Remove display: inline from your css as you are using float and when applied float to elements, it makes them block. So display: inline makes no sense when using with float.
Add class clearfix to parent of floating elements to set their layout.
<div id="elSlideShow" class="clearfix">
h2 {
font-size: 30px;
}
#slideShowLeft {
float: left;
width: 40%;
}
#slideShowRight {
width: 55%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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 class="container">
<div id="elSlideShow" class="clearfix">
<div id="slideShowLeft">
<h2>Description of Piano</h2>
<p>werg wer foierjfoi jerij eri ioerjioj eruueruer uerueuerguerurhgueruig eurgu eruig eruiguerguer ueruigerigneign</p>
</div>
<div id="slideShowRight">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide">
</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#666:#444/text:Second slide" alt="Second slide">
</div>
<div class="item">
<img data-src="holder.js/1140x500/auto/#555:#333/text:Third slide" alt="Third slide">
</div>
</div>
<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>
</div>
Thanks for the help people, actually the problem was a list that came before. The fact that I floated that list probably messed with these elements. My solution was to add a line break after that list.

Glyphicon instead of carousel indicators

I'm trying to replace bootstrap indicators circles with some glyphicons.
I tried to add glyphicon to carousel indicator, but not working.
http://jsfiddle.net/bn6aA/57/
HTML
<div id="locations" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators glyphicon glyphicon-refresh">
<li data-target="#locations" data-slide-to="0" class="active"></li>
<li data-target="#locations" data-slide-to="1"></li>
<li data-target="#locations" data-slide-to="2"></li>
<li data-target="#locations" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active ">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
</div>
<div class="item">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
</div>
<div class="item">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
</div>
<div class="item">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
</div>
</div>
<a class="left carousel-control" href="#locations" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#locations" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Using glyphicons as carousel indicators is not such easy thing to do because we must do some modifications.I removed the class carousel-indicators from the list, i put the glyphicons inside the custom-list list items, and used my custom-list class to style the glyphicons.Also i removed the imported bootstrap-combined library because it was messing up the left and right carousel controls.
The above approach has one negative side which is we cannot style the glyphicon coresponding to the current active slide because we removed the carousel-indicators class from the list.
.custom-list li {
display: inline;
font-size: 40px;
color: #fff;
}
.custom-list li:hover {
color: #888;
cursor: pointer;
}
.item img {
width: 100%;
}
.custom-list {
top: 15px;
margin: auto;
position: absolute;
width: 50%;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
right: 15px;
z-index: 1;
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="locations" class="carousel slide" data-ride="carousel">
<ol class="custom-list">
<li data-target="#locations" data-slide-to="0" class="active"><span class="glyphicon glyphicon-th-large"></span>
</li>
<li data-target="#locations" data-slide-to="1"><span class="glyphicon glyphicon-th"></span>
</li>
<li data-target="#locations" data-slide-to="2"><span class="glyphicon glyphicon-th-list"></span>
</li>
<li data-target="#locations" data-slide-to="3"><span class="glyphicon glyphicon-list"></span>
</li>
</ol>
<div class="carousel-inner">
<div class="item active ">
<img src="http://placehold.it/900x200?text=First slide" alt="">
</div>
<div class="item">
<img src="http://placehold.it/900x200?text=Second slide" alt="">
</div>
<div class="item">
<img src="http://placehold.it/900x200?text=Third slide" alt="">
</div>
<div class="item">
<img src="http://placehold.it/900x200?text=Fourth slide" alt="">
</div>
</div>
<a class="left carousel-control" href="#locations" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#locations" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Straight from the bootstrap website (http://getbootstrap.com/javascript/#carousel):
<!-- 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>
However, something is going a little wonky here, so remove the circles like this with CSS
.carousel-control {
background: none !important;
border: none;
}
Proof: http://jsfiddle.net/bn6aA/65/
As you can see, this is still not rendering exactly correct. Some things are out of place and sized too big etc... This is because you are using bootstrap-combined.min.css V2.3.1 and bootstrap.css V3.0.0
Removing bootstrap-combined.min.css results in a much better looking solution: http://jsfiddle.net/bn6aA/64/