Twitter Bootstrap Question posted in

Twitter bootstrap – Bootstrap – Testimonials Carousel problems

So I’m trying to implement this testimonials carousel:http://bootsnipp.com/snippets/featured/testimonials-with-carousel

So far this is what is happened and I’m not sure why it happening…
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>

Could someone help me fix this>
Any help appreciated

Tags:

2

Answers


  1. 0

    Created a fiddle

    https://jsfiddle.net/jrahulroy/a6kk3k9d/

    It is working fine. Seems like some other css is interfering.

    .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;
    }
}
    Login or Signup to reply.
  2. 0

    Like I said in the comment, you have two sliders. For the second slider, add a class (and change the id) and then you can add some proprieties for its elements:

    <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/

    I think this is what you need and you can update the style if you need customize some details.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search