Bootstrap Snippet flexslider on thumbnail hover using HTML CSS jQuery

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
<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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Slider</title>    
   <link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.css" type="text/css" rel="stylesheet">  
</head>
<body>
<div class="flexslider">
  <ul class="slides">
    <li data-thumb="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg">
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
    </li>
    <li data-thumb="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg">
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
    </li>
    <li data-thumb="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg">
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
    </li>
    <li data-thumb="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg">
      <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
    </li>
  </ul>
</div>
<script href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.js" type="text/javascript"></script>
</body>
</html>
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
/*
 * jQuery FlexSlider v2.6.1
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 and later license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 *
 <link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.css" type="text/css" rel="stylesheet">
 */
/* ====================================================================================================================
 * FONT-FACE
 * ====================================================================================================================*/
@font-face {
  font-family: 'flexslider-icon';
  src: url('fonts/flexslider-icon.eot');
  src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* ====================================================================================================================
 * RESETS
 * ====================================================================================================================*/
.flex-container a:hover,
.flex-slider a:hover {
  outline: none;
}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
  });
  $(".flex-control-thumbs li img").hover(function(){
     $(this).click();
  });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"flexslider on thumbnail hover "
Bootstrap 3.3.0 Snippet by maneeshsinghhs

Related: See More

Questions / Comments:

"flexslider on thumbnail hover " Bootstrap 3.3.0 Snippet by maneeshsinghhs

Related: See More

Questions / Comments:

"flexslider on thumbnail hover "
Bootstrap 3.3.0 Snippet by maneeshsinghhs