2 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 47 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

<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>
<!--			<li data-target="#myCarousel" data-slide-to="3"></li> -->
		</ol>
 
		<div class="carousel-inner">
 
			<div class="item active">
					<img src="img/BG2.png"/> 
				<div class="container">
					<div class="carousel-caption">
						<h1>Lorem ipsum dolor sit amet.<h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate magna sit amet tellus fermentum, id sollicitudin felis tincidunt. Suspendisse.</p>
						<div class="col-md-6 col-md-offset-3">
						<button class="btn ">Know More</button>
						<button class="btn btn-success">Know More</button>
					</div>
					</div>
				</div>
			</div>
 
			<div class="item ">
				<img src="img/BG2.png"/>
 
				<div class="container">
					<div class="carousel-caption">
						<h1>Lorem ipsum dolor sit amet.<h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate magna sit amet tellus fermentum, id sollicitudin felis tincidunt. Suspendisse.</p>
						<div class="col-md-6 col-md-offset-3">
						<button class="btn ">Know More</button>
						<button class="btn btn-success">Know More</button>
					</div>
					</div>
				</div>
			</div>
 
			<div class="item ">
				<img src="img/BG2.png"/>
 
				<div class="container">
					<div class="carousel-caption">
						<h1>Lorem ipsum dolor sit amet.<h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate magna sit amet tellus fermentum, id sollicitudin felis tincidunt. Suspendisse.</p>
						<div class="col-md-6 col-md-offset-3">
						<button class="btn ">Know More</button>
						<button class="btn btn-success">Know More</button>
					</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>

This is a carousel i made and the problem with this is that when i slide through the 3 slides and than click the next button(which should take me back to slide one) , the entire carousel blanks out . Why is that happening ? also when instead of next i try pressing previous , it all slides through just fine , only having this problem with the next button , why is it ?

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 47 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Caught the problem

Oh ! Problem was i actually forgot to close the Div ,

Thank you though very much .

Corrected code below .

<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>
<!--			<li data-target="#myCarousel" data-slide-to="3"></li> -->
		</ol>
 
		<div class="carousel-inner">
 
			<div class="item active">
					<img src="img/BG2.png"/> 
				<div class="container">
					<div class="carousel-caption">
						<h1>Lorem ipsum dolor sit amet.<h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate magna sit amet tellus fermentum, id sollicitudin felis tincidunt. Suspendisse.</p>
						<div class="col-md-6 col-md-offset-3">
						<button class="btn ">Know More</button>
						<button class="btn btn-success">Know More</button>
					</div>
					</div>
				</div>
			</div>
 
			<div class="item ">
				<img src="img/BG2.png"/>
 
				<div class="container">
					<div class="carousel-caption">
						<h1>Lorem ipsum dolor sit amet.<h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate magna sit amet tellus fermentum, id sollicitudin felis tincidunt. Suspendisse.</p>
						<div class="col-md-6 col-md-offset-3">
						<button class="btn ">Know More</button>
						<button class="btn btn-success">Know More</button>
					</div>
					</div>
				</div>
			</div>
 
			<div class="item ">
				<img src="img/BG2.png"/>
 
				<div class="container">
					<div class="carousel-caption">
						<h1>Lorem ipsum dolor sit amet.<h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate magna sit amet tellus fermentum, id sollicitudin felis tincidunt. Suspendisse.</p>
						<div class="col-md-6 col-md-offset-3">
						<button class="btn ">Know More</button>
						<button class="btn btn-success">Know More</button>
					</div>
				</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>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 32 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Easy error to make, hard to find

Which, is why it is important to run your markup through a validator — every time.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.