Please take a look at the following image, we are using bootstrap carousel to rotate the images.
However, when the window width is large, the image doesn't align with the border properly.
But the carousel example provided by bootstrap always works fine, no matter the width of the window. Following the code.
Can someone explain why carousel is behaving differently?
Is this anything to do with Image size or some bootstrap config is missing?
<section id="carousel">
<div class="hero-unit span6 columns">
<h2>Welcome to TACT !</h2>
<div id="myCarousel" class="carousel slide" >
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" >
<img alt="" src="/eboxapps/img/3pp-1.png">
<div class="carousel-caption">
<h4>1. Need a 3rd party jar?</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-2.png">
<div class="carousel-caption">
<h4>2. Create Request</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-3.png">
<div class="carousel-caption">
<h4>3. What happens?</h4>
</div>
</div>
<div class="item">
<img alt="" src="/eboxapps/img/3pp-4.png">
<div class="carousel-caption">
<h4>4. Status is Emailed</h4>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
The solution is to put this CSS code into your custom CSS file:
.carousel-inner > .item > img {
margin: 0 auto;
}
With bootstrap 3, just add the responsive and center classes:
<img class="img-responsive center-block" src="img/....jpg" alt="First slide">
This automatically does image resizing, and centers the picture.
Edit:
With bootstrap 4, just add the img-fluid class
<img class="img-fluid" src="img/....jpg">
I faced the same problem and solved it this way:
It's possible to insert non-image content to Carousel, so we can use it.
You should first insert div.inner-item (where you will make center alignment), and then insert image inside this div.
Here is my code (Ruby):
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<%= image_tag "couples/1.jpg" %>
</div>
<% (2..55).each do |t|%>
<div class="item">
<div class='inner-item'>
<%= image_tag "couples/#{t}.jpg" %>
</div>
</div>
<% end -%>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
And my css-code(.scss):
.inner-item {
text-align: center;
img {
margin: 0 auto;
}
}
While vekozlov's answer will work in Bootstrap 3 to center your image, it will break when the carousel is scaled down: the image retains its size instead of scaling down with the carousel.
Instead, do this on the top-level carousel div:
<div id="my-carousel" class="carousel slide"
style="max-width: 900px; margin: 0 auto">
...
</div>
This will center the entire carousel and prevent it from growing beyond the width of your images (i.e. 900 px or whatever you want to set it to). However, when the carousel is scaled down the images scale down with it.
You should put this styling info in your CSS/LESS file, of course.
In Bootstrap 4, you can add mx-auto class to your img tag.
For instance, if your image has a width of 75%, it should look like this:
<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">
Bootstrap will automatically translate mx-auto to:
ml-auto, .mx-auto {
margin-left: auto !important;
}
.mr-auto, .mx-auto {
margin-right: auto !important;
}
Does your images have exactly a 460px width as the span6 ? In my case, with different image sizes, I put a height attribute on my images to be sure they are all the same height and the carousel don't resize between images.
In your case, try to set a height so the ratio between this height and the width of your carousel-inner div is the same as the aspectRatio of your images
It could have something to do with your styles. In my case, I am using a link within the parent "item" div, so I had to change my stylesheet to say the following:
.carousel .item a > img {
display: block;
line-height: 1;
}
under the preexisting boostrap code:
.carousel .item > img {
display: block;
line-height: 1;
}
and my image looks like:
<div class="active item" id="2"><img src="rimages/2.jpg"><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div>
I think I have a solution:
In your personal style sheet page, assign the width & height to match your image dimensions.
Create an additional separate "class" on that top div that appropriates the space with spans...(Shown below)
<div class="span6 columns" class="carousel">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
Without touching the bootstrap.css, in your own style sheet, call "carousel"(or whatever label you choose) to match the width and height of your original pix!
.carousel {
width: 320px;
height: 200px;
}
So in my case, I am using small 320x200 images to carousel with. There is probably preset dimensions in the bootstrap.css, but I don't like changing that so I can try to stay current with future releases. Hope this helps~~
I am facing the same problem with you. Based on the hint of #thuliha, the following codes has solved my issues.
In the html file, modify as the following sample:
<img class="img-responsive center-block" src=".....png" alt="Third slide">
In the carousel.css, modify the class:
.carousel .item {
text-align: center;
height: 470px;
background-color: #777;
}
Try this
.item img{
max-height: 300px;
margin: auto;
}
#Art L. Richards 's solution didn't work out.
now in bootstrap.css, original code has become like this.
.carousel .item > img {
display: block;
line-height: 1;
}
#rnaka530 's code would break the fluid feature of bootstrap.
I don't have a good solution but I did fix it. I observed the bootstrap's carousel example very carefully http://twitter.github.com/bootstrap/javascript.html#carousel.
I find out that img width has to be larger than the grid width. In span9, width is up to 870px, so you have to prepare a image larger than 870px. If you have more container outside the img, as all the container has border or margin something, you can use image with smaller width.
For the carousel, I believe all images have to be exactly the same height and width.
Also, when you refer back to the scaffolding page from bootstrap, I'm pretty sure that span16 = 940px. With this in mind, I think we can assume that if you have a
<div class="row">
<div class="span4">
<!--left content div guessing around 235px in width -->
</div>
<div class="span8">
<!--right content div guessing around 470px in width -->
</div>
</div>
So yes, you have to be careful when setting the spans space within a row because if the image width is to large, it will send your div over into the next "row" and that is no fun :P
Link 1
Insert this on the css parent div class where your carousel is.
<div class="parent_div">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="assets/img/slider_1.png" alt="">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
</div>
CSS
.parent_div {
margin: 0 auto;
min-width: [desired width];
max-width: [desired width];
}
Related
I have the following code with a screen attached.
As you can see there are 3-col with the image and title but they are not aligned either their padding is the same.
The overall section is on the left side and has a lot of space from the right.
Any idea how to make them equal in height and width?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" integrity="sha512-XWTTruHZEYJsxV3W/lSXG1n3Q39YIWOstqvmFsdNEEQfHoZ6vm6E9GK2OrF6DSJSpIbRbi+Nn0WDPID9O7xB2Q==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div id="section-top-homepage">
<!-- vission -->
<div class="col-md-4 col-sm-4">
<div class="whitecolor">
<img alt="" data-entity-type="file" data-entity-uuid="3afd4d82-63ca-4046-b77c-1d3815e959cf" src="/tilesw/sites/default/files/inline-images/vision.svg" />
<h3 class="top25">Vision</h3>
</div>
</div>
<!-- objectives -->
<div class="col-md-4 col-sm-4">
<div class="whitecolor">
<img alt="" data-entity-type="file" data-entity-uuid="6e0a289f-a866-4d46-81c8-6f2f6aceecd8" src="/tilesw/sites/default/files/inline-images/objectives.svg" />
<h3 class="top25">Objectives</h3>
</div>
</div>
<!-- mission -->
<div class="col-md-4 col-sm-4">
<div class=" whitecolor">
<img alt="" data-entity-type="file" data-entity-uuid="aeaa7c28-c987-4174-a2c2-5fa45de0ab83" src="/tilesw/sites/default/files/inline-images/mission.svg" />
<h3 class="top25">Mission</h3>
</div>
</div>
</div>
I use bootstrap, but the red section showing the three icons has the following code which i think affected the entire row content not be organized.
section#block-counterboxstyle3 {
display: block;
box-sizing: border-box;
height: 300px;
background-color: #e00021;
clip-path: ellipse(550% 100% at 400% 100%);
margin-top: -200px;
}
Are you using bootstrap ?
When you set a class like col-4, you only set the width of each bloc, you need to set a max-heigth on css or in tag IMG using height.
Example:
Set the width of the wrapping div with id id="section-top-homepage to 100% of the page. You can confirm this by setting its border to 1px solid red. This worked for me.
I've positioned Vis-network within flex sections.
You can see the full code here: https://codepen.io/MadBoyEvo/pen/XWdgzoB (try moving elements down)
The problem is whenever I try to resize the height of the section manually to '1000px' or whatever value the height of the diagram stays the same. When I push height directly to diagram sections resize properly. But this is problematic when I put something on the right side that expands the main section, and the diagram stays put with the default size. I tried to use autosize for vis.js but it doesn't seem to affect anything.
var options = {
"interaction": {
"hover": true
},
"autoResize": true
};
I tried height/width 100% and it seems it treats min-height as max-height as well.
.diagram {
min-height: 400px;
width: 100%;
height: 100%;
border: 0px solid unset;
}
.vis-network:focus {
outline: none;
}
<div class="defaultSection overflowHidden">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a name="Diagram - Defaults">Diagram - Defaults </a> <a id="show_192677063" href="javascript:void(0)" onclick="show('192677063'); " style="display:none">(Show)</a><a id="hide_192677063" href="javascript:void(0)" onclick="hide('192677063'); ">(Hide)</a></div>
</div>
<div style="height:1000px" name="192677063" id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="defaultSection overflowHidden">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a> </a> <a id="show_376758632" href="javascript:void(0)" onclick="show('376758632'); " style="display:none">(Show)</a><a id="hide_376758632" href="javascript:void(0)" onclick="hide('376758632'); " style="display:none">(Hide)</a></div>
</div>
<div name="376758632" id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="diagram" style="position:relative">
<div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
</div>
</div>
</div>
</div>
<div class="flexPanel overflowHidden defaultPanel">
<div></div>
</div>
</div>
</div>
</div>
I guess it could be related to position relative/absolute - but if i remove it diagram resize itself automatically slowly which looks very weird.
<div class="diagram" style="position:relative">
<div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
</div>
The end goal for me is to have a diagram resize automatically if something on the right side expands, and shrink if it's smaller (min 400px), unless I force the diagram to a static value. Also if I set sections/panels to something bigger I would like diagram to resize itself to match it.
Right now it seems I am fighting flex to position it properly.
On the path from the element with height:1000px to the element containing the diagram, there is a div element which does not propagate the height.
This can be fixed by setting display:flex on that element, see css class fix1 and its corresponding html element in the code below.
The other css class, fix2, shows how you can make the right panel autosize its width (based on the width of its content and a minimum width you choose, 600px in this example) a have the left panel take up the remaining space.
.fix1 {
display: flex;
flex-direction: column;
}
.fix2 {
flex-basis: auto !important;
min-width:600px;
}
<div class="defaultSection overflowHidden">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a name="Diagram - Defaults">Diagram - Defaults </a> <a id="show_192677063" href="javascript:void(0)" onclick="show('192677063'); " style="display:none">(Show)</a><a id="hide_192677063" href="javascript:void(0)" onclick="hide('192677063'); ">(Hide)</a></div>
</div>
<div style="height:1000px" name="192677063" id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="defaultSection overflowHidden fix1">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a> </a> <a id="show_376758632" href="javascript:void(0)" onclick="show('376758632'); " style="display:none">(Show)</a><a id="hide_376758632" href="javascript:void(0)" onclick="hide('376758632'); " style="display:none">(Hide)</a></div>
</div>
<div name="376758632" id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="diagram" style="position:relative">
<div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
</div>
</div>
</div>
</div>
<div class="flexPanel overflowHidden defaultPanel fix2">
<div></div>
</div>
</div>
</div>
</div>
You can see the full code here
I just want my all images from my instafeed will all be the same size, shouldn't be distorted and image will resize freely (responsive), and i want it to look exactly like this: instagram images , we can zoom the image a bit and make overflow hidden, its just i dont know the tricks :)
here is my work: http://jsfiddle.net/jazzu20/1c9yf61x/
img {
max-width: 100%;
border: 0;
}
.col-md-3 {
width: 25%;
float: left;
}
.livery-instafeed-section {
min-height: 285px;
}
<div class="livery-instafeed-section col-md-12">
<div id="instafeed">
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9JOiOdMLo5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/11251638_621920521284538_937019183_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Gp4RjMLgE/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/s640x640/sh0.08/e35/1390058_175285799480082_576833592_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9FJpd7MLts/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12093236_443227142549068_286565452_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9D_lqkMLqV/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12145135_1069396733117579_706096349_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9Bb92JMLhh/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12093429_1668694736699760_1827692759_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/9ACbbHMLlD/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12135431_1733638416868070_1024332902_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/8_BXkSsLn5/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12105054_849750965144841_2082888771_n.jpg">
</a>
</div>
<div class="col-md-3" style="padding:0;">
<a href="https://instagram.com/p/89fRuosLje/" target="_blank">
<img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12107557_866233773472414_1869843871_n.jpg">
</a>
</div>
</div>
Here's a fiddle.
Explanation of what happens here:
First of all, I've moved the images to be a background image of the anchor (<a>) tag. That gives you a lot more flexibility, because you can make use of the background-position and background-size properties.
Next I've positioned the anchor absolute (and the column relative to make sure the anchor is taking account of it's parents size) and made it as heigh and wide as the column.
Now you have the same width, but not the same height, as the column doesn't have a height from itself. Giving it a percentual height doesn't help you, because that would be relative to the parent, while you want to have the column to have a height relative to it's own height. And now kicks in the classic padding trick; give the element a bottom-padding and make it's child 100% the height of it's parent, like so:
.parent { width: 25%; padding-bottom: 25%; } /* .col-md-3 in your case */
.child { position: absolute; width: 100%; height: 100%; }
So now we have perfectly square elements, with the images as a background. This would normally suffice, because with background-size: cover the browser would make sure the image would span the whole div. But as you have images with white borders (to the side and the top/bottom) you'll have to zoom those to correct it. And the larger the borders (eg. for panorama images) the bigger the zoom size. That's why I have created the .zoom and .zoom2 classes, which just increases the background-size property.
There you go!
I made a FULL SCREEN slider using carousel bootstrap.
When the screen size get smaller, the background image resized and centered.
I don't want to make it centered when the screen get smaller, but I want to make the background image focus on the right instead.
this is how the background image looks like on normal screen (it's fullscreen slider):
Normal Screen
this is how the background image looks like on smaller screen (still fullscreen):
Smaller Screen
This is what I've done
#media (max-width: 768px) {
.carousel-inner>.item{
position: relative;
}
.carousel-inner>.item>img{
position: absolute;
top: 0;
right: 0;
}
}
<div class="carousel-inner">
<div class="item active">
<img id="h-1" src="Assets/1.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<h1>C</h1>
<hr>
<ul class="descslider">
<li>asd</li>
<li>qwe</li>
<li>zxcv</li>
</ul>
</div>
</div>
</div>
<div class="item">
<img id="h-2" src="Assets/2.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<h1>C</h1>
<hr>
<ul class="descslider">
<li>asd</li>
<li>qwe</li>
<li>zxcv</li>
</ul>
</div>
</div>
</div>
<div class="item">
<img id="h-3" src="Assets/3.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<h1>C</h1>
<hr>
<ul class="descslider">
<li>asd</li>
<li>qwe</li>
<li>zxcv</li>
</ul>
</div>
</div>
</div>
</div>
that thing that I've tried didn't work at all
Pls help, thanks :)
Okay I got what you're looking for now, you want it to resizes with the image on the right at a certain breakpoint when the window resizes. Bootstrap has what amounts to float classes pull-right, and pull-left.
I used jQuery to apply these classes when the viewport size is below 768px, and added some custom CSS as well.
JS:
$(window).on('resize', function() {
if($(window).height() > 768) {
$('img').addClass('pull-right');
$('.carousel-caption').addClass('pull-left');
}else{
$('img').removeClass('pull-right');
$('.carousel-caption').removeClass('pull-left');
}
})
CSS:
#media (max-width: 768px) {
.carousel-inner >.item > img{
max-width: 40%;
}
.carousel-caption{
max-width: 40%;
}
}
You can adjust the percentage values in this CSS to customize the width of each element more to your liking.
New CodePen Demo
I tried to create a full page horizontal slider by using fullpage.js plugin. I use only one section with 3 slides.
I tried to add a fixed navigation to slides in the top of page, so user can open the slides directly from the top navigation, but it doesn't work. Can anyone help me how to make it works?
HTML:
<div id="header">
Link to slide 1
Link to slide 2
Link to slide 3
<div>
<div class="section" id="section0">
<div class="slide" data-anchor="slide1">
<h1>Slide 1.js</h1>
This is slide 1
</div>
<div class="slide" data-anchor="slide2">
<h1>Slide 2</h1>
this is slide 2
</div>
<div class="slide" data-anchor="slide3">
<h1>Slide 3</h1>
</div>
</div>
Javascript:
$.fn.fullpage();
CSS
body{
color: #fff;
}
h1{
font-size:3em;
}
.section {
text-align: center;
}
#section0{
background: -webkit-gradient(linear, top left, bottom left, from(#4bbfc3), to(#7baabe));
background: -webkit-linear-gradient(#4BBFC3, #7BAABE);
background: linear-gradient(#4BBFC3,#7BAABE);
}
#header{
position:fixed;
height: 50px;
display:block;
width: 100%;
background: #333;
z-index:9;
text-align:center;
color: #f2f2f2;
padding: 20px 0 0 0;
}
#header{
top:0px;
}
Here's the jsfiddle
Thank you!
Download the last version of the plugin (2.0.7) and use the new HTML markup which uses a wrapper for the plugin:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
Then initialize it this way:
$('#fullpage').fullpage();
And then to create a fixed element just put it outside the plugin wrapper like you can see in this live example sourcecode.
In order to create the links, don't use toSlide, use a normal URL link in case you are using anchors. (such as /#section/slide, for example: http://alvarotrigo.com/fullPage/#secondPage/2)
If you don't want to update your fullpage version for whatever reason, just use the option fixedElements as detailed in the documentation.
I know the topic is already 2 years old yet I faced the very same problem today and stumbled upon this article. Now that I´ve found a solution I thought it would be nice to share it with you guys!
<div class="wrap">
<nav class="nav">
<ul>
<li><a class="nav__item active" href="#firstPage/slide1">1</a></li>
<li><a class="nav__item" href="#firstPage/slide2">2</a></li>
<li><a class="nav__item" href="#firstPage/slide3">3</a></li>
<li><a class="nav__item" href="#firstPage/slide4">4</a></li>
</ul>
</nav>
</div>
<div id="fullpage">
<div class="section">
<div class="slide" data-anchor="slide1"></div>
<div class="slide" data-anchor="slide2"></div>
<div class="slide" data-anchor="slide3"></div>
<div class="slide" data-anchor="slide4"></div>
</div>
</div>
Don´t forget to give the active class to the first anchor.
Note that if you want to set position:fixed; on the navigation outside you probably want to adjust your z-index (I set the z-index:1000; for the the wrap but do as you like)
And for .js I just used what already comes along with the FullPage.js
$('#fullpage').fullpage({
anchors: ['firstPage'],
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
$('.nav__item.active').removeClass('active');
$('.nav__item').eq(slideIndex).addClass('active');
}
});
Now our navigation anchors have an active class depending on the current slide
though I´m not sure if the href targets are best practise yet it works.
Of course you could just initalize the FullPage given navigation but this gives you full control over the markup.