"Responsive slideshow with quick menu"
Bootstrap 3.3.0 Snippet by amorz

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 ---------->
<div class="container">
<div class="row overflownone">
<div class="col-md-4 information nopaddingleft nopaddingright hidden-sm hidden-xs">
<h3>Quick menu</h3>
<ul class="information_menu">
<li class="active" data-id="1"><a href="#"><i class="fa fa-calendar-plus-o"></i> Lorem ipsum </a></li>
<li data-id="2"><a href="#"><i class="fa fa-commenting-o"></i> Praesent posuere</a></li>
<li data-id="3"><a href="#"><i class="fa fa-medkit"></i> Phasellus imperdiet</a></li>
<li data-id="4"><a href="#"><i class="fa fa-heartbeat"></i> In accumsan</a></li>
a
</ul>
<a href="tel:000000000000" class="btn btn-emergency"><span><i class="fa fa-phone"></i> Direct call button</span></a>
</div>
<div class="col-md-8 nopaddingleft nopaddingright">
<div class="slideshow">
<div class="overlay-id1 overlay-item">
<h3>Choose option</h3>
<ul class="quickmenu">
<li><a href="#" title="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
<li><a href="#" title="#">Praesent posuere tellus a luctus aliquet.</a></li>
<li><a href="#" title="#">Phasellus imperdiet mi eget sollicitudin molestie.</a></li>
<li><a href="#" title="#">In accumsan tortor eget massa bibendum, ut suscipit elit maximus.</a></li>
<li><a href="#" title="#">Nulla sodales turpis vitae dapibus convallis.</a></li>
</ul>
</div>
<div class="overlay-id2 overlay-item">
<h3>Choose option</h3>
<ul class="quickmenu">
<li><a href="#" title="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></li>
<li><a href="#" title="#">Praesent posuere tellus a luctus aliquet.</a></li>
<li><a href="#" title="#">Phasellus imperdiet mi eget sollicitudin molestie.</a></li>
<li><a href="#" title="#">In accumsan tortor eget massa bibendum, ut suscipit elit maximus.</a></li>
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
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
html {
font-size: 62.5%;
}
body {
font-size: 14px;
font-size: 14px;
font-size: 1.4rem;
background: #f5f5f5;
padding-top: 30px;
}
h3 {
font-size: 24px;
font-size: 24px;
font-size: 2.4rem;
}
.nopaddingleft {
padding-left: 0;
}
.nopaddingright {
padding-right: 0;
}
.overflownone {
overflow: hidden!important;
}
.information {
background: #2a3d46;
position: relative;
height: 400px;
}
.information h3 {
font-size: 34px;
font-size: 3.4rem;
font-family: "roboto", sans-serif;
font-weight: 500;
color: #FFF;
padding: 0 15px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
;(function($){
$(document).ready(function() {
$('.information_menu').find('li').hover(function(e) {
$('.information_menu').find('li').removeClass('active');
$(this).addClass('active');
$(".overlay-item").removeClass("active");
$(".overlay-item").removeClass("inactive");
$(".overlay-id"+$(this).data("id")).addClass("active").removeClass("inactive");
$(".overlay-id"+$(this).data("id")).prev().addClass("inactive")
});
$('.slideshow').children().on('mouseleave',function(e) {
$(this).removeClass("active");
});
$('.carousel').carousel();
});
})(jQuery);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Great work.. thanks for this info.

undisputedking (-3) - 6 years ago - Reply 0


Great work.. thanks for this info.

undisputedking (-3) - 6 years ago - Reply 0


bonjour je viens de faire copier coller de tous les codes, juste lors de la compilation et visualisation dans firefox j'arrive pas a avoir le meme resultat je ne vois pas le deroulement des caroussels? c'est du a quoi?

Malika lalmas () - 8 years ago - Reply 0