Html和引导传送带问题 [英] Html and bootstrap Carousel issue

查看：130
本文介绍了Html和引导传送带问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

footer.php 

 < div id =footer> 
< div class =container> 
< div class =row> 
< div class =col-md-3 col-sm-6> 
< h4>页面< / h4> 
< ul> 
< li>< a href =cart.php>购物车< / a>< / li> 
< li>< a href =contact.php>联络我们< / a>< / li> 
< li>< a href =shop.php>商店< / a>< / li> 
< li>< a href =checkout.php>我的帐户< / a>< / li> 
< / ul> <！ -  ul结束 - > 
 
< hr> 
< h4>用户部分< / h4> 
< ul> 
< li>< a href =checkout.php>登入< / a>< / li> 
< li>< a href =signup.php>注册< / a>< / li> 
< / ul> <！ -  ul结束 - > 
 
< 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>热门产品< / 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结束 - > 
< hr class =hidden-md hidden-lg> 
< / div> <！ -  col-md-3 col-sm-6 ends  - > 
 
< div class =col-md-3 col-sm-6 address> 
< h4>在哪里找到我们< / h4> 
< p> 
< Stron>< / Stron> 
< br> 
< br> 
< / p> 
< a href =contact.php>与我们联系< / a> 
< hr class =hidden-md hidden-lg> 
< / div> <！ -  col-md-3 col-sm-6 ends  - > 
 
 
< div class =col-md-3 col-sm-6> 
< h4>订阅电子报< / h4> 
< p class =text-muted>如需更新最新产品< / p> 
< form action =method =post> 
< div class =input-group> 
< input type =textclass =form-controlname =subscribemail> 
< span class =input-group-btn> 
< input type =submitvalue =subscribeclass =btn btn-default> 
< / span> 
< / div> <！ - 输入组结束 - > 
< / form> <！ - 表单结束 - > 
< hr> 
< h4>保持联系< / h4> 
< p class =social> 
< a href =＃>< i class =fa fa-facebook>< / i>< / a> 
< a href =＃>< i class =fa fa-google-plus>< / i>< / a> 
< / p> <！ - 社交结束 - > 
< / div> <！ -  col-md-3 col-sm-6 ends  - > 
< / div> <！ - 行结束 - > 
< / div> <！ - 容器结束 - > 
< / div> <！ - 页脚结束 - > 
 
< 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> 
项目依据：< a href =>< / a> 
< / p> 
< / div> <！---- col0md-6 ends  - > 
< / div> <！---容器结束 - > 
 
< / div> <！ - 拷贝权限结束 - > 
< 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 =viewportcontent =width = device-width，initial-scale = 1> 
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8> 
< link rel =快捷图标href =images / logo.jpgtype =image / x-icon/> 
< title> Ranng |用于家庭的油漆，染料和木材污渍< / title> 
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> 
< link rel =stylesheethref =styles / bootstrap.min.css/> 
< link rel =stylesheethref =styles / mystyles.css/> 
< link rel =stylesheethref =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 =containerid =slider> 
< div class =col-md-12> 
< div id =myCarouselclass =carousel slidedata-ride =carousel> 
 
    < li data-target =＃myCarouseldata-slide-to =0class =active>< / li> 
    < li data-target =＃myCarouseldata-slide-to =1>< / li> 
    < li data-target =＃myCarouseldata-slide-to =2>< / li> 
    < li data-target =＃myCarouseldata-slide-to =3>< / li> 
    < li data-target =＃myCarouseldata-slide-to =4>< / li> 
    < / ol> <！---传送带指示符在此结束----> 
    < 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-end ends ---->> 
    < a class =left carousel-controlhref =＃myCarouseldata-slide =prev> 
    < span class =glyphicon glyphicon-chevron-left>< / span> 
    < span class =sr-only>上一个< / span> 
    < / a> <！--- left carousel-control ends here→> 
     
    < a class =right carousel-controlhref =＃myCarouseldata-slide =next> 
    < span class =glyphicon glyphicon-chevron-right>< / span> 
    < span class =sr-only>下一步< / span> 
    < / a> <！---右转盘控制在此结束----> 
     
     
    < / div> <！---旋转木马幻灯片在此结束----> 
    < / div> <！--- col-md-12在此结束----> 
    < / div> <！---容器在此结束----> 
     
    < div id =优点> 
    < 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>我们知道提供最好的服务< / p> 
    < / div> <！---箱子相同高度在此结束----> 
    < / div> <！--- col-sm-4在此结束----> 
     
     
    < 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>通过PayPal进行加密付款< / p> 
    < / div> <！---箱子相同高度在此结束----> 
    < / div> <！--- col-sm-4在此结束----> 
     
     
    < div class =col-sm-4> 
    < div class =box same-height> 
    < div class =icon> 
    < i class =fa fa-usersaria-hidden =true>< / i> 
    < / div> 
    < h3>< a href =＃>无中间人< / a>< / h3> 
    < p>避免与中间商进行任何业务< / p> 
    < / div> <！---箱子相同高度在此结束----> 
    < / div> <！--- col-sm-4在此结束----> 
    < / div> <！---相同高度行在此结束----> 
    < / div> <！---容器在此结束----> 
    < / div> <！---优点在此结束----> 
     
    < div id =hot> 
    < div class =box> 
    < div class =container> 
    < div class =col-md-12> 
    < h2>最新产品< / h2> 
    < / div> <！--- col-md-12在此结束----> 
    < / div> <！---容器在此结束----> 
    < / div> <！---方块在这里结束----> 
    < / div> <！---此处热点结束----> 
     
     
    < div id =contentclass =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.jpgclass =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.phpclass =btn btn-default>查看产品< / a> 
    < a href =details.phpclass =btn btn-primary>< i class =fa fa-shopping-cart>< / i>添加到购物车< / a> ; 
    < / p> 
    < / div> <！---文字在这里结束----> 
    < / div> <！---产品在此结束----> 
    < / 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.jpgclass =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.phpclass =btn btn-default>查看产品< / a> 
    < a href =details.phpclass =btn btn-primary>< i class =fa fa-shopping-cart>< / i>添加到购物车< / a> ; 
    < / p> 
    < / div> <！---文字在这里结束----> 
    < / div> <！---产品在此结束----> 
    < / 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.jpgclass =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.phpclass =btn btn-default>查看产品< / a> 
    < a href =details.phpclass =btn btn-primary>< i class =fa fa-shopping-cart>< / i>添加到购物车< / a> ; 
    < / p> 
    < / div> <！---文字在这里结束----> 
    < / div> <！---产品在此结束----> 
    < / 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.jpgclass =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.phpclass =btn btn-default>查看产品< / a> 
    < a href =details.phpclass =btn btn-primary>< i class =fa fa-shopping-cart>< / i>添加到购物车< / a> ; 
    < / p> 
    < / div> <！---文字在这里结束----> 
    < / div> <！---产品在此结束----> 
    < / div> <！--- col-sm-4 col-sm-6 single ends here ----> 
    < / div> <！---行在此结束----> 
    < / div> <！---容器在此结束----> 
     
     
     
     
     <？php include_once'footer.php'; ？>

这是我为header footer和index.php编写的代码。问题是我的图像旋转木马在index.php。即使在给出数据目标之后，滑块图像在点击上一个和下一个之后也不会改变。请有人可以解决这个问题？有一个项目可以在短时间内完成。 解决方案

也许这不适用于您的源引导程序或jquery，尝试

Bootstrap CSS。

 < link rel = stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>

Bootstrap JS。 

 < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script>

Jquery 

 < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script>

你可以把这个放在header.php上



<希望这对你有所帮助。
祝你好运。


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.

解决方案

Maybe it's not working on your source bootstrap or jquery, try to change below.

Bootstrap CSS.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Bootstrap JS.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Jquery 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

You can put this on header.php

Hope this help you. Good luck.

这篇关于Html和引导传送带问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆