Bootstrap 3 carousel not working
On this test page I made a Bootstrap carousel. It is my first ever attempt at using this BS feature. I got the code from searching on Google. I can see the carousel but it's not moving/sliding.
HTML
custom CSS portionCode:<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Peter Scotts Competitive Edge</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/custom.css" rel="stylesheet"> <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <script src="https://use.fontawesome.com/a0aac8df13.js"></script> <meta name="author" content="Peter Scott"> <meta name="robots" content="index, follow"> <meta name="DESCRIPTION" content="Peter trains regularly on the subjects of Leadership, Team Building, Customer Service, Sales Enhancement, Creating a More Positive and Fun Workplace, Conflict Resolution and the Pursuit of Excellence."> <meta name="KEYWORDS" content="corporate training, training and development, peter scott, corporate magic, fire walking, professional speakers, training, competitive edge, leadership, customer service, seminars, workshops, customer service training, leadership training, Casino, Gaming, Property, Hard Rock, Gambling, Hospitality, Hotel, Consulting, Development, Food and beverage, Hotel, Frontline, Team, Teambuilding, Property, Customer service, Moneyback, Reasonable Rates, Testimonial Video, Native American, Life lesson, Team bonding, Feedback, Skill sets, Inn of the Mountain Gods Resort & Casino, Positive, Attitude, Retention, Interactive, Role play, Enhancement, Unique, Dynamic, Participants, Game show, Engages"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="/manifest.json"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="theme-color" content="#ffffff"> <script type="text/javascript"> $('#openBtn').click(function(){ $('#myModal').modal({show:true}) }); </script> </head> <body> <!-- Navigation --> <div class="main-navigation-container navbar-fixed-top" id="primary-navbar"> <nav class="navbar"> <div class="container-fluid"> <!-- Mobile Toggle Button and stuff --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#primary-navigation" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> Menu <i style="font-size:24px" class="fa fa-arrow-circle-down"></i> </button> <a href="#" class="pull-left navbar-brand"><img src="images/Brand.png" class="img-responsive" alt="Peter Scott's Competitive Edge"></a> </div> <!-- Brand and toggle get grouped for better mobile display --> <!-- End of mobile toggle button --> <!-- Start of the navbar --> <div class="collapse navbar-collapse" id="primary-navigation"> <ul class="nav nav-justified"> <li><a href="index.html"><i style="font-size:24px" class="fa fa-home"></i> Home<span class="sr-only">(current)</span></a></li> <li><a href="programs.html"><i style="font-size:24px" class="fa fa-fire"></i> Programs</a></li> <li><a href="references.html"><i style="font-size:24px" class="fa fa-group"></i> References</a></li> <li><a href="rates.html"><i style="font-size:24px" class="fa fa-usd"></i> Rates</a></li> <li><a href="faq.html"><i style="font-size:24px" class="fa fa-question"></i> FAQ</a></li> <li><a href="contact.html"><i style="font-size:24px" class="fa fa-envelope"></i> Contact</a></li> </ul> </div> </div> </nav> </div> <header class="masthead"> <img src="images/Banner.jpg" class="center-block img-responsive" alt="logo"> </header> <!-- /.container --> <!-- Feature --> <div class="container"> <div class="text-right"> <audio controls> <source src="mp3/LeadershipTeamChallenge.mp3" type="audio/mpeg" /> </audio> </div> <h1>Develop More Effective Leaders With The Leadership Team Challenge</h1> <img src="images/STEP-UP.gif" class="center-block img-responsive" alt="Step Up"> <div class="well"> <div id="myCarousel" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-sm-3"><a href="#x"><img src="slide/1.jpg" class="img-responsive" alt="teamwork"></a> </div> <div class="col-sm-3"><a href="#x"><img src="slide/2.jpg" class="img-responsive" alt="fire eating"></a> </div> <div class="col-sm-3"><a href="#x"><img src="slide/3.jpg" class="img-responsive" alt="fire walk"></a> </div> <div class="col-sm-3"><a href="#x"><img src="slide/4.jpg" class="img-responsive" alt="trust fall"></a> </div> </div> <!--/row--> </div> <!--/item--> <div class="item"> <div class="row"> <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="slide/5.jpg" class="img-responsive" alt="trust fall 2"></a> </div> <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="slide/6.jpg" class="img-responsive" alt="crew"></a> </div> <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="slide/7.jpg" class="img-responsive" alt="fire eating 2"></a> </div> <div class="col-sm-3"><a href="#x" class="thumbnail"><img src="slide/8.jpg" class="img-responsive" alt="fire eating 3"></a> </div> </div> <!--/row--> </div> </div> <!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true"></i> </a> </div> <!--/myCarousel--> </div> </div> <div class="scroll-top-wrapper "> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span> </div> <footer> <!-- Copyright etc --> <div id="footer"> <p>Copyright © <script>document.write(new Date().getFullYear());</script> Peter Scott's Competitive Edge</p> </div> </footer> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> <script src="src/jquery.bootstrap-dropdown-hover.js"></script> <!-- IE10 viewport bug workaround --> <script src="js/ie10-viewport-bug-workaround.js"></script> <script> //$('[data-toggle="dropdown"]').bootstrapDropdownHover(); $.fn.bootstrapDropdownHover(); //$('#dropdownMenu1').bootstrapDropdownHover(); //$('.navbar [data-toggle="dropdown"]').bootstrapDropdownHover(); </script> <script> // demo for realtime configuration and destroy $('[data-toggle="tooltip"]').tooltip({container: 'body'}); $('#setSticky').on('click', function () { $('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('setClickBehavior', 'sticky'); }); $('#setDefault').on('click', function () { $('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('setClickBehavior', 'default'); }); $('#setDisable').on('click', function () { $('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('setClickBehavior', 'disable'); }); $('#set1000').on('click', function () { $('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('setHideTimeout', 1000); }); $('#set200').on('click', function () { $('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('setHideTimeout', 200); }); $('#destroy').on('click', function () { $('[data-toggle="tooltip"]').tooltip('hide'); $('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover('destroy'); $('#destroy, #set200, #set1000, #setDisable, #setDefault, #setSticky').prop('disabled', 'disabled'); $('#reinitialize').prop('disabled', false); $('.setdemo').addClass('destroyed'); }); $('#reinitialize').on('click', function () { $('[data-toggle="tooltip"]').tooltip('hide'); $('.setdemo [data-toggle="dropdown"]').bootstrapDropdownHover(); $('#destroy, #set200, #set1000, #setDisable, #setDefault, #setSticky').prop('disabled', false); $(this).prop('disabled', 'disabled'); $('.setdemo').removeClass('destroyed'); }); </script> <script> $(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.scroll-top-wrapper').addClass('show'); } else { $('.scroll-top-wrapper').removeClass('show'); } }); }); </script> <script> $(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.scroll-top-wrapper').addClass('show'); } else { $('.scroll-top-wrapper').removeClass('show'); } }); $('.scroll-top-wrapper').on('click', scrollToTop); }); function scrollToTop() { verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $('body'); offset = element.offset(); offsetTop = offset.top; $('html, body').animate({scrollTop: offsetTop}, 500, 'linear'); } </script> <script> $(document).ready(function() { $('#myCarousel').carousel({ interval: 10000 }) $('#myCarousel').on('slid.bs.carousel', function() { //alert("slid"); }); }); </script> </body> </html>
FIXED now, I added <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> to the bottom of the pageCode:.carousel-control { padding-top:10%; width:5%; } .carousel-inner > .item.prev, .carousel-inner > .item.active.left { left: 0; -webkit-transform: translate3d(-33%, 0, 0); -ms-transform: translate3d(-33%, 0, 0); -o-transform: translate3d(-33%, 0, 0); transform: translate3d(-33%, 0, 0); }
CSS Codes
Reply With Quote
Originally Posted by coothead
Bookmarks