Hello, please help!
I reviewed all jquery issues in stackoverflow. I tried some of the solutions, but I do not get the result as I want. I make a one page website for my company, but I am having problems bringing a reaction to it.
The code is as follows:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Top Accountant. Providing solution for all your accounting needs</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link type="text/css" rel="stylesheet" href="css/bootstrap.css" /> <link type="text/css" rel="stylesheet" href="css/bootstrap-theme.css" /> </head> <body> <div class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">Top Accountant</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a href="#"class="dropdown-toggle" data-target=".dropdown">Services <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Service 1</a></li> <li><a href="#">Service 1</a></li> <li><a href="#">Service 1</a></li> <li><a href="#">Service 1</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="img/accountancy-services.png" /> <div class="container"> <div class="carousel-caption"> <h1>Lorem ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p> <p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p> </div> </div> </div> <div class="item"> <img src="img/images.jpg" /> <div class="container"> <div class="carousel-caption"> <h1>Lorem ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p> <p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p> </div> </div> </div> <div class="item"> <img src="img/accountant-9-tips.png"/> <div class="container"> <div class="carousel-caption"> <h1>Lorem ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl sit amet est sodales imperdiet.</p> <p><a class="btn btn-lg btn-primary" href="#">Contact Us</a></p> </div> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="Prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="Next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <script src="js/bootstrap.js"></script>
There are a few things that I have done so far.
1.) When a website is viewed on a mobile phone or tab, the navigation bar disappears and a toggle button appears. This works fine.
2.) I have a drop-down menu in services that do not work for me. 3.) I also made a carousel that glides perfectly, but does not respond to the icon on the left and right.
I do not know what the problem is: 1 is working fine, but 2 and 3 are not working.
Please help me in this matter and advise me where I am mistaken.
Thanks in advance.
Sakib source share