Hi,
I have been trying to add a carousel to our Moodle 3.3 system using the code from your earlier replies and the information on https://v4-alpha.getbootstrap.com/components/carousel/#with-captions. The images display but they do not slide. The following is the code used:
<div class="carousel slide" id="myCarousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li class="active" data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item">
<img class="first-slide d-block img-fluid" alt="" src="https://vle.hrc.ac.uk/draftfile.php/15/user/draft/704803467/new%2023.png">
</div>
<div class="carousel-item">
<img class="second-slide d-block img-fluid" alt="" src="https://vle.hrc.ac.uk/draftfile.php/15/user/draft/704803467/IDcardslider.png">
</div>
<div class="carousel-item active">
<a href="https://vle.hrc.ac.uk/mod/forum/discuss.php?d=1444"><img width="335" class="third-slide d-block img-fluid" alt="" src="https://vle.hrc.ac.uk/draftfile.php/15/user/draft/704803467/FRESHERSFAIRS2017.jpg"> </a>
</div>
</div>
<a class="carousel-control-prev" role="button" 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" role="button" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
and this is the Raw SCSS in the Boost configuration:
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 1rem;
margin-top: 1 rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
bottom: 3rem;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 16rem;
background-color: #A7469A;
}
.carousel-item img {
margin-left:auto;
margin-right:auto;
max-width: 100%;
height: 16rem;
}
I have played around with this on our test system and apart from occasionally seeing it slide when in editing mode have not got it to display correctly. I would appreciate any help you could give me with this.
Yours
Denis