I wanted to use the slider as banner pictures 800 x 400 but the slider is getting full screen when i want to test this is the code I wrote Where will I write sizing?
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" width="800" height="400">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/banner.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/banner2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/banner3.jpg" class="d-block w-100" alt="...">
</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>
You will need to go use CSS to do this, I think Bootstrap has something to do with it not working in HTML.
.carousel .item {
width: 800px;
height: 400px;
}
Related
I want half of my dp to be on top of the carousel image and it should be in center. The carousel should be like a cover page as in facebook.
.dp-container{
width: 200px;
height: 200px;
border: 2px solid black;
margin-top: -100px;
padding: 1px;
z-index: 1000;
background-color: rgb(220,220,220);
}
<div id="carouselExampleControls" class="carousel slide lessz" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="carousel1.jpg" class="d-block w-100" height="400">
</div>
<div class="carousel-item">
<img src="carousel2.jpg" class="d-block w-100" height="400">
</div>
<div class="carousel-item">
<img src="carousel3.jpg" class="d-block w-100" height="400">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
<img src="mydp.jpg" class="dp-container container">
Add position:relative; to parent.
.carousel-inner{
position:relative;
}
And then position:absolute; to img and place it at the bottom.
.carousel-inner{
position:relative;
}
.dp-container{
position:absolute;
width: 200px;
height: 200px;
border: 2px solid black;
padding: 1px;
z-index: 1000;
background-color: rgb(220,220,220);
left:400px;
bottom:20px;
}
<div id="carouselExampleControls" class="carousel slide lessz" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="carousel1.jpg" class="d-block w-100" height="400">
</div>
<div class="carousel-item">
<img src="carousel2.jpg" class="d-block w-100" height="400">
</div>
<div class="carousel-item">
<img src="carousel3.jpg" class="d-block w-100" height="400">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
<img src="mydp.jpg" class="dp-container container"/>
I was using a bootstrap carousel for my website when I realized that you could use other buttons for the carousel navigation(other buttons than the default ones of course).
<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>
Does anyone know how to change the navigation buttons in this carousel. Thanks in advance !!
A dirty hack would be to override the carousel-control-prev-icon and carousel-control-next-icon classes.
See pen - https://codepen.io/buzztnt/pen/WNrjvbM
Cannot resize the image in my webpage. images are displayed in full size. I am using Bootstrap 4 carousel component. But the images seem to be non-responsive.
.carousel-item {
width: 100%;
height: auto;
object-fit: cover;
}
The corresponding carousel part is as follows:
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="{% static 'images/car4-carousel.jpg' %}" class="d-block w-100" alt="">
</div>
<div class="carousel-item" data-interval="2000">
<img src="{% static 'images/car2-carousel.jpg' %}" class="d-block w-100" alt="">
</div>
<div class="carousel-item">
<img src="{% static 'images/car3-carousel.jpg' %}" class="d-block w-100" alt="">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Please help.
you have to specify the img attribute if you want to resize the image:
.carousel-item img {
width: 100%;
height: auto;
object-fit: cover;
}
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="{% static 'images/car4-carousel.jpg' %}" class="d-block w-100" alt="">
</div>
<div class="carousel-item" data-interval="2000">
<img src="{% static 'images/car2-carousel.jpg' %}" class="d-block w-100" alt="">
</div>
<div class="carousel-item">
<img src="{% static 'images/car3-carousel.jpg' %}" class="d-block w-100" alt="">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
img {
max-width: 100%;
height: 50vh;
object-fit: cover;
}
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="https://images.unsplash.com/photo-1590948616180-fbe9e1fa7eaf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="d-block w-100" alt="">
</div>
<div class="carousel-item" data-interval="2000">
<img src="https://images.unsplash.com/photo-1590948616180-fbe9e1fa7eaf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="d-block w-100" alt="">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1590948616180-fbe9e1fa7eaf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="d-block w-100" alt="">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I added three images by bootstrap. but these images display in left side of page, while I want them display in center of page.
How can I do it?
this is code of images and bootstrap
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel" root="teal" >
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="img/pic1.jpg" class="d-block w-100" alt="..."width="1010"height="600px" >
</div>
<div class="carousel-item" data-interval="2000">
<img src="img/pic2.jpg" class="d-block w-100" alt="..."width="1010"height="600px">
</div>
<div class="carousel-item">
<img src="img/pic3.jpg" class="d-block w-100" alt="..."width="1010"height="600px">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
According to this article, you can use bootstrap's .center-block css class to center align an image.
You would insert it into your <img> tag like so:
<img class=".center-block">
I have created bootstrap carousel. it's working fine but how can i show next and previous images on next and previous buttons.
below in the url you can see what i have done till now.
https://imgur.com/a/vJnSuca
<div class="container image-slides">
<div class="row r">
<div class="col-md-2"></div>
<div class="col-md-8">
<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="images/festival-slider.jpg"
alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/festival-slider.jpg"
alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/festival-slider.jpg"
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>
</div>
<div class="col-md-2"></div>
</div>
</div>
I want to show next and previous nearby images in arrow buttons.now i just have changes arrow to static images.