Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
126 views
in Technique[技术] by (71.8m points)

php - Html and bootstrap Carousel issue

footer.php

<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<h4>Pages</h4>   
<ul>
<li><a href="cart.php">Shopping Cart</a></li>  
<li><a href="contact.php">Contact Us</a></li>
<li><a href="shop.php">Shop</a></li>
<li><a href="checkout.php">My account</a></li>
</ul>  <!--ul ends--> 

<hr>
<h4>User Section</h4>
<ul>
<li><a href="checkout.php">Login</a></li>  
<li><a href="signup.php">Register</a></li>
</ul>  <!--ul ends--> 

<hr class="hidden-md hidden-lg hidden-sm">
</div> <!--col-md-3 col-sm-6 ends-->  


<div class="col-md-3 col-sm-6">
<h4>Top Products</h4>    
<ul>
<li><a href="#">Glidden Trim and Door</a></li>  
<li><a href="#">Trade Secret</a></li>
<li><a href="#">ENVIROCOLOR</a></li>
<li><a href="#">Astrazon</a></li>
<li><a href="#">Sera Wash</a></li>
</ul>  <!--ul ends-->     
<hr class="hidden-md hidden-lg">
</div> <!--col-md-3 col-sm-6 ends--> 

<div class="col-md-3 col-sm-6 address">
<h4>Where to Find Us</h4>
<p>
<Stron></Stron>
<br>
<br>
</p>    
<a href="contact.php">Contact Us Here</a>
<hr class="hidden-md hidden-lg">
</div> <!--col-md-3 col-sm-6 ends--> 


<div class="col-md-3 col-sm-6">
<h4>Subscribe to Newsletter</h4>
<p class="text-muted">For updates on latest Products</p>
<form action="" method="post">
<div class="input-group">
 <input type="text" class="form-control" name="subscribemail">   
<span class="input-group-btn">
<input type="submit" value="subscribe" class="btn btn-default">
</span>    
</div>  <!--input-group ends-->
</form> <!--form ends-->
<hr>
<h4>Stay in Touch</h4>
<p class="social">
<a href="#"><i class="fa fa-facebook"></i></a>    
<a href="#"><i class="fa fa-google-plus"></i></a>    
</p>   <!--social ends-->
</div> <!--col-md-3 col-sm-6 ends-->
</div> <!--row ends-->   
</div> <!--container ends-->
</div> <!--footer ends-->

<div id="copyright">
<div id="container">
<div class="col-md-6">
<p class="pull-left">
&copy;    
</p>    
</div> <!----col0md-6 ends--> 

<div class="col-md-6">
<p class="pull-right">
Project By:<a href=""></a>
</p>  
</div> <!----col0md-6 ends--> 
</div> <!---container ends-->

</div> <!--copy right ends-->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js" ></script>
</body>
</html>

header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html lang="EN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="images/logo.jpg" type="image/x-icon" />
<title>Ranng|Paint,Dyes and Wood Stains For Your Home</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/bootstrap.min.css" />
<link rel="stylesheet" href="styles/mystyles.css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
</head>
<body>

index.php

<?php
include_once 'header.php';

?>
<?php
include_once 'topheader.php';

?>
<?php
include_once 'nav.php';

?>


<div class="container" id="slider">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
 </ol> <!---carousel-indicators ends here ---->
<div class="carousel-inner">
<div class="item active">
<img src="admin_area/slide_images/1.jpg">
</div>  
<div class="item">
<img src="admin_area/slide_images/2.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/3.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/4.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/5.jpg">
</div>
</div> <!---carousel-inner ends here ---->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left"></span>
 <span class="sr-only">Previous</span> 
</a>   <!---left carousel-control ends here ---->

<a class="right carousel-control" href="#myCarousel" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right"></span>
 <span class="sr-only">Next</span> 
</a>   <!---right carousel-control ends here ---->


</div> <!---carousel slide ends here ---->
</div> <!---col-md-12 ends here ---->
</div> <!---container ends here ---->

<div id="advantages">
<div class="container">
<div class="same-height-row">
<div class="col-sm-4">
<div class="box same-height">
<div class="icon">
<i class="fa fa-globe"></i>    
</div>
<h3><a href="#">FAST GLOBAL SERVICE</a></h3>
<p>We are know to provide best  service ever</p>
</div> <!---box same-height ends here ---->  
 </div> <!---col-sm-4 ends here ----> 


<div class="col-sm-4">
<div class="box same-height">
<div class="icon">
<i class="fa fa-cc-paypal"></i>    
</div> 
<h3><a href="#">SAFE TRANSACTION</a></h3>
<p>Encrypted payment through PayPal</p>
</div> <!---box same-height ends here ---->
</div> <!---col-sm-4 ends here ---->


<div class="col-sm-4">
<div class="box same-height">
<div class="icon">
<i class="fa fa-users" aria-hidden="true"></i>    
</div>
<h3><a href="#">NO INTERMEDIARIES</a></h3>
<p>Avoid any business with middlemen</p>
</div> <!---box same-height ends here ---->  
 </div> <!---col-sm-4 ends here ----> 
 </div> <!---same-height-row ends here ----> 
</div> <!---container ends here ---->
</div> <!---advantages ends here ---->

<div id="hot">
<div class="box">
<div class="container">
<div class="col-md-12">
 <h2>Latest Products</h2>   
</div> <!---col-md-12 ends here ---->    
</div> <!---container ends here ---->  
</div> <!---box ends here ---->
</div> <!---hot ends here ---->


<div id="content" class="container">
<div class="row"> 
<div class="col-sm-4 col-sm-6 single">
<div class="products">
<a href="details.php">
<img src="admin_area/product_images/product.jpg" class="img-responsive">    
</a> 

<div class="text">
<h3><a href="details.php">BEHR Premium Plus</a></h3>
<p class="price">&#x20b9; 700 </p>
<p class="buttons">
<a href="details.php" class="btn btn-default">View Product</a>
<a href="details.php" class="btn btn-primary"><i class="fa fa-shopping-cart"></i>Add to Cart</a>
</p>
</div> <!---text ends here ---->   
</div> <!---products ends here ---->  
</div> <!---col-sm-4 col-sm-6 single ends here ---->



<div class="col-sm-4 col-sm-6 single">
<div class="products">
<a href="details.php">
<img src="admin_area/product_images/product.jpg" class="img-responsive">    
</a> 

<div class="text">
<h3><a href="details.php">BEHR Premium Plus</a></h3>
<p class="price">&#x20b9; 700 </p>
<p class="buttons">
<a href="details.php" class="btn btn-default">View Product</a>
<a href="details.php" class="btn btn-primary"><i class="fa fa-shopping-cart"></i>Add to Cart</a>
</p>
</div> <!---text ends here ---->   
</div> <!---products ends here ---->  
</div> <!---col-sm-4 col-sm-6 single ends here ----> 


<div class="col-sm-4 col-sm-6 single">
<div class="products">
<a href="details.php">
<img src="admin_area/product_images/product.jpg" class="img-responsive">    
</a> 

<div class="text">
<h3><a href="details.php">BEHR Premium Plus</a></h3>
<p class="price">&#x20b9; 700 </p>
<p class="buttons">
<a href="details.php" class="btn btn-default">View Product</a>
<a href="details.php" class="btn btn-primary"><i class="fa fa-shopping-cart"></i>Add to Cart</a>
</p>
</div> <!---text ends here ---->   
</div> <!---products ends here ---->  
</div> <!---col-sm-4 col-sm-6 single ends here ----> 


<div class="col-sm-4 col-sm-6 single">
<div class="products">
<a href="details.php">
<img src="admin_area/product_images/product.jpg" class="img-responsive">    
</a> 

<div class="text">
<h3><a href="details.php">BEHR Premium Plus</a></h3>
<p class="price">&#x20b9; 700 </p>
<p class="buttons">
<a href="details.php" class="btn btn-default">View Product</a>
<a href="details.php" class="btn btn-primary"><i class="fa fa-shopping-cart"></i>Add to Cart</a>
</p>
</div> <!---text ends here ---->   
</div> <!---products ends here ---->  
</div> <!---col-sm-4 col-sm-6 single ends here ----> 
</div> <!---row ends here ---->   
</div> <!---container ends here ---->




<?php include_once 'footer.php'; ?>

This my code for header footer and index.php . the problem is my image carousel in the index.php . Even after giving the data-target the slider images doesnt change after clicking on the previous and next . please can someone solve the issue??? Got a project to complete within a short span of time.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

after the above suggestion i changed my header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html lang="EN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="images/logo.jpg" type="image/x-icon" />
<title>Ranng|Paint,Dyes and Wood Stains For Your Home</title>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/bootstrap.min.css" />
<link rel="stylesheet" href="styles/mystyles.css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
</head>
<body>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...