Im trying to do a bootstrap carousel with full width for the images (width: 100%) and a fixed height but if I set the width to 100% the height automacally is taking the 100% too
I don't sure if the problem is in my files
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<%= image_tag "slider/slide-bg-1.jpg", class: "tales" %>
</div>
<div class="item">
<%= image_tag "slider/slide-bg-2.jpg", class: "tales" %>
</div>
<div class="item">
<%= image_tag "slider/slide-bg-3.jpg", class: "tales" %>
</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>
and my css file
.tales {
width: 100%;
height: 200px;
}
Are you trying to make it responsive? If you are then I would just recommend the following:
.tales {
width: 100%;
}
.carousel-inner{
width:100%;
max-height: 200px !important;
}
However, the best way to handle this responsively would be thru the use of media queries like such:
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {}
If you use bootstrap 4 Alpha and you have an error with the height of the images in chrome, I have a solution:
The documentation of bootstrap 4 says this:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="..." alt="Third slide">
</div>
</div>
</div>
Solution:
The solution is to put "div" around the image, with the class ".container", like this:
<div class="carousel-item active">
<div class="container">
<img src="images/proyecto_0.png" alt="First slide" class="d-block img-fluid">
</div>
</div>
I recommend the following for Bootstrap 3
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
min-height: 500px; /* Set slide height here */
}
I know this is an older post but Bootstrap is still alive and kicking!
Slightly different to #Eduardo's post, I had to modify:
#myCarousel.carousel.slide {
width: 100%;
max-width: 400px; !important
}
When I only modified .carousel-inner {}, the actual image was fixed size but the left/right controls were displaying incorrectly off to the side of the div.
I had the same problem.
My height changed to its original height while my slide was animating to the left, ( in a responsive website )
so I fixed it with CSS only :
.carousel .item.left img{
width: 100% !important;
}
I have created a responsive sample that works well for me and I find it to be quite simple have a look at my carousel-fill:
.carousel-fill {
height: -o-calc(100vh - 165px) !important;
height: -webkit-calc(100vh - 165px) !important;
height: -moz-calc(100vh - 165px) !important;
height: calc(100vh - 165px) !important;
width: auto !important;
overflow: hidden;
display: inline-block;
text-align: center;
}
.carousel-item {
text-align: center !important;
}
my navigation height+footer are a hair less then 165px so that value works for me. take off a value that fits for you, I overrdide the .carousel-item from bootstrap so make sure by videos are centered.
my carousel looks like this, note the "carousel-fill" on the video tag.
<div>
<div id="myCarousel" class="carousel slide carousel-fade text-center" data-ride="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>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<video autoplay muted class="carousel-fill">
<source src="~/Video/CATSTrade.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="carousel-caption">
<h2>CATS IV Trade engine</h2>
<p>Automated trading for high ROI</p>
</div>
</div>
<div class="carousel-item">
<video muted loop class="carousel-fill">
<source src="~/Video/itrs.mp4" type="video/mp4">
</video>
<div class="carousel-caption">
<h2>Machine learning</h2>
<p>Machine learning specialist</p>
</div>
</div>
<div class="carousel-item">
<video muted loop class="carousel-fill">
<source src="~/Video/frequency.mp4" type="video/mp4">
</video>
<div class="carousel-caption">
<h3>Low latency development</h3>
<p>Create ultra fast systems with our consultants</p>
</div>
</div>
<div class="carousel-item">
<img src="~/Images/data pipeline faded.png" class="carousel-fill" />
<div class="carousel-caption">
<h3>Big Data</h3>
<p>Maintain, generate, and host big data</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
in case some one needs to control the videos like i do, I start and stop the videos like this:
<script language="JavaScript" type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel({ interval: 8000 })
$('#myCarousel').on('slide.bs.carousel', function (args) {
var videoList = document.getElementsByTagName("video");
switch (args.from) {
case 0:
videoList[0].pause();
break;
case 1:
videoList[1].pause();
break;
case 2:
videoList[2].pause();
break;
}
switch (args.to) {
case 0:
videoList[0].play();
break;
case 1:
videoList[1].play();
break;
case 2:
videoList[2].play();
break;
}
})
});
</script>
I found that if you just want to change the height of the element the image takes up, this will be the code that will help.
.carousel-item {
height: 600px !important;
}
However, this won't make the size of the image dynamic, it will simply crop the image to its size.
just put height="400px" into image attribute like
<img class="d-block w-100" src="../assets/img/natural-backdrop.jpg" height="400px" alt="First slide">
Related
I have a slider:http://sakura-city.info/test
The problem is that when changing images, the height of the slider changes, despite the fact that it is hard-coded in the tag.
<div id="myCarousel" class="carousel slide" data-interval="5000" data-ride="carousel">
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<!-- <a href="{{route('createGirlPage')}}"> -->
<img src="<?php echo asset("public/images/anketa.jpeg")?>" class="img-responsive" height="200" width="200" >
<!-- </a> -->
</div>
#foreach($vip as $girl)
<div class="item" data-slide-number="0">
<img src="<?php echo asset("public/images/upload/$girl->main_image")?>" class="img-responsive" height="200" width="200">
</div>
#endforeach
</div>
<!-- main slider carousel nav controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
Add some css for set equal height in class .item here, I am using height:200px
.item{ height:200px;}
And also add css for cover image complete box like here i am add css in .item img
.item img {
width: 100%;
height: 100% !important;
object-fit: cover;}
Your images are of different heights. Hence, you see this behavior.
Add a fixed height to the .item div
.carousel-inner>.active {
height: 150px; //this can be whatever you want
}
And remove the height="200" attribute from the images.
remove hardcoded width and height and put this into your stylesheet
.carousel-inner>.item>img, .carousel-inner>.item>a>img{
height:150px;
}
I am unable to focus on any input field inside bootstrap carousel.
No matter how many times you click on it, the input field is not getting focused.
I even tried giving z-index to the input field but it still doesn't get focused.
You can check the error by running the snippet below.
$(document).ready(function(){
$(".carousel").swipe({
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
if (direction == 'left') $(this).carousel('next');
if (direction == 'right') $(this).carousel('prev');
},
allowPageScroll:"vertical"
});
});
.carousel-indicators {
position: absolute !important;
bottom: -100px !important;
}
.carousel-indicators li {
background-color: green;
border: 1px solid green !important;
}
.carousel-inner>.item>div {
padding: 30px;
}
.carousel-inner>.item>div>div {
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container" id="skill-builder">
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div>
<p>In the diagram shown, assume the pulley is smooth and fixed and the ropes are massless. The mass of each block is marked on the block in the diagram. Assume . Find the magnitute of the acceleration of block M.</p>
<div>
<img src="./assets/questions/1-question.jpg" alt="">
</div>
<div>
<input type="text" placeholder="Enter Answer" name="answer">
</div>
<div>
<button>Confirm</button>
</div>
</div>
</div>
<div class="item">
<div>
<p>In the diagram shown, assume the pulley is smooth and fixed and the ropes are massless. The mass of each block is marked on the block in the diagram. Assume . Find the magnitute of the acceleration of block M.</p>
<div><img src="./assets/questions/2-question.png" alt=""></div>
<div>
<input type="text" placeholder="Enter Answer" name="answer2">
</div>
<div>
<button>Confirm</button>
</div>
</div>
</div>
<div class="item">
<div>
<p>In the diagram shown, assume the pulley is smooth and fixed and the ropes are massless. The mass of each block is marked on the block in the diagram. Assume . Find the magnitute of the acceleration of block M.</p>
<div><img src="./assets/questions/1-question.jpg" alt=""></div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Enable The Touch Slider in Touch Device Only
$(document).ready(function() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
$(".carousel").swipe({
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
if (direction == 'left') $(this).carousel('next');
if (direction == 'right') $(this).carousel('prev');
},
allowPageScroll: "vertical"
});
}
});
Change touchSwipe version from 1.6.18 to 1.6.4
I am building a Bootstrap carousel for a project. The content of the slides have different heights. Currently, the transition animation for the different sized content is very choppy. I am wondering if there is any way to fix this transition and make it a bit more graceful/smooth as the carousel adjusts in height between the slides.
*Please note that I would like to maintain the different heights between the slides. They are sized that way for a reason that is essential to the project.
Please see an example of the choppy transition on JS Bin.
Here is the code for the carousel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Carousel</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img style="margin: 0 auto;" src="http://placehold.it/300x300">
</div>
<div class="item">
<img style="margin: 0 auto;" src="http://placehold.it/250x250">
</div>
<div class="item">
<img style="margin: 0 auto;" src="http://placehold.it/160x600">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
It was chopping a lot because of the translation left/right so if u remove it it should be a lot better.
.carousel-inner .item {
opacity: 0;
transition: none;
transform: translate3d(0,0,0) !important;
}
.carousel-inner .active {
transition: opacity 1s ease-in-out;
opacity: 1;
}
but if u meant animate the height between different image sizes than u can use this jQuery:
$('.carousel').carousel().on('slide.bs.carousel', function (e) {
var nextH = $(e.relatedTarget).height();
$(this).find('.active.item').parent().animate({
height: nextH
}, 1000);
});
CODEPEN
Another way you can use javascript to done that.
Example
In that code I add event listener for listen slide.bs.carousel that triggered from bootstrap, get height of active item then animate carousel-inner element height.
<div class="item active">
<div class="img" style="background-image:url('http://placehold.it/300x300')"></div>
</div>
<div class="item">
<div class="img" style="background-image:url('http://placehold.it/250x250')"></div>
</div>
<div class="item">
<div class="img" style="background-image:url('http://placehold.it/160x600')"></div>
</div>
Add style
.item .img {
height:600px; //Maximum height
background-repeat:no-repeat;
background-position:center center;
}
I am trying to make a slider which scrolls over 3 div elements on to 3 new scroll elements. I am looking for a manual slider with an arrow pointing right on the right side and left on the left side. The slider should slide right when right arrow clicked and display the 3 remaining div elements. If the left arrow is clicked first, nothing should happen. if it is clicked after the right arrow has been clicked it should slide back to the three previous div elements. If the right arrow is clicked twice in a row the second click should slide back to the initial 3 div elements. Basically, I want to end up with something like the slider on the unity website. Link: http://unity3d.com/unity
Here is my HTML code so far. It displays the boxes on 3 columns and 2 rows:
<div class="categories">
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
</div>
Here are the CSS styles for the boxes:
/**********************
*******CATEGORIES******
**********************/
.categories {
width: 90%;
margin: 3% 9%;
clear: left;
}
.category {
padding: 7% 5% 3% 5%;
width: 20%;
border: 1px solid #E0E0E0;
float: left;
cursor: pointer;
text-align: center;
}
.category:hover {
border: 1px solid #4F8E64;
}
.category h3 {
color: #3F7250;
margin: 6% 0;
}
.category p {
text-align: center;
}
Make sure that the padding and margin and width stays in percentages. Feel free to modify the code and share it with me on fiddle or something.
You can use Caroufredsel jquery plugin for it. Here is the installation page:
http://dev7studios.com/caroufredsel-old/installation.php
And here is an example next to yours:
http://coolcarousels.frebsite.nl/c/58/
When you scroll down in the example and click [..] in the orange bar - you will see the code for the example.
This is the code for your carousel:
$('#carousel').carouFredSel({
width: '90%',
items: 3,
scroll: 3,
auto: false,
prev: '#prev',
next: '#next',
infinite: false
});
You can use also circular: false if you want the slides not to be circular.
Ok, so following comments if you consider bootstrap, include bootstrap js and css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
HTML
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<section>
Some Info
</section>
<section>
Some Info 2
</section>
<section>
Some Info 3
</section>
</div>
<div class="item">
<section>
Some Info
</section>
<section>
Some Info 2
</section>
<section>
Some Info 3
</section>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS
section{
display:inline-block;
border:1px solid black;
}
.item{
text-align:center
}
You can manipulate the sections and content as you please.
you can do it using jQuery need to sit for sometime and make custome slider and it will works according to you logic.
Hope this will help you.
I am creating a site using this bootstrap template: http://getbootstrap.com/examples/cover/
I have filled the 'carousel' with images but when I view on mobile the images become squashed and poor quality. I have tried to change the image using javascript based on the screen size but it has had no effect.
Is there another way I can change the image seen on mobile?
Here is the HTML:
<div class="carousel-inner" role="listbox">
<div class="item active">
<img id="banner" class="first-slide" src="graphics/banner1.gif" alt="First slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
Here is the JS:
<script type="text/javascript">
if ((screen.width<=800) && (screen.height<=600)) {
// Make sure banner is ready in the DOM
document.getElementById('banner').src="graphics/banner2.gif"; }
</script>
Thanks!
You should use CSS instead of making JS work more than it should:
CSS:
#media screen and (max-width: 800px) , screen and (max-height: 600px){
.myclass{
width:500px;
height:300px;
background-image: #ffffff url("banner1.gif") no-repeat left top;
}
}
And then the HTML:
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="banner" class="first-slide myclass" />
<div class="container">
<div class="carousel-caption" />
</div>
</div>
</div>