I'm trying to setup a CSS carousel, when I wrote the code the automatic sliding seems to work okay, although it seems little buggy. However the main issue is the prev and next controls don't work properly. Every time you click one of them they always start you from the active-item image so you can never fully click through the images.
<body>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div id="my-slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/parvazlogo.jpg" alt="program" />
<div class="carousel-caption">
<h1></h1>
</div>
</div>
<div class="item">
<img src="images/program1.jpg" alt="programming image" />
<div class="carousel-caption">
<h1>ParwazTech Will Bring your Ideas To Life!</h1>
</div>
</div>
<div class="item">
<img src="images/innovation.jpg" alt="innovation" />
<div class="carousel-caption">
<h1>Learn More about Us</h1>
</div>
</div>
<div class="item">
<img src="images/office.jpg" alt="deal struck" />
<div class="carousel-caption">
<h1>Start looking at deals now!</h1>
</div>
</div>
<a class="left carousel-control" href="#my-slider" 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="#my-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
#MatiasFernandezMartinez
https://youtu.be/7Hr-EBEpVJ0 this is a video of the problem just to prove it is happening. As you can see the bottom three buttons work fine but the two left and right buttons bring up the problem I described
I'm assuming the problem is with my bootstrap or my jquery since the code does not bring you all problems
Related
I have a bootstrap 5 carousel with controls. My desired output is a slideshow with 2 items per slide and I would like to scroll through one image at a time.
From here:
To here:
The problem with solutions I have found which use the bootstrap grid system like the ones posed on this topic are that they rely on the correct multiple of items to work and they scroll two items per click, not one. A lot of the solutions I have found online are buggy or overcomplicated.
Is there a simple way to achieve this?
you mean like this ?
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active ">
<div class="col-12 row">
<div class="col-6" style="background-color: yellow; height: 10vh;"></div>
<div class="col-6 " style="background-color: blue; height: 10vh;"></div>
</div>
</div>
<div class="carousel-item">
<div class="col-12 row">
<div class="col-6" style="background-color: red; height: 10vh;"></div>
<div class="col-6 " style="background-color: green; height: 10vh;"></div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I have a carousel which is actually a form.
One carousel item is a multi selectbox
How can i auto increase the height on only one carousel-item as the height of the multi select box increase.
The image 1 is how i get.
Image 2 how i want it.
Much thanks for much insights. I cannot refresh the carousel. It will unset my form inputs
<div class="row no-gutters" id="mob-carousel-row" [style.height.px]="mobileCarouselRowHeight">
<div class="col-1 col-sm-1">
<a href="#carouselExampleIndicators" role="button" data-slide="prev">
<i class="fa fa-angle-left mobile-form-nav" ></i>
</a>
</div>
<div class="col-10">
<div
#plMobileCarouselForm
id="carouselExampleIndicators"
class="carousel slide"
data-ride="carousel"
data-interval="false">
<div class="carousel-inner" role="listbox" id="mob-carousel">
<div class="carousel-item active">
<div class="form-group md-form mob inputbox">
<!-- first input box item -->
</div>
</div>
<div class="carousel-item active">
<div class="form-group md-form mob muti-select">
<!-- muti select box item need auto height -->
</div>
</div>
<div class="carousel-item active">
<div class="form-group md-form mob inputbox">
<!-- first input box item -->
</div>
</div>
</div>
</div>
</div>
<div class="col-1 col-sm-1">
<a href="#carouselExampleIndicators" role="button" data-slide="next">
<i class="fa fa-angle-right mobile-form-nav" ></i>
</a>
</div>
</div>
This is intended as a comment but I can't comment yet.
Since you haven't provided your CSS it's just guess work.
However, if you set the height to auto for the container that contains the input forms or select boxes, it will adjust itself as more options become available.
.carousel-item active {
height: auto;
}
I have a page that has many profiles using bootstrap. The profile was taken from here http://bootsnipp.com/snippets/featured/profile-card.
Problem is that some people's information takes up one more line than the others which cause the profiles not to be even. How do I force them all to be the same size (In this case most of them would be one line longer than they otherwise would, in order to accommodate the few that have more information)?
So for example in the example there the code is this :
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="card hovercard">
<div class="cardheader">
</div>
<div class="avatar">
<img alt="" src="http://lorempixel.com/100/100/people/9/">
</div>
<div class="info">
<div class="title">
<a target="_blank" href="http://scripteden.com/">Script Eden</a>
</div>
<div class="desc">Passionate designer</div>
<div class="desc">Curious developer</div>
<div class="desc">Tech geek</div>
</div>
<div class="bottom">
<a class="btn btn-primary btn-twitter btn-sm" href="https://twitter.com/webmaniac">
<i class="fa fa-twitter"></i>
</a>
<a class="btn btn-danger btn-sm" rel="publisher"
href="https://plus.google.com/+ahmshahnuralam">
<i class="fa fa-google-plus"></i>
</a>
<a class="btn btn-primary btn-sm" rel="publisher"
href="https://plus.google.com/shahnuralam">
<i class="fa fa-facebook"></i>
</a>
</div>
</div>
</div>
</div>
</div>
Let's say you want to accommodate that on someone's profile instead of just saying, Passionate designer, it would say something that takes up two lines, that would then make their entire profile box 1 line longer which would in turn mess up the entire page. How can I fix this?
I am displaying a list of search results. I am using col-md-4 from bootstrap to display 3 results per row - a bit like 3 cards. However when it moves to the next row it starts from the right and then the next item shows up only on the next one left... basically jumping a column.
Following code to be repeated as many time as needed. End goal is to display results like a grid.
<div class="outer-listings-container row-space-8">
<div class="row row-condensed listings-container">
<!-- PART TO REPEAT -->
<div class="col-md-4 row-space-1" data-id="36">
<div class="result">
<div class="panel-image listing-img">
<div id="36" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<a class="center-block" href="#">
<div class="center-block">
<img class="img-responsive center-block" src="#"> </div>
</a>
</div>
<div class="item">
<a class="" href="#">
<div class="center-block">
<img class="img-responsive center-block" src="#">
</div>
</a>
</div>
</div>
<div>
<a class="left carousel-control height-test" id="36" href="#36" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<div>
<a class="right carousel-control height-test" id="36" href="#36" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="panel-overlay-bottom-left panel-overlay-label panel-overlay-listing-label">
<div>
<sup class="h6">€</sup>
<span class="h3">456</span>
<sup class="h6">EUR</sup>
<span class="h6">/session of 2 hours</span>
</div>
</div>
</div>
<div class="panel-body panel-body-result">
<h4>
<div class="row">
<div class="col-xs-2">
<img src="#" class="avatar-sm" alt="Banana"> </div>
<div class="col-xs-10">
Banana R
<br>
<small>Banana R</small>
</div>
</div>
</h4>
<span class="stars2"><span style="width: 0px;"></span></span>
<span><b class="review_score">0</b> (0 reviews)</span>
<p>blabla</p>
<p>more blabla </p>
</div>
</div>
</div>
<!-- END REPEAT -->
</div>
</div>
Problem can be seen on the following page: https://gokyma.com/search?location=Paris%2C+France&country=FR&city=Paris&state=IDF&stype=5&selected_date=&selected_time=&_token=ZHXfiseRlAgE3fLY0f1ywr7qYzj9eFxGkSZ2SFIS
Well, your jsfiddle code is not really representative of the issue, but I guess one solution could be adding <div class="row"></div> for each series of 3 col-md-4 that you have in each line. So, the snippet would look something like this;
<row> <col-md-4> <col-md-4> <col-md-4> </row>
Remember, a row can't contain more than 12 columns.... that's another thing to take into consideration...
Sorry but another bootstrap question, but after 1 1/2 days battling this, I hoped that maybe someone can help me with this.
I have an asp.net 4.5 web form with a bootstrap menu, tabs (they work great!)
During a mobile view I wanted to display an accordion instead of the tabs.
I created a new section and followed the code in bootstraps example, and cannot get it to toggle. When I click on a link nothing happens.
I changed one of the accordion sections to accordion-body collapse in, so that one would section would be open, hoping maybe it would work them.
No luck. It is open when first opening, but once you click on another accordion header, the open one closes and nothing will open.
<section class="hidden-desktop visible-tablet visible-phone">
<div id="accordion2" class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acServ">Services
</a>
</div>
<div id="acServ" class="accordion-body collapse in">
<div class="accordion-inner">
<div>
Services
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acSched">Scheduling
</a>
</div>
<div id="acSched" class="accordion-body collapse">
<div class="accordion-inner">
<div>
Scheduling
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acClient">Clients
</a>
</div>
<div id="acClient" class="accordion-body collapse">
<div class="accordion-inner">
<div>
Clients
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acForm">Formulas
</a>
</div>
<div id="acForm" class="accordion-body collapse">
<div class="accordion-inner">
<div>
Formulas
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acProd">Products
</a>
</div>
<div id="acProd" class="accordion-body collapse">
<div class="accordion-inner">
<div>
Products
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acAbout">About
</a>
</div>
<div id="acAbout" class="accordion-body collapse">
<div class="accordion-inner">
<div>
About
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acStart">Get Started
</a>
</div>
<div id="acStart" class="accordion-body collapse">
<div class="accordion-inner">
<div>
Get Started
</div>
</div>
</div>
</div>
</div>
</section>
Anyone have any ideas of what is going on?
Oh yes, the scripts are ordered like...
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-collapse.js"></script>
<script src="Scripts/bootstrap-transition.js"></script>
and the css is like...
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="Content/Site.css" rel="stylesheet" />
Site.css is some simple changes, (i.e. Colors) I made to bootstrap.css tabs.