javascript - Bootstrap - 客户评价 Carousel 问题

标签 javascript jquery html css twitter-bootstrap

所以我正在尝试实现这个推荐轮播:http://bootsnipp.com/snippets/featured/testimonials-with-carousel

到目前为止，这就是发生的事情，我不确定为什么会发生...... enter image description here 

/*!
Main Page CSS || Created By Thomas Withers @ Ice7Media
 */

/* Global Styles
============================================================ */
body {
    width: 100%;
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    background-color: #fff;
}

html {
    width: 100%;
    height: 100%;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Oswald', 'Open Sans', sans-serif;
    color: #000;
}

p {
    font-family: 'Open Sans', sans-serif;
    color: #000;
}

/* Navbar Style
============================================================ */
@media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        background-color: #fff;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }
}

.navbar-default {
    background-color: #fff;
}

.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-nav > li > a{
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 100;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
} 

/* Jumbotrons
=======================================================*/

/* Carousel base class */
.carousel {
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 1;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 400px;
  background-color:#555;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 400px;
}

/* Section Formatting
======================================================== */

/* Special Offers Boxes Formatting
================================== */
.shape {
    border-style: solid;
    border-width: 0 70px 40px 0;
    float: right;
    height: 0px;
    width: 0px;
    -ms-transform: rotate(360deg); /* IE 9 */
    -o-transform: rotate(360deg); /* Opera 10.5 */
    -webkit-transform: rotate(360deg); /* Safari and Chrome */
    transform: rotate(360deg);
}
.listing {
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    margin: 15px 0;
    overflow: hidden;
}
.listing:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: rotate scale(1.1);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.shape {
    border-color: rgba(255,255,255,0) #d9534f rgba(255,255,255,0) rgba(255,255,255,0);
}
.listing-radius {
    border-radius: 7px;
}
.listing-danger {
    border-color: #d9534f;
}
.listing-danger .shape {
    border-color: transparent #d9533f transparent transparent;
}
.listing-success {
    border-color: #5cb85c;
}
.listing-success .shape {
    border-color: transparent #5cb75c transparent transparent;
}
.listing-default {
    border-color: #999999;
}
.listing-default .shape {
    border-color: transparent #999999 transparent transparent;
}
.listing-primary {
    border-color: #428bca;
}
.listing-primary .shape {
    border-color: transparent #318bca transparent transparent;
}
.listing-info {
    border-color: #5bc0de;
}
.listing-info .shape {
    border-color: transparent #5bc0de transparent transparent;
}
.listing-warning {
    border-color: #f0ad4e;
}
.listing-warning .shape {
    border-color: transparent #f0ad4e transparent transparent;
}
.shape-text {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    right: -40px;
    top: 2px;
    white-space: nowrap;
    -ms-transform: rotate(30deg); /* IE 9 */
    -o-transform: rotate(360deg); /* Opera 10.5 */
    -webkit-transform: rotate(30deg); /* Safari and Chrome */
    transform: rotate(30deg);
}
.listing-content {
    padding: 0 20px 10px;
}
/* Testinials Formatting
=============================================================*/
.carousel-indicators .active {
    background:#31708f
}

.content {
    margin-top:20px
}

.adjust1 {
    float:left;
    width:100%;
    margin-bottom:0
}

.adjust2 {
    margin:0
}

.carousel-indicators li {
    border:1px solid #ccc
}

.carousel-control {
    color:#31708f;
    width:5%
}

.carousel-control:hover,.carousel-control:focus {
    color:#31708f
}

.carousel-control.left,.carousel-control.right {
    background-image:none
}

.media-object {
    margin:auto;
    margin-top:15%
}

@media screen and (max-width: 768px) {
    .media-object {
        margin-top:0
    }
}
/* Contact Formatting
=============================================================*/
/* Button Formatting
=============================================================*/
/* Footer Formatting
==============================================================*/

#footer {
	background: #222;
	text-align: center;
	padding: 40px 0;
	color: #fff;
}

.copyright {
	margin: 0;
}

.copyright a{
    border-bottom: 1px dotted #fff;
}

#footer span{
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    color: #ff5252;
}
#footer p {
    color: #fff
}

.social-links {
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}

.social-links li {
	display: inline-block;
	margin: 5px;
}

.social-links a {
	width: 36px;
	height: 36px;
	display: block;
	line-height: 35px;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, .1);
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
			border-radius: 3px;
	font-size: 14px;
	color: rgba(255, 255, 255, .2);
}

.social-links a:hover {
	border: 1px solid rgba(255, 255, 255, .5);
	color: rgba(255, 255, 255, .8);
}
<!DOCTYPE html>
<html lang="en">

<head>

<!-- Meta charset 
===================================================================================-->
        <meta charset="utf-8">
        
<!-- Title  
===================================================================================-->
        <title>Window Company Template</title>
        
<!-- Meta Tags  
===================================================================================-->
        <meta name="author" content="Thomas Withers @ tomtucka.co.uk">
        <meta name="description" content="Social Media Wizzards that handle all of your social media markerting.">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <!-- CSS Stylesheets  
===================================================================================-->
        <link href = "css/bootstrap.min.css" rel = "stylesheet">
        <link href = "css/Custom.css" rel = "stylesheet">
        <link rel="stylesheet" href="css/animate.css">
        <link rel="shortcut icon" href="img/iceBox.png">
        
<!-- Custom Fonts 
===================================================================================-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab">
        <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
    </head>

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

<!-- Navigation
======================================================================================= -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">
                    <img alt="Brand" src="img/logo.png">
                </a>
            </div>
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden"><a class="page-scroll" href="#page-top"></a>
                    <li><a class="page-scroll" href="#About-Us">About</a> </li>
                    <li> <a class="page-scroll" href="#services">Services</a></li>
                    <li><a class="page-scroll" href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

<!-- Jumbotron
===================================================================================-->
    <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="/assets/example/bg_suburb.jpg" style="width:100%" class="img-responsive">
          <div class="container">
            <div class="carousel-caption">
              <h1>Ice7Media</h1>
              <p>This is a tag line.</p>
              <p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Button!</a>
            </p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="http://lorempixel.com/2000/600/abstract/1" class="img-responsive">
          <div class="container">
            <div class="carousel-caption">
              <h1>Ice7Media</h1>
              <p>This is a tag line.</p>
              <p><a class="btn btn-large btn-primary" href="#">Button!</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="http://placehold.it/1500X500" class="img-responsive">
          <div class="container">
            <div class="carousel-caption">
              <h1>Ice7Media</h1>
              <p>This is a tag line.</p>
              <p><a class="btn btn-large btn-primary" href="#">Button!</a></p>
            </div>
          </div>
        </div>
      </div>
      <!-- Controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
      </a>  
    </div>

<!-- Abouts Us
==================================================================================-->
    <section id="About-Us" class="About-Us">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 vline">
                    <h3>About Us</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
                </div>
                <div class="col-lg-6">
                    <div class="listing listing-danger">
                        <div class="shape">
                            <div class="shape-text">50%</div>
                        </div>
                        <div class="listing-content">
                            <h3 class="lead">Discount listing</h3>
                            <p>Tag Line.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="listing listing-danger">
                        <div class="shape">
                            <div class="shape-text">hot</div>
                        </div>
                        <div class="listing-content">
                            <h3 class="lead">Hot Offer</h3>
                            <p>Tag Line.</p>
                        </div>
                    </div>
                </div>
             </div>
        </div>
    </section>
<!-- Testimoinals 
==================================================================================-->
  <div class="container content">
        <div class="carousel slide" data-ride="carousel" id="carousel-example-generic">
            <!-- Indicators -->

            <ol class="carousel-indicators">
                <li class="active" data-slide-to="0" data-target=
                "#carousel-example-generic"></li>

                <li data-slide-to="1" data-target="#carousel-example-generic">
                </li>

                <li data-slide-to="2" data-target="#carousel-example-generic">
                </li>
            </ol><!-- Wrapper for slides -->

            <div class="carousel-inner">
                <div class="item active">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="thumbnail adjust1">
                                <div class="col-md-2 col-sm-2 col-xs-12">
                                <img class=
                                "media-object img-rounded img-responsive" src=
                                "http://placehold.it/100"></div>

                                <div class="col-md-10 col-sm-10 col-xs-12">
                                    <div class="caption">
                                        <p class="text-info lead adjust2">I
                                        can't wait to test this out.</p>

                                        <p><span class=
                                        "glyphicon glyphicon-thumbs-up"></span>&nbsp;This
                                        is a testimonial window. Feedback of
                                        user can be displayed here.</p>

                                        <blockquote class="adjust2">
                                            <p>Abhijit
                                            Goswami</p><small><cite title=
                                            "Source Title"><i class=
                                            "glyphicon glyphicon-globe"></i>
                                            www.example1.com</cite></small>
                                        </blockquote>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="thumbnail adjust1">
                                <div class="col-md-2 col-sm-2 col-xs-12">
                                <img class=
                                "media-object img-rounded img-responsive" src=
                                "http://placehold.it/100"></div>

                                <div class="col-md-10 col-sm-10 col-xs-12">
                                    <div class="caption">
                                        <p class="text-info lead adjust2">I
                                        can't wait to test this out.</p>

                                        <p><span class=
                                        "glyphicon glyphicon-thumbs-up"></span>&nbsp;This
                                        is a testimonial window. Feedback of
                                        user can be displayed here.</p>

                                        <blockquote class="adjust2">
                                            <p>Abhijit
                                            Goswami</p><small><cite title=
                                            "Source Title"><i class=
                                            "glyphicon glyphicon-globe"></i>
                                            www.example2.com</cite></small>
                                        </blockquote>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="item">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="thumbnail adjust1">
                                <div class="col-md-2 col-sm-2 col-xs-12">
                                <img class=
                                "media-object img-rounded img-responsive" src=
                                "http://placehold.it/100"></div>

                                <div class="col-md-10 col-sm-10 col-xs-12">
                                    <div class="caption">
                                        <p class="text-info lead adjust2">I
                                        can't wait to test this out.</p>

                                        <p><span class=
                                        "glyphicon glyphicon-thumbs-up"></span>&nbsp;This
                                        is a testimonial window. Feedback of
                                        user can be displayed here.</p>

                                        <blockquote class="adjust2">
                                            <p>Abhijit
                                            Goswami</p><small><cite title=
                                            "Source Title"><i class=
                                            "glyphicon glyphicon-globe"></i>
                                            www.example3.com</cite></small>
                                        </blockquote>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- Controls --><a class="left carousel-control" data-slide=
            "prev" href="#carousel-example-generic"><span class=
            "glyphicon glyphicon-chevron-left"></span></a> <a class=
            "right carousel-control" data-slide="next" href=
            "#carousel-example-generic"><span class=
            "glyphicon glyphicon-chevron-right"></span></a>
        </div>
    </div>
<!-- Map
==================================================================================-->  
<!-- footer
==================================================================================-->
	<footer id="footer">
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<ul class="social-links">
						<li><a href="index.html#" ><i class="fa fa-facebook"></i></a></li>
						<li><a href="index.html#" ><i class="fa fa-twitter"></i></a></li>
					</ul>
					<p class="heart">
                       This is a Tag line.
                    </p>
                    <p class="footer-company-name">Ice7Media &copy; 2015</p>
				</div>

			</div>
		</div>
	</footer>

   <!-- Scripts
===================================================================================-->
    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
    
    <!-- Scrolling Nav JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/scrolling-nav.js"></script>
    
    <script>
    $('.carousel').carousel({
        interval: 5000 //changes the speed
    })
    </script>

</body>

</html>

谁能帮我解决这个问题> 任何帮助表示赞赏

最佳答案

正如我在评论中所说，您有两个 slider 。对于第二个 slider ，添加一个类(并更改 id)，然后您可以为其元素添加一些属性:

<div class="carousel carousel2">
</div>

.carousel2{
    width:100%;
}
.carousel2 .thumbnail{
border:0;
}
.carousel.carousel2 img {
    min-height: 100px;
}
.carousel.carousel2 .item {
   height: auto;
}

http://jsfiddle.net/6tbe9e3g/3/

我认为这就是你所需要的，如果你需要自定义一些细节，你可以更新样式。

关于javascript - Bootstrap - 客户评价 Carousel 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32438961/

上一篇：javascript - 如果其他 div 的样式处于事件状态，则从一个 div 中删除样式

下一篇：html - 似乎无法更改字体类型

相关文章：

html - 任何关于开始 Web 编程/设计的建议

javascript - 距索引 0 的 Levenshtein 距离

javascript - 为什么我的 "el"在 Backbone 中不起作用？

javascript - 如何使用 JQuery 循环 "ul"子级？

javascript - Jquery Ajax 错误请求 400 Wordpress 小部件

javascript - 用javascript修改svg属性没有效果

jquery - 通过 jQuery 将数组发送到支持 Ajax 的 WCF

html - 如何告诉谷歌我在不同域上有不同语言的网站

jquery - 使用 jquery 在按钮单击时显示新的 div 并隐藏第一个 div

javascript - d3 响应条形图

©2024 IT工具网  联系我们