Glyphicon instead of carousel indicators - html

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/

Related

Bootstrap Carousel's background not equal

I have a problem with Bootstrap Carousel with my two backgrounds.
#Carousel-purpose {
background-color:#856c8b;
text-align: center;
color: #fff;
}
.carousel-inner {
padding: 7% 15%;
}
<section id="Carousel-purpose">
<div id="Carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#Carousel-purpose" data-slide-to="0" class="active"></li>
<li data-target="#Carousel-purpose" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" data-interval="3000">
<h3>Szyjemy maski dla najbardziej potrzebujących oraz domów opieki.</h3>
<img src="images/hospital.png" width="100px" height="100px">
</div>
<div class="carousel-item" data-interval="3000">
<h3>Wypełnij ankietę, by pomóc nam dostarczyć maski dla potrzebujących!</h3>
<button type="button" class="btn btn-outline-light btn-lg ">Light</button>
</div>
</div>
<a class="carousel-control-prev" href="#Carousel-purpose" 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="#Carousel-purpose" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
Why are they not equal? I've attached image below for better explanation. Probably the issue is in CSS but honestly I don't know where, could someone help?
instead of using,
<img src="images/hospital.png" width="100px" height="100px">
try,
<img src="images/hospital.png" style=" width:100px; height: 100px !important;">
use the same to the second background image.

CSS image-background of child element showing above image-border

I have the following markup:
<div id="carousel-is-sl-for-me" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-is-sl-for-me" data-slide-to="0" class="active">
<li data-target="#carousel-is-sl-for-me" data-slide-to="1">
<li data-target="#carousel-is-sl-for-me" data-slide-to="2">
<li data-target="#carousel-is-sl-for-me" data-slide-to="3">
<li data-target="#carousel-is-sl-for-me" data-slide-to="4">
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-image: url('<?php bloginfo('template_url'); ?>/image/carousel-placeholder-01.jpg');">
<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="panel panel-info">
<div class="panel-heading">1 in 4 people</div>
<div class="panel-body">
<p>...text goes here</p>
<a href="#" class="btn btn-primary">
<span class="glyphicon glyphicon-file"></span>
Download PDF
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-is-sl-for-me" 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-is-sl-for-me" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Notice how .item has a background applied to it as an inline style.
Then, in my CSS I have the following CSS border:
#carousel-is-sl-for-me {
border-image-slice: 15 27 15 27;
border-image-width: 15px 15px 15px 15px;
border-image-repeat: repeat repeat;
border-image-source: url('../image/marker-border-image-white-big-reversed.png');
border-style: solid;
}
However, the image background of the .item is hiding the image border of #carousel-is-sl-for-me:
Seeing as #carousel-is-sl-for-me is the parent element, I would have thought it's image borders would have been on top? Here is how they should look (if I hide the image background):
Is there an easy way to get around this?

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.

Carousel Indicators Beside It Bootstrap

Is it possible in Bootstrap to have the carousel indicators beside the carousel? I want some indicators on the right side to have font on them, so I know which slider I'm clicking on.
Picture to illustrate what I want:
You can put the controls wherever you want, these are the tagas that make them work. href="#myCarousel" point to the carousel id and data-slide="next" sets the behavior:
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">next</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="prev">prev</a>
Something like this may work for you: https://codepen.io/anon/pen/zNOOrQ
HTML
<div class="container">
<div class="page-header">
<h1>Bootstrap carousel with number indicator</h1>
</div>
</div>
<div class="container">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators carousel-indicators-numbers">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">Slide 1</li><br>
<li data-target="#carousel-example-generic" data-slide-to="1">Slide 2</li><br>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1200x500" alt="...">
</div>
<div class="item">
<img src="http://placehold.it/1200x500" 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>
CSS
.carousel-indicators-numbers {
li {
display: block;
position: relative;
left:140%;
bottom: 150px;
text-indent: 0;
margin: 0 2px;
width: 70px;
height: 30px;
border: none;
line-height: 30px;
color: #fff;
background-color: #999;
transition: all 0.25s ease;
&.active, &:hover {
margin: 0 2px;
width: 70px;
height: 30px;
background-color: #337ab7;
}
}
}

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

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;
}