Results 1 to 6 of 6

Thread: Bootstrap 3 carousel not working

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    673
    Thanks
    97
    Thanked 26 Times in 26 Posts

    Default 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
    Code:
    <!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 &amp; 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 &copy; <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>
    custom CSS portion
    Code:
    .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);
    }
    FIXED now, I added <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> to the bottom of the page
    Last edited by mlegg; 07-31-2017 at 10:23 PM. Reason: code too long

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    673
    Thanks
    97
    Thanked 26 Times in 26 Posts

    Default

    This is the head section
    Code:
    <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>
    </head>
    this is below the footer, above closing</body>

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,365
    Thanks
    1
    Thanked 243 Times in 238 Posts

    Default

    Hi there mlegg,

    inspecting your page with the "Console" gave me this information...

    Code:
    
    ReferenceError: $ is not defined[Learn More]                                                                                       leadership-carousel.html:29:1
    Error: Bootstrap tooltips require Tether (http://tether.io/)                                                                       bootstrap.min.js:7:3482
    HTTP load failed with status 404. Load of media resource http://www.pscompetitiveedge.com/mp3/LeadershipTeamChallenge.mp3 failed.  WebRequest.jsm:340:4
    All candidate resources failed to load. Media load paused.                                                                         leadership-carousel.html
    TypeError: $.fn.bootstrapDropdownHover is not a function[Learn More]                                                               leadership-carousel.html:150:7
    TypeError: $(...).tooltip is not a function[Learn More]                                                                            leadership-carousel.html:157:7
    
    
    It is disappointing, for me, to see that you are using "Bootstrap" by choice.

    Further reading...

    ~ the original bald headed old fart ~

  4. #4
    Join Date
    Jan 2009
    Location
    NH
    Posts
    673
    Thanks
    97
    Thanked 26 Times in 26 Posts

    Default

    Thanks, I will read it. This is a page I am trying to change a few things for a friend's website. He wanted to add a carousel or jquery slider on the page.

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    Quote Originally Posted by coothead View Post
    It is disappointing, for me, to see that you are using "Bootstrap" by choice.
    Further reading...
    HTML, CSS and JavaScript Frameworks[/indent]
    Original bald headed old fart,
    I don't admire the language used by the author of that article, but ... he is very right!

  6. #6
    Join Date
    Jul 2017
    Posts
    2
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Default

    Quote Originally Posted by ashleyjohn View Post
    Why you're using bootstarp for this? Try JS
    I wonder what Javascript will be better in this situation?

Similar Threads

  1. Submenu's in Smooth Navigation Menu not working with bootstrap css
    By mematrix in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 09-30-2014, 05:30 AM
  2. Need help with Twitter Bootstrap Carousel
    By katiebugla in forum Other
    Replies: 1
    Last Post: 10-16-2012, 10:16 PM
  3. Step Carousel Viewer v1.9 not working
    By Jazmine in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-15-2011, 12:44 AM
  4. Step Carousel and ie9 not working as should.
    By dhobbs1978 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-12-2011, 12:58 PM
  5. Step Carousel Viewer not working in IE
    By shaimaik in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 07-15-2009, 04:36 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •