Highlighted

sizing images in bootstrap carousel - followup

Explorer ,
Nov 22, 2017

Copy link to clipboard

Copied

I would like to thank Osgood and Nancy O'Shea for help with sizing images in a Bootstrap carousel. I marked the question "answered".

For a novice like me a Bootstrap carousel has a great appeal - it's a free, one-click operation. I just wish there were more documentation/guidance that came along with it.

For example - Bootstrap creates an ID "carousel1" and three classes "carousel-inner", "item-active", and "center-block". After trial and error I found that the only class which lent itself to CSS styling of the images was "center-block". By setting the width to "100%" and max-height to "auto", I am getting pretty good results. Obviously if you can crop all the images the same, you can avoid surprises.

Kevin

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

I think you might be missing something.

<!doctype html>

<html lang="en-US">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.7 Carousel</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

.center-block {float:none}

.carousel img {width:100%; height:100%}

</style>

</head>

<body>

<div class="container-fluid">

FULL WIDTH HEADER &AMP; NAVIGATION HERE....

</div>

<hr>

<div class="container">

<div class="row">

<div class="col-md-10 center-block">

<!--begin Bootstrap Carousel-->

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5200">

<!-- 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="https://placeimg.com/640/480/nature" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="https://placeimg.com/640/480/arch/3" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="https://placeimg.com/640/480/tech" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="https://placeimg.com/640/480/animals" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<!--end active-->

</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>

<!--end carousel-->

</div>

<!--/column--></div>

<!--/row--></div>

<!--/container--></div>

<hr>

<div class="container-fluid">

<div class="row">

FULL WIDTH FOOTER

</div>

</div>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Bootstrap 3 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

TOPICS
How to, Performance

Views

8.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

sizing images in bootstrap carousel - followup

Explorer ,
Nov 22, 2017

Copy link to clipboard

Copied

I would like to thank Osgood and Nancy O'Shea for help with sizing images in a Bootstrap carousel. I marked the question "answered".

For a novice like me a Bootstrap carousel has a great appeal - it's a free, one-click operation. I just wish there were more documentation/guidance that came along with it.

For example - Bootstrap creates an ID "carousel1" and three classes "carousel-inner", "item-active", and "center-block". After trial and error I found that the only class which lent itself to CSS styling of the images was "center-block". By setting the width to "100%" and max-height to "auto", I am getting pretty good results. Obviously if you can crop all the images the same, you can avoid surprises.

Kevin

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

I think you might be missing something.

<!doctype html>

<html lang="en-US">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.7 Carousel</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

.center-block {float:none}

.carousel img {width:100%; height:100%}

</style>

</head>

<body>

<div class="container-fluid">

FULL WIDTH HEADER &AMP; NAVIGATION HERE....

</div>

<hr>

<div class="container">

<div class="row">

<div class="col-md-10 center-block">

<!--begin Bootstrap Carousel-->

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5200">

<!-- 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="https://placeimg.com/640/480/nature" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="https://placeimg.com/640/480/arch/3" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="https://placeimg.com/640/480/tech" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="https://placeimg.com/640/480/animals" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<!--end active-->

</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>

<!--end carousel-->

</div>

<!--/column--></div>

<!--/row--></div>

<!--/container--></div>

<hr>

<div class="container-fluid">

<div class="row">

FULL WIDTH FOOTER

</div>

</div>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Bootstrap 3 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

TOPICS
How to, Performance

Views

8.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 22, 2017 0
Adobe Community Professional ,
Nov 22, 2017

Copy link to clipboard

Copied

.center-block is a specific Bootstrap utility class for centering block-level elements. 

Do not use that for this.  Instead, target the carousel img in your custom CSS file.

.carousel img {

     width: 100%

}

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
Explorer ,
Nov 22, 2017

Copy link to clipboard

Copied

Hi, Nancy

Thank you for your continuing efforts.

Your suggestion (below), as styled through CSS Designer, has no effect on the images

.carousel img {

     width: 100%

}

Please note - in the Bootstrap java script there is no mention of a class named "carousel" and no mention of the "img" element (aside from "img src"). What is mentioned is:

<div class="carousel-inner" role="listbox">

     <div class="item active"><img src="images/2016/lisa-couch.jpg" alt="" class="center-block">

       <div class="carousel-caption">

         <h3>heading text</h3>

         <p> caption text</p>

          </div>

        </div>

All of this is contained in a div with ID "carousel1". I've tried to style all these classes and ID without success except for the "center-block" class.

Help!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
Adobe Community Professional ,
Nov 22, 2017

Copy link to clipboard

Copied

I think you might be missing something.

<!doctype html>

<html lang="en-US">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.7 Carousel</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

.center-block {float:none}

.carousel img {width:100%; height:100%}

</style>

</head>

<body>

<div class="container-fluid">

FULL WIDTH HEADER &AMP; NAVIGATION HERE....

</div>

<hr>

<div class="container">

<div class="row">

<div class="col-md-10 center-block">

<!--begin Bootstrap Carousel-->

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5200">

<!-- 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="https://placeimg.com/640/480/nature" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="https://placeimg.com/640/480/arch/3" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="https://placeimg.com/640/480/tech" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="https://placeimg.com/640/480/animals" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<!--end active-->

</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>

<!--end carousel-->

</div>

<!--/column--></div>

<!--/row--></div>

<!--/container--></div>

<hr>

<div class="container-fluid">

<div class="row">

FULL WIDTH FOOTER

</div>

</div>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Bootstrap 3 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
Explorer ,
Nov 22, 2017

Copy link to clipboard

Copied

Hi, Nancy

Not sure I will be able to make head or tail of the code you sent me. Could we try something else?

I set up a test page and then inserted a Bootstrap carousel from the insert menu. Then I deleted all the extraneous elements -glyphicons, list items, captions etc. Here's what I have left. Note the tag selectors at the bottom:

DWwindow.png

So, for styling, I have to work with one of the following: #carousel1, .carousel, .slide, .carousel-inner, .item-active, .center-block. I realize that I can create a new selector like ".carousel img", but this has not worked. Again, what I am trying for is to keep all the height (of images) the same and have the widths vary according to my different aspect ratios. I am now thinking that this may not be possible.

Also note the "size box" at the lower right corner. Have you looked at this? This size box accepts only numbers, not "auto" or percentages. So maybe I am barking up the wrong tree? Hope you can help.

Kevin

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
Adobe Community Professional ,
Nov 22, 2017

Copy link to clipboard

Copied

I can't see your code but it looks to me like you're ripping out the slide indicators and pagination arrows.  Why?

carousel is the bootstrap class I'm talking about.  It comes after the #id and before .slide.

As for CSS Designer Panels, I never use them.  I always work directly with custom CSS or LESS/SASS files.   Panels are way too painful for me to work with.

Your blue arrow is pointing to the display size.

I don't recommend changing the Carousel's  default settings for sm, md, lg screens or you'll wreak certain havoc.

What size images are you working with?  That might help us better understand what you're struggling with.

Also is your layout using container-fluid (full screen) or just container (which is demi & centered)?

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
Explorer ,
Nov 22, 2017

Copy link to clipboard

Copied

I can't see your code but it looks to me like you're ripping out the slide indicators and pagination arrows.  Why?

I WANTED YOU AND ME TO CONCENTRATE ON STYLING THE IMAGES. ALSO, I DON'T HAVE ANY CODE. I JUST USE THE "ONE CLICK" CODE FROM BOOTSTRAP. I HAVE BEEN USING DREAMWEAVER FOR 2 WEEKS.

carousel is the bootstrap class I'm talking about.  It comes after the #id and before .slide.

As for CSS Designer Panels, I never use them.  I always work directly with custom CSS or LESS/SASS files.   Panels are way too painful for me to work with.

THIS IS NOT HELPFUL FOR A NOVICE

Your blue arrow is pointing to the display size.

I don't recommend changing the Carousel's  default settings for sm, md, lg screens or you'll wreak certain havoc.

OK

What size images are you working with?  That might help us better understand what you're struggling with.

BASICALLY 1500PX X 1000PX FOR A HORIZONTAL. MY VERTICALS ARE 1000PX X 2000PX. AGAIN, WHAT I AM TRYING TO ACHIEVE IS TO DISPLAY IMAGES OF DIFFERENT SHAPES AND SIZES WITHIN THE SAME WINDOW USING PERCENTAGES - WHERE THE HEIGHT ADJUSTS TO THE SIZE OF THE WINDOW (AVAILABLE SPACE).

COULD YOU ANSWER THIS MAYBE? - HAVE YOU BEEN ABLE TO ACHIEVE THIS IN PRACTICE? THE ".CAROUSEL IMG" SELECTOR IS NOT WORKING FOR ME.

Also is your layout using container-fluid (full screen) or just container (which is demi & centered)?

NO IDEA WHAT YOU ARE TALKING ABOUT - SORRY. I JUST HIT "INSERT". THERE IS NO "CONTAINER" BEYOND THE CAROUSEL.

SORRY FOR ALL THE CONFUSION.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2017 0
Adobe Community Professional ,
Nov 23, 2017

Copy link to clipboard

Copied

IMO, your images are too big for an image slider.  Ideally the image slider should engage users without making them scroll up, down or sideways to see the entire image.   And since your images are bigger than an average display, the user experience is not going to be positive.  If anything, it will be annoying.

To give you an example of what I mean, below is a carousel slider used on the client's home page.  It's big but it's not massive.  It fits nicely on an average display and users can see the entire image without using scrollbars.  BTW, I used same-sized images throughout.

If you're married to using the Carousel image slider,  I suggest scaling and arranging your pictures in Photoshop to create same sized slides like this:

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2017 1