Issues with Bootstrap Carousel not working in Framework Skin

Issues with Bootstrap Carousel not working in Framework Skin layout.master

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.

8/8/2017 10:06:52 AM

mfinley14

Total Posts 9

View Posts

Issues with Bootstrap Carousel not working in Framework Skin layout.master

Cannot get the Bootstrap Carousel to slide in Mojo Framework skin's layout.master using the format described here & my sample below

https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

The first slide looks great and resizes but 2nd slide never slides in. Anyone else have any guidance or success doing this? Really want the site to be responsive to screen size so portal slider even though it slides is not workable.

Thanks,

Mike

<div id="wpCarousel" class="carousel slide" data-ride="carousel">
               
               <ol class="carousel-indicators">
                   <li data-target="#wpCarousel" data-slide-to="0" class="active"></li>
                   <li data-target="#wpCarousel" data-slide-to="1"></li>
                   <li data-target="#wpCarousel" data-slide-to="2"></li>
               </ol>
               <div class="carousel-inner" role="listbox">
                   <div class="item active">
                   <img class="first-slide" src="/Data/Sites/1/media/images/SiteImages/081.jpg" alt="First slide">
                   <div class="container">
                       <div class="carousel-caption">
                       <h1>BIG FIRST SLIDE</h1>
                       <p>First slide</p>
                       <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
                       </div>
                   </div>
                   </div>
                   <div class="item">
                   <img src="/Data/Sites/1/media/images/SiteImages/2ndslide.jpg" alt="2nd slide">
                   <div class="container">
                   <div class="carousel-caption">
                       <h1>2nd slide</h1>
                       <p>TEST paragraph</p>
                       <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
                   </div>
                   </div>
</div>
                   <div class="item">
                   <img src="/Data/Sites/1/media/images/SiteImages/081.jpg" alt="Third slide">
                   <div class="container">
                       <div class="carousel-caption">
                       <h1>One more for good measure.</h1>
                       <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                       <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
                       </div>
                   </div>
                   </div>
</div>
               <a class="left carousel-control" href="#wpCarousel" role="button" data-slide="prev">
                   <span class="icon-prev" aria-hidden="true"></span>
                   <span class="sr-only">Previous</span>
               </a>
               <a class="right carousel-control" href="#wpCarousel" role="button" data-slide="next">
                   <span class="icon-next" aria-hidden="true"></span>
                   <span class="sr-only">Next</span>
               </a>
               </div>

8/8/2017 3:41:29 PM

Isaac Hall

Total Posts 216

View Posts

mojoPortal Hosting & Design @ i7MEDIA!

Re: Issues with Bootstrap Carousel not working in Framework Skin layout.master

Hi Mike,

You'll need to visit the bootstrap customization page (this link is also in the comments at the top of the bootstrap.min.js file in Framework) and reconfigure the bootstrap.min.js file for your skin. You'll want to scroll down on that page until you see the jQuery plugins section, check the box for the carousel, and then scroll all the way to the bottom and hit download. Then find the bootstrap.min.js file in the package you download and replace the file in your version of framework with that.

Let me know if that fixes it. If it doesn't you might need to check to ensure the carousel CSS is being included in your skin as well (it is included by default in the current release of Framework, so it should work).

8/9/2017 6:36:19 PM

mfinley14

Total Posts 9

View Posts

Re: Issues with Bootstrap Carousel not working in Framework Skin layout.master

Thanks Isaac...will let you know if that works.

You must sign in to post in the forums. This thread is closed to new posts.