1 Correct answer
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" crosso
...
7
Replies
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:
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
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)?
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.
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:
AdChoices