Bootstrap 3 carousel white background underneath slide when sliding - javascript

I am using the latest version of Bootstrap on my website. Every time the carousel slides, a white background appears below the slide image.
Where is this coming from and how do I get rid of it? Images are of different sizes.

May its the default background color of the carousel or something underneath .
To find the origin of that , try overriding the background color of carousel or body or html or may be the container underneath it with a different background color .
To avoid that change height of images to
height:100% ; or height:"100vh";
if the above doesn't work also set height for the html/body element

You need to set the height of the image to 100% so that it covers the entire height of the carousel container. To do this you will have to set all of the images parent containers to 100% also you will have to give your .carousel a specific height. So you will have to set the.carousel to something like height: 500px and then set the .carousel-inner, the .item and the .item img all to height: 100%;. If you want to preserve the resolution of the image then you can get rid of the image tag and give each slide another class eg. .slide-one, .slide-two, .slide-three ect. Then you can give each of these classes a background image and set it to cover but you will still have to set the carousel height to a certain height and then set .carousel-inner and .item to height: 100%. Here is an example fiddle that I show people to make their carousels truely responsive. It uses padding bottom to the .carousel-item and then you set this to a percentage. Then mess with this padding-bottom percentage to get your desired height. And then set each item to have a background image. Here is the fiddle that you may want to look at
Carousel Fiddle
But to get your carousel to work you need to do like I stated earlier and set the image and it's parents containers height to 100%. If you don't want to mess with any of that you can resize your images to all be the same size with many of the webs image resizers you can just google resize image to find one.
Hopefully this all helps

Related

Prevent playing of animation in different divs(having same animation effect) loading at different screen sizes

I have a landing page that uses three divs. Out of three only one div is set to display at any specific screen size. Each div loads at a specific screen size using media queries.
Div1 ---> upto 800px width
Div2 ---> Between 801px to 1400px width
Div3 ---> Above 1400px width
Every time the page load the background image in my div change from a black and white image to a color image using the CSS filters
The problem arises when I resize my windows. For example, on resizing my window to a smaller screen size/window size; Div2 becomes set to display:none and Div1 is now visible. As a result since the div is loaded, it loads the black and white to color CSS filter effect once again. However this effect is only supposed to play once during page load and not when the browser is resized or if my ipad is rotated(the screen width increases).
Can anyone suggest me a solutions for this. I was thinking of preventing any animations play after a certain specified time (the time that it takes the background animation to play from page load). Can anyone guide me to how this can be done or help with a better solution
One way to do it could be adding a CSS class .animate on parent element and remove that class once CSS filter transition ended. It could be done via transitionend event. More about it here: https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/
Then, in your CSS you could create CSS filter effect on .animate .div1 {...} selector only.

Changing DIV size vs Change its BG size (perfomance)

So, e.g. i have a div, i need to enlarge on mouseover.
I know 2 ways to do it:
a)actually to enlarge the DIV
b)Since I've heard of JS operating with
DOM is its main problem, it came to my mind, that we can create 2
DIVs, 1 stands for enlarged size, 2nd for minimized, BG size of
enlarged is equal to size of minimized DIV, e.g. 70%
On minimized DIV mouseenter - triggers function which set bg size to 100% of enlarged DIV's size
Scheme here: Bordered DIV - stands for Enlarged DIV, with 70% size of BG; minimized div has zero opacity, sized to image precisely
TL;DR
So which method is faster: operate with DIV's size itself, or operate with its css properties? Hope I describe my thoughts clear.
The most performant way for the browser is usually the css transform to make something bigger, since its hardware accelerated and doesn't conflict with the positioning of the DOM at all. it's also the easiest way to animate things :)
demo: https://jsfiddle.net/v0k69mq3/
html:
<div>foo</div>
css:
div:hover {
transform:scale(1.5)
}

Flexslider slide with centered image in fixed aspect ratio div

I am using a theme which employs the flexheader to show banner images. Since it's a theme, I cannot really modify the options of the slide show directly and am trying to work around it.
What I want is height of the banner to stay the same. 16:9 images use the entire banner space, but lower aspect-ratio images are centered with solid background color around them.
So I am trying to pass a particularly styled div as list item (slide): I create 16:9 div and solid gray background.
Here is an example, which mostly works, but the slide with the logo is stretched. How can I keep the image aspect ratio and keep the image in the horizontal center? Or is there a much easier way to achieve what I want?
To achieve what you want, you need to remove the height: 100% !important from the image element, because that piece of code is stretching it.
.flexslider .slides img {
width: auto;
}
But the image wont be filling the whole slider area, as there will be a gap on both sides, but it wont be stretched. To make the images fill the whole slide, you would need to upload the image in the correct size. Hope you understood what I've meant.

Bootstrap thumbnail alignment (horizontal)

I added the thumbnail class to my thumbnails div, which had the intended effect. However, some of the thumbnails were smaller in size than the others. I wanted them to have the same height so I gave each thumbnail a height of 210px, thinking that would now appear the same all aligned horizontally in a line. However, setting the height had the strange effect of making the smaller thumbnails jut out of the alignment by extending below. I tried solving this by setting the css property of top: 0px; on each thumbnail, but that did not make any difference. How can I get all my thumbnails to be the same height AND be perfectly aligned horizontally?
The problem was eventually solved by adding style element overflow: hidden; to the thumbnail class.
If you are using bootstrap, did you try putting each image in its own div class for columns? If you are at all thinking of responsive design (which is why one typically uses bootstrap) this might help you get them to align extremely quickly and easily.
http://getbootstrap.com/2.3.2/scaffolding.html, take a look at the live fluid grid part.

Responsively Scaled Image in CSS

I'm creating a slideshow with jQuery Cycle, and I need to be able to resize the images in the slideshow responsively with css. So far, cycle has been so controlling of the width and height of the images that I haven't been able to do it. I have been able to achieve the images resizing according to window width when I refresh the page, but the images won't dynamically resize when resizing the window. I'm trying to work out a solution in Javascript, but I'd really like to be able to get away with pure css.
jQuery Cycle is setting widths inline on the <img> tags. That's the first problem. I would try removing that, it looks like the options for Cycle has this value slideResize, try setting that to false or 0.
The next step would be setting a max-width on the container, and width: 100% on the imgs.
Just a suggestion - but you'll probably want to use something like JavaScript (or an AJAX service or something) to handle this because if you were to handle resizing the images within the browser that is going to put an incredible amount of strain on the browser to handle all of the resizing and scaling.
You may want to target specific resolutions and serve the images based on the "closest" viewport size accordingly.
you can set the width or height of the image related to a container
.container{width:200px}.container img {width:100%}
Hope this helps!
Set the img elements width to 100% and height to auto to take aspect ratio into account. If you don't want the image to be 100% of the browser, add a container element.
Your best bet to make a image responsive, this is without it being inside a container btw.
img {
width: 100%;
height: auto;
}
Now, it will stretch to the width of the page, but if its contained it will stretch to the width of the container, the thing to try is, making the container grow and shrink as well.

Categories