I have the Twitter Bootstrap carousel working quite well for the most part but my photos are of different widths and the caption on the bottom matches the widest width so when I have photos with less width the caption stays black for the previous width and looks a little unprofessional. My code is as follows and I was wondering if there is any way to fix this problem so the width always matches the photo.
<div class="row">
<div class="span8 offset2">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<!-- here I loop through and add a bunch of photos -->
{% for photo in record_photos %}
<div class="active item">
<img src="some-src">
<div class="carousel-caption">
<h3 class="center-it">some caption</h3>
</div>
</div>
{% endfor %}
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
I suggest picking a span size that will be the optimum size for the photo widths that you have as span will determine the carousel width. Larger images will shrink to the span width. Smaller images you could 'upsize' by placing them in a larger image with a solid (or transparent) background.
Carousel is designed to show images in the span it is in - conceivably you could dynamically alter the width but personally I think the changes would be somewhat visually jarring between images and there would be the back/next button locations to deal with as well.
BTW, note that in your template code above, every item is active. You will need to put some logic into the loop so that only the first loop iteration produces an item with active class
Related
I am trying to use JS Affix to keep 2 blocks in a sidebar column staying fixed on the page.
Upon scrolling, the width of the sidebar is expanded a bit and the expanded portion overlaps the main body column.
I have tried manually setting div widths and using percentages, but all changes I make end up having same behavior.
Here is the relevant code:
<div class="menu block tile-default" id=sidebarmenu" data-spy="affix" data-offset-top="195" data-offset-bottom="300" style="border:0px;">
<img src="/img/sidebar-top.png" class="img-responsive" alt="sidebar image">
<div class="pad">
<ul class="nav nav-pills nav-stacked">
#include('partials/menu')
</ul>
</div>
<div style="background-color: white; height: 10px; border:0px"></div>
<div class="pad" style="border: 4px solid orange; background-color: #1d6899; color: ghostwhite">
<a href="https://zoom.us/webinar/register/Pt9LgDTBR828OXIHOfTLPQ" class="thumbnail" target="_blank">
<img class = "img-responsive" src="/img/img.png" alt="...">
<div class="caption">
<h5 class="text-center">Some Caption</h5>
</div>
</a>
</div>
</div>
You can see what I am talking about here:
https://guitar-dreams.com/guitar-lesson/triad-arpeggios-2-strings/20
There it might be easier to follow the CSS as well.
Notice how when you scroll down, the navigation menu and the block below it expand to the right a bit and overlap the main body. This problem only manifested after I added the 2nd block below the menu.
I have read a lot about strange affix behavior so maybe this is just instance where affix is not ideal solution. In any case, wondering if there is some glaring problem causing this that is readily fixed. Me being a guitarist trying to do some basic coding I am sure I am overlooking something obvious!
Thanks!
Brian
The Carousel I added to my site behaves really strange. In a periode of 2 the slide slides up. The height of the parent div changes to 0px and the margin of the child div gets a negative margin. In a the examples on the bootstrap site this isn't happening. I copied the latest code from the bootstrap site, can't find what i am doing wrong.
I would love it if someone could help me.
http://humandemo.cloudaccess.host Header right at the top op the page.
Code used:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 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>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="/images/page-specific/home/iPhone-Comp-hw.png" alt="Second Slide">
</div>
<div class="item">
<img src="/images/page-specific/home/iPhone-Comp-hw.png" alt="First Slide">
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
I guess this is the work of the mootools-more.js. This script includes the Fx.Slide class:
The slide effect slides an Element in horizontally or vertically. The contents will fold inside.
Try to comment this script.
#Jeroen: I have checked your website and tried some changes with Css by "Inspect Element" and As per me You should check div id="myCarousel" and div class="carousel-inner". If they have been set with some height or not. Hope this helps you.
Your Bootsrap carousel code is perfect, there is no issue with that. There may be issue with your another script, I have used your code in the codepen and its works perfectly fine.
I did some research after the answer of #Gleb Kemarsky, thank you for that. And indeed mootools conflicts with bootstrap, see: https://github.com/joomla/joomla-cms/issues/475
The fix is:
if (typeof jQuery != 'undefined') {
(function($) {
$(document).ready(function(){
$('.carousel').each(function(index, element) {
$(this)[index].slide = null;
});
});
})(jQuery);
}
I bought Revolution Slider plugin for HTML (not wordpress) and i have wierd problem.
So i tried putting example slider on my page, and instantiate it, and everything works. I want full width slider with 420px height... But when i putt 420px in initialization of slider, i dont see textual content, because image gets to much in width and it makes overflowed slider thats hidden below content.
I dont know how to have full width image acting like background-size:cover in css... I dont want it to have auto height.
<!-- START REVOLUTION SLIDER 5.0 -->
<div class="rev_slider_wrapper">
<div id="slider1" class="rev_slider_wrapper fullwidthbanner-container" data-version="5.0">
<ul>
<li data-transition="fade">
<!-- MAIN IMAGE -->
<img src="img/slide1.jpg" alt="" >
<!-- LAYER NR. 1 -->
<div class="tp-caption News-Title"
data-x="left" data-hoffset="80"
data-y="top" data-voffset="450"
data-whitespace="normal"
data-transform_idle="o:1;"
data-transform_in="o:0"
data-transform_out="o:0"
data-start="500"></div>
</li>
<li data-transition="fade">
<!-- MAIN IMAGE -->
<img src="img/slide2.jpg" alt="" >
<!-- LAYER NR. 1 -->
<div class="tp-caption News-Title"
data-x="left" data-hoffset="80"
data-y="top" data-voffset="450"
data-whitespace="normal"
data-transform_idle="o:1;"
data-transform_in="o:0"
data-transform_out="o:0"
data-start="500"></div>
</li>
</ul>
</div><!-- END REVOLUTION SLIDER -->
</div><!-- END OF SLIDER WRAPPER -->
and tihs is init
jQuery(document).ready(function() {
jQuery("#slider1").revolution({
sliderType:"hero",
sliderLayout:"auto",
delay:9000,
navigation: {
arrows:{enable:true}
}
});
});
i tried here in init to put gridheight, gridwidth, sliderType:"fullwidth", sliderType:"standard", but none of that gives me fixed max width on image :S image is 1440x430, and i want it to take full width, and height as it can be, without stretching and taking more then those 430px.
What am i doing wrong. Here is no css at all, its bootstrap used, and no custom css on slider
I have a strange behaviorin Bootstrap Carousel which I am using with AngularJS. Below is the HTML code where I am trying to dynamically add background color to each thumbnail. What I observe is the following:
Initially, the "active" part of carousel adds background color dynamically to each thumbnail as expected.
However, once I start rotating the carousel, all thumbnails lose their background color.
Now, when I reload the page, all thumbnails get background color again.
So I cannot understand what causing the loss of background color initially during rotation? Thanks.
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div ng-repeat="imgSet in imgSets" ng-class="{item: true, active : $first}">
<div ng-class="row">
<div ng-repeat="img in imgSet track by img.id" class="col-sm-3">
<a href="/appDetail/{{img.id}}" class="thumbnail" style="background-color: {{img.tile_color}};">
<img ng-src="{{uri}}/{{img.image}}" alt="Image" class="img-responsive" height="{{img.tile_height}}" width="{{img.tile_width}}">
</a>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
</div>
<!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
Well I found how to fix it, but I still do not understand why the original is not working (and why the fix is working):
my {{img.tile_color}} is a string of the form "#1956B7" (or any other #). I thought one must have "#" sign in front of the number. When I removed the "#" it started working.
Please take a look at the carousel in this link.
Is there a way I can alter the code of Twitter Bootstrap's carousel to make the images slide properly instead of messing up like they do now?
Try to add to the outer div containing the carousel with classname 'carousel', the extra classname: 'slide'.
You will get an sliding carousel with this:
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</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>
I looked at your code and all of your images are wrapped within a <div class="item">...</div> which is correct. However, one of these must be set to active so you'd need to make one of them <div class="item active">.