We Keep Coding

Full horizontal page carousel bootstrap

I try to build a responsive one page using bootstrap that scrolls horizontally and every mouse scroll will switch to next page, best way i found so far to achieve this is to use carousel. The problem is that my carousel skips "pages". is there any way to restrict mouse scroll event to move only 100vw per scroll? or any other creative ideas how to approach this kind of build?
Any help will be much appreciated.Thanks in advance
This what i have so far:
https://codepen.io/xxannxx/pen/mxJWae
Html:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="aquamarine">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="blue"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="pink">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="purple"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="yellow">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="orange"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
Css:
.aquamarine {
width: 50vw;
height: 100vh;
background-color: aquamarine;
}
.blue {
width: 50vw;
height: 100vh;
background-color:skyblue;
}
.pink {
width: 50vw;
height: 100vh;
background-color:lightpink;
}
.purple {
width: 50vw;
height: 100vh;
background-color:plum;
}
.yellow {
width: 50vw;
height: 100vh;
background-color:yellow;
}
.orange {
width: 50vw;
height: 100vh;
background-color:orange;
}
.right.carousel-control, .left.carousel-control {
display: none;
}
.carousel-indicators li {
visibility: hidden;
}
JS:
$('#myCarousel').carousel({
interval: false
});
$('#myCarousel').bind('mousewheel', function(e)
{
if(event.wheelDelta>0) {
$(this).carousel('next');
}else if(event.wheelDelta<0){
$(this).carousel('prev');
}
}
);

Bootstrap carousel jQuery error

I'm trying to make a multiple items bootstrap carousel but it gives me this error: "#Carousel".carousel is not a function TypeError: "#Carousel".carousel is not a function, how can fix it?
here is my code:
$(document).ready(function () {
('#Carousel').carousel({
interval: 8000
})
});
.carousel-control {
left: -12px;
height: 40px;
width: 40px;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
margin-top: 90px;
}
.carousel-control.right {
right: -12px;
}
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
</div> <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a> <a data-slide="next" href="#Carousel" class="right carousel-control">›</a> </div>
</div>
</div>

From the code you pasted, I cannot see that you are loading Bootstrap library (css and js code). You can see Bootstrap loading information here http://getbootstrap.com/getting-started/

A full description of Carousel component is reported in boostrap 4.
In this page, instead, you will find the required libraries.
Working code:
$(document).ready(function () {
$('#Carousel').carousel({
interval: 8000
})
});
.carousel-control {
left: -12px;
height: 40px;
width: 40px;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
margin-top: 90px;
}
.carousel-control.right {
right: -12px;
}
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item item active">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
<div class="carousel-item item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
<div class="carousel-item item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a> <a data-slide="next" href="#Carousel" class="right carousel-control">›</a> </div>
</div>
</div>

Active state accordion

Using this script for accordion. But I can't find how to change the color for the accordionButton when the button is active.
JS
$(document).ready(function() {
$('.accordionButton').click(function() {
$('.accordionButton').removeClass('on');
$('.accordionContent').slideUp('normal');
if ($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('.accordionContent').hide();
$(".accordionContent").first().show();
});
CSS
.accordionButton {
color: #fff;
text-transform: uppercase;
font-variant: normal;
background-color: #51a429;
padding: 2px 2px 2px 5%;
cursor: pointer;
border-bottom: 5px solid #f5f5f5
}
.accordionButton:hover {
background-color: #1b3281
}
.accordionContent {
padding: 4% 5% 2% 0%
}
Thanks.

The way your accordion works is by adding the .on class to the currently open accordion tab's button. As such, I think this is what you meant:
.accordionButton.on {
background-color: yellow;
}
If you meant the moment when the button is clicked, then this will do the trick:
.accordionButton:active {
background-color: red;
}
You can see these behaviours in the snippet below.
$(document).ready(function() {
$('.accordionButton').click(function() {
$('.accordionButton').removeClass('on');
$('.accordionContent').slideUp('normal');
if ($(this).next().is(':hidden') == true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$(".accordionButton").first().addClass('on');
$('.accordionContent').hide();
$(".accordionContent").first().show()
});
.accordionButton {
color: #fff;
text-transform: uppercase;
font-variant: normal;
background-color: #51a429;
padding: 2px 2px 2px 5%;
cursor: pointer;
border-bottom: 5px solid #f5f5f5
}
.accordionButton:hover {
background-color: #1b3281
}
.accordionButton:active {
background-color: red;
}
.accordionButton.on {
background-color: yellow;
}
.accordionContent {
padding: 4% 5% 2% 0%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion-container" class="f-ms">
<div id="accordion-link-1" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-1 -->
<div id="accordion-1" class="accordionContent">
<div id="accordion-title-1" class="f-ms">
<h1 class="f-fp">Global deals </h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-1 -->
<div id="accordion-content-1" class="f-ms flex-container">
<a href="https://www.google.com/tombstone.png?type=thumbnail" id="102087">
<div id="accordion-1-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m12" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-1-tile-1 -->
</a>
<a href="">
<div id="accordion-1-tile-2" class="flex-grow-1 box-shadow">
<a href="https://www.google.com/tombstone.png?type=thumbnail&did=101982">
<img id="m13" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-1-tile-2 -->
</a>
<a href="https://www.google.com/tombstone.png?type=thumbnail&did=101">
<div id="accordion-1-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m14" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
</a>
</div>
<!-- end accordion-1-tile-3 -->
</a>
</div>
<!-- end accordion-content-1 -->
</div>
<!-- end accordion-1 -->
<div id="accordion-link-2" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-2 -->
<div id="accordion-2" class="accordionContent">
<div id="accordion-title-2" class="f-ms">
<h1 class="f-fp">Global deals </h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-2 -->
<div id="accordion-content-2" class="f-ms flex-container">
<a href="https://www.google.com/tombstone.png?type=thumbnail" id="102087">
<div id="accordion-2-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m15" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-2-tile-1 -->
</a>
<a href="">
<div id="accordion-2-tile-2" class="flex-grow-1 box-shadow">
<a href="">
<img id="m16" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-2-tile-2 -->
</a>
<a href="">
<div id="accordion-2-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m17" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
</a>
</div>
<!-- end accordion-2-tile-3 -->
</a>
</div>
<!-- end accordion-content-2 -->
</div>
<!-- end accordion-2 -->
<div id="accordion-link-3" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-3 -->
<div id="accordion-3" class="accordionContent">
<div id="accordion-title-3" class="f-ms">
<h1 class="f-fp">Global deals</h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-3 -->
<div id="accordion-content-3" class="f-ms flex-container">
<a href="">
<div id="accordion-3-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m18" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-3-tile-1 -->
</a>
<a href="">
<div id="accordion-3-tile-2" class="flex-grow-1 box-shadow">
<a href="">
<img id="m19" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-3-tile-2 -->
</a>
<a href="">
<div id="accordion-3-tile-3" class="flex-grow-1 ">
<a href="">
<img id="m20" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-3-tile-3 -->
</a>
</div>
<!-- end accordion-content-3 -->
</div>
<!-- end accordion-3 -->
<div id="accordion-link-4" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-4 -->
<div id="accordion-4" class="accordionContent">
<div id="accordion-title-4" class="f-ms">
<h1 class="f-fp">Global deals</h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-4 -->
<div id="accordion-content-4" class="f-ms flex-container">
<a href="">
<div id="accordion-4-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m21" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-4-tile-1 -->
</a>
<a href="">
<div id="accordion-4-tile-2" class="flex-grow-1 ">
<a href="">
<img id="m22" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-4-tile-2 -->
</a>
<a href="">
<div id="accordion-4-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m23" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10
" alt="">
</a>
</div>
<!-- end accordion-4-tile-3 -->
</a>
</div>
<!-- end accordion-content-4 -->
</div>
<!-- end accordion-4 -->
<div id="accordion-link-5" class="accordionButton">
<p class="f-fp f-lp">TEST</p>
</div>
<!-- end accordion-link-5 -->
<div id="accordion-5" class="accordionContent">
<div id="accordion-title-5" class="f-ms">
<h1 class="f-fp">Global deals</h1>
<p><span class="size13">Select tile for details</span>
</p>
<p class="f-lp"><span class="buttonBlue">CLICK HERE TO GO TO </span>
</p>
</div>
<!-- end accordion-title-5 -->
<div id="accordion-content-5" class="f-ms flex-container">
<a href="">
<div id="accordion-5-tile-1" class="flex-grow-1 box-shadow">
<a href="">
<img id="m24" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-5-tile-1 -->
</a>
<a href="">
<div id="accordion-5-tile-2" class="flex-grow-1 box-shadow">
<a href="">
<img id="m25" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-5-tile-2 -->
</a>
<a href="">
<div id="accordion-5-tile-3" class="flex-grow-1 box-shadow">
<a href="">
<img id="m26" class="f-ms" src="https://www.google.com/tombstone.png?type=thumbnail&did=10" alt="">
</a>
</div>
<!-- end accordion-5-tile-3 -->
</a>
</div>
<!-- end accordion-content-5 -->
</div>
<!-- end accordion-5 -->
</div>

Bootstrap caption outside carousel

Iam adding bootstrap carousel to my site. I need bootstrap caption to be placed outside of the image in the right section. I did it but the caption is not adjusting with the container? if anyone knows how to fix this it will be greatful.....
<style>
.img-swap {
cursor: pointer;
}
.content-container:after {
clear: both;
content: "";
display: block;
}
.fullview {
height: 16px;
padding: 0px;
width: 18px;
}
.clean {
background-position: -253px 0;
}
.hide-sidebar { margin-left: -253px; }
.clean { background-position: -253px 0; }
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.slider-container {
margin-top:35px;
height:100%;
}
.carousel-caption {
position: absolute;
top: 0;
text-align: left;
left: inherit;
right: inherit;
width: 200px;
color:#000;
}
.carousel-caption:not(#caption-0) {
display: none;
}
#media (max-width: 1024px) {
.right-side-content .wrapper { margin-right: 20px; }
.right-side-content.full-content .wrapper { margin-right: -253px; }
body { background-position: -253px 0; }
body.clean { background-position: 0 0; }
.left-side-content { margin-left: -253px; z-index: 99; }
.left-side-content.hide-sidebar { margin-left: 0; }
}
</style>
</head>
<body class="">
<header class="title hidden-xs " role="banner">
<div class="fluid-container">
<div class="row">
<div class="navbar landing-header navbar-inverse navbar-fixed-top col-lg-12 col-md-12 col-sm-12 bg-dkorange" role="navigation">
<div class="navbar-header col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-12">
<a class="navbar-brand" href="#"><img src="images/hudooku-logo-white-sml.png" alt="logo" class="img-responsive"></a>
</div>
</div>
<div class="navbar-header pull-right">
<div class="row">
<div class=" signup-sec">
<div class="signup">
<button class="btn btn-white gotham-bold">SIGN IN</button><span class="padd-lt8 padd-rt3">
/ </span>
<button class="btn btn-white gotham-bold">SIGN UP</button><span class="padd-lr30 gotham-light">
OR </span>
</div>
<div class="social-icon-landing text-center">
<span class="text-center gotham-light">
Login Via </span>
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end HEADER -->
</header>
<header class="title visible-xs " role="banner">
<div class="fluid-container">
<div class="row">
<div class="navbar landing-header navbar-inverse navbar-fixed-top col-lg-12 col-md-12 col-sm-12 bg-dkorange" role="navigation">
<div class="navbar-header col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-12">
<a class="navbar-brand" href="#"><img src="images/hudooku-logo-white-sml.png" alt="logo" class="img-responsive"></a>
</div>
</div>
<div class="navbar-header pull-right">
<div class="row">
<div class=" signup-sec">
<div class="signup">
<button class="btn btn-white gotham-bold">SIGN IN</button><span class="padd-lt8 padd-rt3">
/ </span>
<button class="btn btn-white gotham-bold">SIGN UP</button><span class="padd-lr30 gotham-light">
OR </span>
</div>
<div class="social-icon-landing text-center">
<span class="text-center gotham-light">
Login Via </span>
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end HEADER -->
</header>
<div class="clearfix">
</div>
<div class="content-container bg-light-gray">
<div class="container">
<div class="row">
<div class="container slider-container">
<div class="row">
<div id="slider" class="carousel slide col-xs-9 padd-lt0" data-ride="carousel" data-interval="3000">
<div class="carousel-inner">
<div class="item active">
<img alt="First slide" src="images/landing/carousel_bg_4.jpg">
</div>
<div class="item">
<img alt="Second slide" src="images/landing/carousel_bg_2.jpg">
</div>
<div class="item">
<img alt="Third slide" src="images/landing/carousel_bg_3.jpg">
</div>
</div>
</div>
<div id="slider_captions" class="col-xs-3 ">
<div>
<div id="caption-0" class="carousel-caption">
<h2>Title 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, im. A sint repudiandae tempora, nulla aliquam
</p>
</div>
<div id="caption-1" class="carousel-caption">
<h2>Title 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam
</p>
</div>
<div id="caption-2" class="carousel-caption">
<h2>Title 3</h2>
</div>
</div>
<a data-slide="prev" role="button" href="#slider" class="left carousel-control"><span class="glyphicon glyphicon-chevron-down"></span></a>
<a data-slide="next" role="button" href="#slider" class="right carousel-control"><span class="glyphicon glyphicon-chevron-up"></span></a>
</div>
</div>
</div>
<!-- /.container -->
</div>
</div>
<!-- /.container -->
</div>
<div class="footer">
<div class="footer-menu">
<ul>
<li class="padd-lt0">Mobile App</li>
<li> About </li>
<li>Terms & Privacy Policy</li>
<li>Help</li>
<li>Videos</li>
<li>Disclaimer</li>
<li class="border-rt-none">Blog</li>
</ul>
</div>
<div class="copyright-sec">
2014, Copyright ©<img src="images/hudooku-footer-logo.png">
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<!-- ============= SCRIPTS ============= -->
<!--<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>-->
<script type="text/javascript">
$("#slider").on('slide.bs.carousel', function(evt) {
var step = $(evt.relatedTarget).index();
$('#slider_captions .carousel-caption:not(#caption-'+step+')').fadeOut('fast', function() {
$('#caption-'+step).fadeIn();
});
});
</script>
</body>
</html>

You have to give position from bottom to your carousel-caption class.
like following:
.carousel-caption { bottom:-95px; }
For showing the caption outside the carousel-inner class, you have to set padding bottom into that class otherwise the caption will not appear. It will hide due to overflow
.carousel-inner { padding-bottom:95px; }

Aligning bootstrap next and prev buttons

I searched over internet that we cannot put the .carousel-left,.carousel-right in .carousel-inner. Before putting them out of the .carousel-inner it worked fine but after taking them it became like this:
And before it was this:
Here is my code:
HTML:
<div id="mySlider" class="carousel slide" style="width: 600px; height:340px;">
<div class="carousel-inner">
<div class="item active">
<img alt="" style="width: inherit; height: inherit;" src="http://getbootstrap.com/2.3.2/assets/img/examples/slide-01.jpg" />
<div class="carousel-caption">
<p>Video Caption</p>
</div>
</div>
<div class="item">
<img alt="" style="width: inherit; height: inherit;" src="http://getbootstrap.com/2.3.2/assets/img/examples/slide-01.jpg" />
<div class="carousel-caption">
<p>Video Caption 2</p>
</div>
</div>
<a class="carousel-control left" href="#mySlider" data-slide="prev">‹</a>
<a class="carousel-control right" href="#mySlider" data-slide="next">›</a>
</div>
</div>
I am using bootstrap so I don't need to mension the CSS in here :)
Please tell me how can I solve this issue?