bootstrap slider responsive background

bootstrap slider responsive background - html

I need to have a resizable background for the slider
I tried background:url() and background-size:cover
$(window).resize(function() {
$('.item > .image').css('height', $(window).height());
}).trigger('resize');
.image {
background-size:contain;
background-position:center;
background-repeat:no-repeat;
background-image: url('data:img/png;base64,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');
}
<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">
<div class="image"></div>
</div>
<div class="item">
<div class="image"></div>
</div>
<div class="item">
<div class="image"></div>
</div>
<div class="item">
<div class="image"></div>
</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>
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I need a responsive background image to fits desktop and mobile

.hero-section {
background-image: url('https://instapage.com/wp-content/uploads/2018/02/adwords-final-url-770x384.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 35vh;
width: auto;
}
<div class="hero-section"></div>

Related

Center images within bootstrap carousel

I have been trying to create responsive carousel in bootstrap but images with lower width than carousel's are moving to the left.
Here is the code:
.tales {
width: 100%;
}
.carousel-inner{
width:100%;
max-height: 400x !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<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>
<!-- inner -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1200x600/2c3e50/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x1200/d35400/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x600/c0392b/000" 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>
It is better to look at when snippet gets expanded.
It is taking way longer than it should..

set display:inline-blockin img and set text-align:center in .item
check snippet below-
.tales {
width: 100%;
}
.carousel-inner{
width:100%;
max-height: 400x !important;
}
.item{
text-align:center;
}
.carousel-inner img{
display:inline-block !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<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>
<!-- inner -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1200x600/2c3e50/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x1200/d35400/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x600/c0392b/000" 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>

You can given margin: 0 auto; for img tag.
.carousel-inner>.item>a>img, .carousel-inner>.item>img {
margin: 0 auto;
}

Try this
.carousel-inner>.item.active, .carousel-inner>.item.next.left, .carousel-inner>.item.prev.right {
text-align: -webkit-center;
}
UPDATED SNIPPET
.tales {
width: 100%;
}
.carousel-inner{
width:100%;
max-height: 400x !important;
}
.carousel-inner>.item.active, .carousel-inner>.item.next.left, .carousel-inner>.item.prev.right {
text-align: -webkit-center;
left: 0;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<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>
<!-- inner -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1200x600/2c3e50/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x1200/d35400/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x600/c0392b/000" 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>

Antoher way to center them is by using flexbox. You basically have to add these two properties display: flex; justify-content: center; to your .carousel-inner class. display: flex; will create a flexbox and justify-content: center;will center the images horizontally.
.tales {
width: 100%;
}
.carousel-inner{
width:100%;
display: flex;
justify-content: center;
max-height: 400x !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<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>
<!-- inner -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1200x600/2c3e50/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x1200/d35400/000" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x600/c0392b/000" 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>

i think this may help for you. i tried your code it is working fine for me
for a bootstrap carousel or any sliders it is better to pick up all images with same height and width
else, we need to fix the weight and width to some height using css
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.carousel-inner img
{
width: 100%;
height: 500px !important;
}
</style>
<!-- html-->
<div class="container">
<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>
<!-- inner -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1200x600/2c3e50/000" class="img-responsive" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x1200/d35400/000" class="img-responsive" alt="">
</div>
<div class="item">
<img src="http://placehold.it/600x600/c0392b/000" class="img-responsive" 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>

Making a slideshow fit the screen

I am developing a front-end website using bootstrap. I have inserted a slideshow but it doesn't fit the screen. I have inserted the image into the HTML, not into the CSS. Here is my code:
<div class="container-fluid" id="background">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="slideShow">
<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>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="pics/happiness1.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness2.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness3.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness4.jpg" alt="Happiness" class="slideShow">
</div>
<div class="item">
<img src="pics/happiness5.jpg" alt="Happiness" class="slideShow">
</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>
</div>
How to make those images fit to the screen?

Append this last of your css file ..
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img{
min-height: 100vh;
}

How to set the size of the images in the Carousel:

I have been trying to set the size of the images to same value. I need all the images to appear in the same size(Same height and width). The following is the code for the Carousel. All the images appear in their original sizes. How do I go about achieving 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>
<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="images\banner.jpg" alt="Chania">
</div>
<div class="item">
<img src="images\banner_1.jpg" alt="Chania" >
</div>
<div class="item">
<img src="images\banner_2.png" alt="Flower">
</div>
<div class="item">
<img src="images\banner_3.jpg" alt="Flower">
</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>
The CSS code I am using is:
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
height: 40%;
margin: auto;
}
</style>

carousel bootstrap images not overlapping each other

<div class="container">
<div id="myCarousel" class="Carousel slide" data-ride="Carousel" data-interval="1000">
<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 class="item active" alt="Slide 1">
<img class="img-responsive center-block" src="img/water.jpg" alt="Slide 2">
<div class="Carousel-caption">
<h1>Theme1</h1>
</div>
</div>
<div class="item ">
<img class="img-responsive center-block" src="img/ice.jpg">
<div class="Carousel-caption">
<h1>Theme2</h1>
</div>
</div>
</div>
<a class="left Carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right Carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
enter image description here
my pictures are not overlapping each other why but my code is correct i am using bootstrap examples but what is the reason i dont know this images not coming in one way over each other

Hi its becz of your class check your class name
class="carousel-inner"
but you mentioned
class="Carousel-inner"
i changed here now it ok
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<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">
<div class="item active" alt="Slide 1">
<img class="img-responsive center-block" src="img_chania.jpg" alt="Slide 2">
<div class="Carousel-caption">
<h1>Theme1</h1>
</div>
</div>
<div class="item ">
<img class="img-responsive center-block" src="img_chania2.jpg">
<div class="Carousel-caption">
<h1>Theme2</h1>
</div>
</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>
<!-- Left and right controls -->
</div>
</div>
</body>
</html>

Twitter bootstrap carousel left and right controls

Currently the left and right controls on my Bootstrap carousel don't work and I'm trying to figure out why. The slides don't change. Any help would be much appreciated.
html code:
<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="images/anaesthesiaexams/cap1.png" alt="Chania">
</div>
<div class="item">
<img src="images/anaesthesiaexams/cap2.png" alt="Chania">
</div>
<div class="item">
<img src="images/anaesthesiaexams/cap3.png" alt="Flower">
</div>
<div class="item">
<img src="images/anaesthesiaexams/cap4.png.jpg" alt="Flower">
</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>

Hey do you have both js and jquery linked?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

bootstrap slider responsive background - html

.hero-section { background-image: url('https://instapage.com/wp-content/uploads/2018/02/adwords-final-url-770x384.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; height: 35vh; width: auto; } <div class="hero-section"></div>

Related

Center images within bootstrap carousel

Making a slideshow fit the screen

How to set the size of the images in the Carousel:

carousel bootstrap images not overlapping each other

Twitter bootstrap carousel left and right controls

Categories

Resources