Fancy Carousel

A Fancy Animated Carousel With Multiple Themes


Fancy Carousel has a lot of wonderful features including:

  1. Touch Enabled.
  2. Cross-Browser.
  3. Responsive.
  4. Highly Customizable.
  5. Image Themes.
  6. Hover Themes.
  7. Animated.
  8. Grayscale Effect.
  9. Rotation Effect.
  10. Animation Speed Adjustment.
  11. Customizable Mobile and Tablet Screen Size.

Extract the downloaded Zip package, the package includes plugin files, css and images, along with demo implementations. Include the plugin file after jQuery in your html.

Javascript:

  1.     <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  2.     <SCRIPT src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.6/hammer.min.js"></SCRIPT>
  3. <script type="text/javascript" src="js/plugin.js"></script>
  4.     <SCRIPT TYPE="text/javascript">
  5.         $(document).ready(function(){
  6.             $('.red_slider_wrap').fancySlider();
  7.         });
  8.     </SCRIPT>
  9.  

 

HTML Markup:

  1. <div class="red_slider_wrap" >
  2.  
  3.          <ul>
  4.              <li> <img src="images/1.png"> <a href="#">  <span><h3>Photography </h3> <p>Things about photography</p> </span></a></li>
  5.              <li> <img src="images/2.png"> <a href="#">  <span><h3>Web Browsing </h3> <p>Web Browsing is awesome</p> </a> </span></li>
  6.              <li> <img src="images/3.png"> <a href="#">  <span><h3>Abstract </h3> <p>Abstract Imaging</p> </a> </span></li>
  7.              <li> <img src="images/4.png"> <a href="#">  <span><h3>Mobile Internet </h3> <p>Mobile and Tablets</p> </a></span></li>
  8.              <li> <img src="images/5.png"> <a href="#">  <span><h3>Travel </h3> <p>Travel Agency</p> </a></span></li>
  9.              <li> <img src="images/6.png"> <a href="#">  <span><h3>Office Workers </h3> <p>Office and White Collar Workers </p> </a></span></li>
  10.              <li> <img src="images/7.png"> <a href="#">  <span><h3>Furniture </h3> <p>Italian Hand Crafter </p> </a></span></li>
  11.              <li> <img src="images/8.png"> <a href="#">  <span><h3>Cloud </h3> <p>Cloud Servers Available</p> </a></span></li>
  12.              <li> <img src="images/9.png"> <a href="#">  <span><h3>Sports </h3> <p>Its all fun and games</p> </a></span></li>
  13.        </ul>
  14.  
  15.        <a href="#" class="red_slider_prev"><img src="img/left.png"></a>
  16.        <a href="#" class="red_slider_next"><img src="img/right.png"></a>
  17.                                 
  18. </div>

 

Have a look at the demo implementations inside the Zip package for better understading.

Fancy Slider comes with tons of customizations, the jQuery plugin allows you to add your own configurations, the configurations default values are:

  1. img_width: 200    
  2. img_height: 200
  3. anim_speed: 500
  4. auto_slide: true
  5. auto_interval: 2000
  6. effect: "square"
  7. hover_size: "full"
  8. hover_speed: 200
  9. hover_opacity: 0.8
  10. hover_theme: "red_hover_theme_light"
  11. image_theme: 'red_slider_rotate1'
  12. mobile_img_width: 0
  13. mobile_img_height: 0
  14. tablet_img_width : 0
  15. tablet_img_height : 0
  16. overflow: 0
  17. animated_hover: true

 

image_width is the width of the image, the default value is 200 (px).

image_height is the height of the images, the default value is 200 (px).

anim_speed is the animation speed (sliding speed) the default value is 200 (ms).

auto_slide determines whether the carousel animation slides automatically or not.

auto_interval is the time after which the next slide shows up, the default value is 2000 (ms).

effect is the images shape, it can be square or circle, the default is squre.

hover_size is the size of the hover box that shows up on hover, it can be full, hald or quarter, the default is full.

hover_speed is the speed of the hover box animation, the default value is 200 (ms)

hover_opacity is the transparency factor of the hover box, it can range from 0 to 1, 0 is totally transparent and 1 is totally opaque

hover_theme is the color theme of the hover box, it can be:

"red_hover_theme_light"

"red_hover_theme_dark"

"red_hover_theme_blue"

"red_hover_theme_green"

"red_hover_theme_plain"

"red_hover_theme_grey"

 

image_theme is the animation effect of the images used, it can be:

'red_slider_rotate1'

'red_slider_rotate2'

'red_slider_rotate3'

'red_slider_grey'

mobile_img_width is the width of the images that will be visible in mobile devices, if it is 0 the image size will be the same as img_width, the default value is 0.

mobile_img_height is the height of the images that will be visible in mobile devices, if it is 0 the image size will be the same as img_height, the default value is 0.

tablet_img_width is the width of the images that will be visible in tablet devices, if it is 0 the image size will be the same as img_width, the default value is 0.

tablet_img_height is the height of the images that will be visible in tablet devices, if it is 0 the image size will be the same as img_height, the default value is 0.

overflow can be used to achieve visible subtitles, it can be used to increase the size under the images, see the demo implementations in the packaged zip file eg:

http://redhawk-studio.com/demos/carousel/overflow.html

animated_hover determines if the hover box is animated or not, the example of non-animated hover box:

http://redhawk-studio.com/demos/carousel/overflow.html

 

 

Hammer.js library has been used which is under MIT license:

  1. Copyright (C) 2013 by Jorik Tangelder (Eight Media)
  2.  
  3. Permission is hereby granted, free of charge, to any person obtaining a copy
  4. of this software and associated documentation files (the "Software"), to deal
  5. in the Software without restriction, including without limitation the rights
  6. to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  7. copies of the Software, and to permit persons to whom the Software is
  8. furnished to do so, subject to the following conditions:
  9.  
  10. The above copyright notice and this permission notice shall be included in
  11. all copies or substantial portions of the Software.
  12.  
  13. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  14. IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  15. FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  16. AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  17. LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  18. OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  19. THE SOFTWARE.