I am currently working on a new website that includes a carousel slider in one of its sections. I am trying to figure out how to make the slider fit within that section while still maintaining responsiveness. Any suggestions on how to achieve this?
I am using Bootstrap 4.3.1 and JQuery 3.4.1. I have previously attempted to adjust the slider's CSS to a percentage size, but the height of the slider still does not align properly with the section.
Here is a snippet of my index.html:
<div id="course" class="offset">
<div class="col-12 narrow text-center">
<h1>Rental Bachtiar Medan Hehe</h1>
<div class="row">
<div class="col-md-6">
<div class="course-class">
<iframe marginheight="1" marginwidth="1" scrolling="no" allowtransparency="true" src="sliderCarousel.html" seamless></iframe>
</div>
</div>
<div class="col-md-6">
<div class="course-class">
<h3>Custom Animation</h3>
<p>Animate.css and Waypoints.js allow for smooth animations scrolling down the site.</p>
</div>
</div>
</div>
</div>
</div>
Here is the code snippet for sliderCarousel.html:
<div id="demo" class="carousel slide text-center" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://drive.google.com/uc?export=download&id=17MKwEHxWd-OCPx9P2LsTBBR0kNR__aCe" alt="Image - 1" >
<div class="carousel-caption">
<h3>Slide 1</h3>
<p>Description for Slide 1</p>
</div>
</div>
<div class="carousel-item">
<img src="https://drive.google.com/uc?export=download&id=1m3O0HLyKQPO-MOFcSNtP4EqpenycEQaC" alt="Image - 2" >
<div class="carousel-caption">
<h3>Slide 2</h3>
<p>Description for Slide 2</p>
</div>
</div>
<div class="carousel-item">
<img src="https://drive.google.com/uc?export=download&id=1NSeFxs2MXhLfCU14qtqnRWce8LPJC6bR" alt="Image - 3" >
<div class="carousel-caption">
<h3>Slide 3</h3>
<p>Description for Slide 3</p>
</div>
</div>
</div>
<div class="control-prev">
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
</div>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
Additionally, here is the relevant CSS snippet from style.css:
/*---------- COURSE SECTION ------------*/
#course .narrow{
width: 90%;
margin: 3.5rem auto;
padding-top: .2rem;
}
/* Styling for buttons, headings, and paragraphs */
.narrow h1{
font-size: 2.4rem;
}
.btn-secondary{
border-width: medium;
border-radius: 0;
padding: .6rem 1.2rem;
font-size: 1.2rem;
text-transform: uppercase;
margin: 1rem;
border-color: #1EBBAE;
background-color: #1EBBAE;
color: white;
}
.btn-secondary:hover,
.btn-secondary:focus{
border-color: #189582;
background-color: #189582;
color: white;
}
.course-class h3{
font-size: 1.3rem;
text-transform: uppercase;
padding-bottom: .4rem;
text-align: left;
}
.course-class p{
font-size: 1.1rem;
text-align: left;
}
/* Styling for embedding an iframe */
iframe[seamless] {
border: none;
overflow: hidden;
width: 100%;
height: auto;
}
I am hopeful that the output of index.html will display the slider in the course section with the correct height alignment. Thank you for any assistance!