Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by James Bradshaw -
Number of replies: 1

Hi Mary


So still have a couple of things i cant seem to work out on the carosell.


Ive tried pasting the css into a text file and hosting that on google drive for the ccs url for the Moodle App. This doesnt seem to be working and wondered if you could shine any light on why that may be? I named the file SimpleCSS.css and placed it in a public folder on gdrive to obtain the url:

https://drive.google.com/file/d/0B5Hl19hwkeM1WWVaRV9LWE91bnM/view?usp=sharing


On mobile device browers the background grey/white box of the carosell becomes responsive to the screen while the images stay as banners leaving a big grey space or blank space if the BG colour is set to white - This is great if there is text in the heading and caption as it sits nicely on the phone browser - however on the desktop browser this information is messy and confused by the graphics and text in the image so weve decided to ommit the captions and titles and just have a call to action button. Is there a way to make this background area smaller so there isnt so much of a gap but retail the image sizes acccross all browers sizes? Please see attached:

Scrgrab2




Also been trying to add the navigation arrows into the carosell but cant seem to get them to work. do you know if it is one or the other (arrows or dots)?

Look foraward to hearing from you.

James


Average of ratings: -
In reply to James Bradshaw

Re: Adding a Bootstrap carousel to the Boost theme in Moodle 3.2

by Denis Featherstone -

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

Average of ratings: -