"Slider Bottom Aligned Thumbs and slide info right"
Bootstrap 3.3.0 Snippet by jcec007

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="container-fluid">
<div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="4000">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="container-fluid">
<div class="row">
<div class="top col-md-6 col-xs-12"><img src="http://lorempixel.com/416/304/nature" class="img-responsive"></div>
<div class="content col-md-6 col-xs-12">
<h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="top col-md-6 col-xs-12"><img src="http://lorempixel.com/416/304/nature" class="img-responsive"></div>
<div class="content col-md-6 col-xs-12">
<h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container-fluid">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#custom_carousel .item .top {
overflow:hidden;
max-height:300px;
margin-bottom:15px;
}
#custom_carousel .item {
color:#000;
background-color:#fff;
padding:20px 0;
overflow:hidden
}
#custom_carousel .item img{
width:100%;
height:auto
}
#custom_carousel .izq
{
position:absolute;
left: -25px;
top:40%;
background-image: none;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px;
height: 40px;
width : 40px;
margin-top: 30px;
}
/* Next button */
#custom_carousel .der
{
position:absolute;
right: -25px !important;
top:40%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(document).ready(function(ev){
var items = $(".nav li").length;
var leftRight=0;
if(items>5){
leftRight=(items-5)*50*-1;
}
$('#custom_carousel').on('slide.bs.carousel', function (evt) {
$('#custom_carousel .controls li.active').removeClass('active');
$('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
})
$('.nav').draggable({
axis: "x",
stop: function() {
var ml = parseInt($(this).css('left'));
if(ml>0)
$(this).animate({left:"0px"});
if(ml<leftRight)
$(this).animate({left:leftRight+"px"});
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard PRO React
Client or Partners Logo Slider
Timely Login slider
Mega menu slide down on hover with carousel

Questions / Comments:

porque não consigo visualizar os códigos?

Vinicius Azevedo () - 8 years ago - Reply 0