<< Back | Main Menu | FAQ | [?]

jQuery Sliders VII

Add sliders to your webpages

Flex Slider (responsive)



View code:

?
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!-- DC Flex Slider CSS -->
<link rel="stylesheet" href="dcodes/sliders/css/flex/flexslider.css" type="text/css" media="screen" />
 
<!-- requires jquery library -->
 
<!-- Modernizr -->
<script src="dcodes/sliders/js/flex/modernizr.js"></script>
 
<!-- DC Flex Slider JS -->
<script defer src="dcodes/sliders/js/flex/jquery.flexslider.js"></script>
<!-- requires easing library -->
<script src="dcodes/sliders/js/flex/jquery.easing.js"></script>
<script src="dcodes/sliders/js/flex/jquery.mousewheel.js"></script>
 
<!-- DC Flex Slider Start -->
<div id="dc_flex_container" role="dc_flex_container">
  <section class="f_slider">
    <div id="f_slider" class="flexslider">
      <ul class="fslides">
        <li> <img src="http://cdn.dcodes.net/p/800x500/ccc" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/800x500/999" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/800x500/ccc" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/800x500/999" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/800x500/ccc" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/800x500/999" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/800x500/ccc" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/800x500/999" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/800x500/ccc" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/800x500/999" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/800x500/ccc" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/800x500/999" /> </li>
      </ul>
    </div>
    <div id="flex_carousel" class="flexslider">
      <ul class="fslides">
        <li> <img src="http://cdn.dcodes.net/p/400x250/ccc" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/400x250/999" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/400x250/ccc" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/400x250/999" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/400x250/ccc" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/400x250/999" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/400x250/ccc" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/400x250/999" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/400x250/ccc" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/400x250/999" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/400x250/ccc" /> </li>
        <li> <img src="http://cdn.dcodes.net/p/400x250/999" /> </li>
      </ul>
    </div>
  </section>
</div>
<!-- DC Flex Slider End -->
<div class="dc_clear"></div> <!-- line break/clear line -->
 
<!-- DC Flex Slider Settings -->
<script type="text/javascript">
 
    $(window).load(function(){
      // Thumbnail Carousel
      $('#flex_carousel').flexslider({
        animation: "slide",
        controlNav: true,                               // Create navigation for paging control of each clide? Note: Leave true for manualControls usage
        animationLoop: true,                        // Should the animation loop? If false, directionNav will received "disable" classes at either end
        slideshow: false,                               // Animate slider automatically
        startAt: 0,                     // The slide that the slider should start on. Array notation (0 = first slide)
            touch: true,                    // Allow touch swipe navigation of the slider on touch-enabled devices
            video: false,                   // if using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches       
        itemWidth: 140,                                 // Box-model width of individual carousel items, including horizontal borders and padding.
        itemMargin: 5,                                  // Margin between carousel items.
        asNavFor: '#f_slider'                       // Internal property exposed for turning the slider into a thumbnail navigation for another slider
      });
       
      $('#f_slider').flexslider({
      // Banner Slider
        animation: "slide",
        controlNav: false,                       // Create navigation for paging control of each clide? Note: Leave true for manualControls usage
        animationLoop: false,                    // Should the animation loop? If false, directionNav will received "disable" classes at either end
        slideshow: true,               // Animate slider automatically
            slideshowSpeed: 4000,          // Set the speed of the slideshow cycling, in milliseconds
            animationSpeed: 600,           // Set the speed of animations, in milliseconds       
            smoothHeight: true,            // Allow height of the slider to animate smoothly in horizontal mode
        sync: "#flex_carousel",              // Mirror the actions performed on this slider with another slider. Use with care.
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
</script>




© TemplateAccess