The blue section of the following image shows the triggering area of the bootstrap carousel. I took the screenshot from the bootstrap doc.
I would like to modify the height of the triggering region (e.g. From 100% of the carousel height to 50%). May I know how can I modify it?
Thanks in advance
To solve this, just modify the properties of .carousel-control-prev and .carousel-control-prev in the CSS.
.carousel-control-prev,
.carousel-control-next {
height: 25%;
top: 37.5%;
};
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<body>
<div class="container">
<div class="row">
<div class="col">
<div id="carouselExampleIndicators" class="carousel slide my-4" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://placehold.it/900x350" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/900x350" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/900x350" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
I have no idea why the top property could not override in the demo. But it works in my project.
Related
I try to create bootstrap carousel in my ASP NET Core MVC Web Application. Other Bootstrap components seem to work just fine, it's the carousel that does not work.
Here is the code for carousel I put in CSHTML file:
<div id="companyPhotosCarousel" class="carousel slide" data-ride="carousel" style="margin-top:-15px">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-fluid" src="~/Content/companies/photo_1.jpg" />
</div>
<div class="item">
<img class="img-fluid" src="~/Content/companies/photo_2.jpg"/>
</div>
<div class="item">
<img class="img-fluid" src="~/Content/companies/photo_3.jpg" />
</div>
</div>
<a class="left carousel-control" href="#companyPhotosCarousel" 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="#companyPhotosCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Photos are displayed on top of each other
Firstly, it will be helpful if you could tell which Bootstrap Version you are using but I hope this will help.
Meanwhile, try checking the jQuery and bootstrap version being used. And the order by which U arrange them.
Make sure you jQuery comes before the bootstrap script.
For Bootstrap 4 Here is a starter template.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Here is a carousel template
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I'll preface this by saying I really don't have much experience in this, but I've looked through documentations and solutions that helped others and I've yet to fix my issue so I'll go ahead and make my own post.
<div id="randomCarousel" class="carousel slide" data-ride="carousel">
<!--Indicator Buttons-->
<ol class="carousel-indicators">
<li data-target="#randomCarousel" data-slide-to="0" class="active"></li>
<li data-target="#randomCarousel" data-slide-to="1"></li>
<li data-target="#randomCarousel" data-slide-to="2"></li>
</ol>
<!--Carousel w/Images-->
<div class="container">
<div class="carousel-inner">
<!--ALL PICS ARE PART OF CREATIVE COMMONS; ADDED SIMPLY FOR FUN-->
<div class="carousel-item active">
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="First">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Second">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Third">
</div>
</div>
</div>
<!--Next and Previous buttons-->
<a class="carousel-control-prev" href="#randomCarousel" role="button" 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="#randomCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I've gone ahead and added scripts and links found on the bootstrap website also but to no avail. Any additional feedback would also be greatly appreciated.
I'm not sure what is the issue with your code, But when i customize my code then it will worked. Please review my code and let me know further clarification.
Hope it will help
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="carousel-indicators" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-indicators" data-slide-to="0" class="active"></li>
<li data-target="#carousel-indicators" data-slide-to="1"></li>
<li data-target="#carousel-indicators" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="container">
<div class="carousel-inner">
<div class="item active">
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="First">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Second">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Third">
</div>
</div>
</div>
</div>
<!--Next and Previous buttons-->
<a class="carousel-control-prev" href="#randomCarousel" role="button" 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="#randomCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Your code is working fine, may be you forgot to include bootstrap library files (CSS and JS) or may be forgot to include js library file. Not sure exactly what you are missing.
Here is the working example of your code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="randomCarousel" class="carousel slide" data-ride="carousel">
<!--Indicator Buttons-->
<ol class="carousel-indicators">
<li data-target="#randomCarousel" data-slide-to="0" class="active"></li>
<li data-target="#randomCarousel" data-slide-to="1"></li>
<li data-target="#randomCarousel" data-slide-to="2"></li>
</ol>
<!--Carousel w/Images-->
<div class="container">
<div class="carousel-inner">
<!--ALL PICS ARE PART OF CREATIVE COMMONS; ADDED SIMPLY FOR FUN-->
<div class="carousel-item active">
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="First">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Second">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/2283759/pexels-photo-2283759.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" class="d-block w-100" alt="Third">
</div>
</div>
</div>
<!--Next and Previous buttons-->
<a class="carousel-control-prev" href="#randomCarousel" role="button" 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="#randomCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
https://codepen.io/pgurav/pen/KKKxBwM
I'm trying to use the bootstrap carousel, however is doesn't want to slide.
My current code is:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../../../../assets/foto-1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../../../../assets/foto-2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../../../../assets/foto-2.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
in my index.html i have:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Could anyone help me out?
I forgot to import JS. Thanks Boss COTIGA:
JavaScript is missing getbootstrap.com/docs/4.1/getting-started/introduction
How can I make all items inside this Owl carousel have the same height (as the tallest item)?
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
items: 4
});
});
<link href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-3.1.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme">
<div><img src="http://placehold.it/350x150"></div>
<div><img src="http://placehold.it/350x100"></div>
<div><img src="http://placehold.it/350x150"></div>
<div><img src="http://placehold.it/350x150"></div>
<div><img src="http://placehold.it/350x150"></div>
<div><img src="http://placehold.it/350x150"></div>
<div><img src="http://placehold.it/350x150"></div>
</div>
View on JS Bin
.image{
width:100%;
height:500px
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="myCarousel" class="carousel slide" 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://www.gettyimages.com/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg" alt="" class="image" >
</div>
<div class="item">
<img src="http://i.dailymail.co.uk/i/pix/2016/09/13/14/384A98B300000578-0-image-a-63_1473774825844.jpg" alt="" class="image">
</div>
<div class="item">
<img src="https://s-media-cache-ak0.pinimg.com/736x/b1/7c/d0/b17cd0554537ceb0e816537bfcae09eb.jpg" alt="" class="image">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
My HTML is this:
<div class="navbar navbar-fixed-top" >
some divs inside...
</div>
<div class="filler"> </div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="<?php print(base_url('assets/images/slide-one.jpg')); ?>" alt="First slide" />
<div class="container">
<div class="carousel-caption">
<div class="main-text">TEXT 1!</div>
<div class="sub-text">subtext</div>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="<?php print(base_url('assets/images/slide-two.jpg')); ?>" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<div class="main-text">TEXT 2</div>
<div class="sub-text">subtext </div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS:
.filler {
height: 230px; //same height of class navbar.i do this so
carousel will not overlap the fixed navbar
}
The design runs OK. The top div is fixed at the top. But when I change the view to smaller or to mobile view, the carousel overlaps the fixed navbar. How will I format my css so that carousel will not overlap? Or is there another way to format this? Thank you.