GuideBook

Responsive Bootstrap Carousel

Last updated
( 20 October 2015 )

Thank You for Purchasing Responsive Bootstrap Carousel. Please do not hesitate if you have any queries about this item. We are always there for your help. You can contact us on this e-mail address szthemes53@gmail.com.

What We Have Prepared ?

We have prepared a set of Carousels. This Pack includes Different types of carousel like thumbnail image gallery and content carousel with animated captions, testimonial carousel, portfolio carousel, video carousel etc.

Features

How To...

Bootstrap, JQuery & FontAwesome

First of all add the following bootstrap, jQuery and fontawesome files in <head/body> portion of your html file:

You can find these files in the following sub-folders of Main Pack folder:


Or

You can load Bootstrap, Font Awesome and jQuery files with a single line of code from their official online sources. You don't even have to download or install anything!

Animation & TouchSwipe Files

We used animate.css of Daniel Eden for animation. So you should also attach this from css folder in your HTML file.

To enable touch for mobiles and other devices you must attach "jquery.touchSwipe.min.js" from "js"folder

The further guide line about animation.css is mentioned in Animation Part below.


Use of CSS

In Pack Folder you will find "CSS" sub-folder. You can use CSS files from this folder by the following way:

For every single HTML file you have to use CSS file as you can see below:

The CSS files those are used for HTML files are mentioned below in the table:

HTML CSS
  • fixed_width_carousel.html
  • fixed_width_carousel.css
  • full_width_carousel.html
  • full_width_carousel.css
  • ken_burns_effect_carousel.html
  • ken_burns_effect_carousel.css
  • one_color_blue_carousel.html
  • one_color_blue_carousel.css
  • one_color_carousel.html
  • one_color_carousel.css
  • portfolio_carousel.html
  • portfolio_carousel.css
  • post_carousel.html
  • post_carousel.css
  • rotate_carousel.html
  • rotate_carousel.css
  • simple_carousel.html
  • simple_carousel.css
  • simple_second_carousel.html
  • simple_second_carousel.css
  • testimonial_carousel.html
  • testimonial_carousel.css
  • testimonial_thumbnails_carousel.html
  • testimonial_thumbnails_carousel.css
  • testimonial_thumbnails_ind_carousel.html
  • testimonial_thumbnails_ind_carousel.css
  • thumbnail_image_carousel.html
  • thumbnail_image_carousel.css
  • thumbnail_image_gallery_carousel.html
  • thumbnail_image_gallery_carousel.css
  • thumbnail_image_left_carousel.html
  • thumbnail_image_left_carousel.css
  • thumbnail_text_carousel.html
  • thumbnail_text_carousel.css
  • thumbnail_text_left_carousel.html
  • thumbnail_text_left_carousel.css
  • vertical_slide_carousel.html
  • vertical_slide_carousel.css
  • video_carousel.html
  • video_carousel.css
  • portfolio_2_columns_video_carousel.html
  • portfolio_3_columns_video_carousel.html
  • portfolio_4_columns_video_carousel.html
  • portfolio_6_columns_video_carousel.html
  • adv_portfolio_2_columns_video_carousel.html
  • adv_portfolio_3_columns_video_carousel.html
  • adv_portfolio_4_columns_video_carousel.html
  • adv_portfolio_6_columns_video_carousel.html
  • portfolio_columns_video_carousel.css
  • commerce_2_columns_carousel.html
  • commerce_3_columns_carousel.html
  • commerce_4_columns_carousel.html
  • adv_commerce_2_columns_carousel.html
  • adv_commerce_3_columns_carousel.html
  • adv_commerce_4_columns_carousel.html
  • commerce_columns_carousel.css
  • portfolio_2_columns_carousel.html
  • portfolio_3_columns_carousel.html
  • portfolio_4_columns_carousel.html
  • adv_portfolio_2_columns_carousel.html
  • adv_portfolio_3_columns_carousel.html
  • adv_portfolio_4_columns_carousel.html
  • portfolio_columns_carousel.css
  • team_2_columns_carousel.html
  • team_3_columns_carousel.html
  • team_4_columns_carousel.html
  • adv_team_2_columns_carousel.html
  • adv_team_3_columns_carousel.html
  • adv_team_4_columns_carousel.html
  • team_columns_carousel.css
  • gp_product_advance_2_col_carousel.html
  • gp_product_advance_3_col_carousel.html
  • gp_product_advance_4_col_carousel.html
  • gp_product_advance_6_col_carousel.html
  • adv_gp_product_advance_2_col_carousel.html
  • adv_gp_product_advance_3_col_carousel.html
  • adv_gp_product_advance_4_col_carousel.html
  • adv_gp_product_advance_6_col_carousel.html
  • gp_product_carousel_advance.css
  • testimonial_2_col_speech_bubble_border_carousel.html
  • testimonial_3_col_speech_bubble_border_carousel.html
  • testimonial_4_col_speech_bubble_border_carousel.html
  • adv_testimonial_2_col_speech_bubble_border_carousel.html
  • adv_testimonial_3_col_speech_bubble_border_carousel.html
  • adv_testimonial_4_col_speech_bubble_border_carousel.html
  • testimonial_speech_bubble_border_carousel.css
  • testimonial_2_col_speech_bubble_carousel.html
  • testimonial_3_col_speech_bubble_carousel.html
  • testimonial_4_col_speech_bubble_carousel.html
  • adv_testimonial_2_col_speech_bubble_carousel.html
  • adv_testimonial_3_col_speech_bubble_carousel.html
  • adv_testimonial_4_col_speech_bubble_carousel.html
  • testimonial_speech_bubble_carousel.css
  • testimonial_2_col_speech_bubble_circle_carousel.html
  • testimonial_3_col_speech_bubble_circle_carousel.html
  • testimonial_4_col_speech_bubble_circle_carousel.html
  • adv_testimonial_2_col_speech_bubble_circle_carousel.html
  • adv_testimonial_3_col_speech_bubble_circle_carousel.html
  • adv_testimonial_4_col_speech_bubble_circle_carousel.html
  • testimonial_speech_bubble_circle_carousel.css
  • testimonial_2_columns_carousel.html
  • testimonial_3_columns_carousel.html
  • testimonial_4_columns_carousel.html
  • adv_testimonial_2_columns_carousel.html
  • adv_testimonial_3_columns_carousel.html
  • adv_testimonial_4_columns_carousel.html
  • testimonial_columns_carousel.css
  • testimonial_2_columns_text_carousel.html
  • testimonial_3_columns_text_carousel.html
  • testimonial_4_columns_text_carousel.html
  • adv_testimonial_2_columns_text_carousel.html
  • adv_testimonial_3_columns_text_carousel.html
  • adv_testimonial_4_columns_text_carousel.html
  • testimonial_columns_text_carousel.css
  • testimonial_box_spch_2_col_carousel.html
  • testimonial_box_spch_3_col_carousel.html
  • testimonial_box_spch_4_col_carousel.html
  • adv_testimonial_box_spch_2_col_carousel.html
  • adv_testimonial_box_spch_3_col_carousel.html
  • adv_testimonial_box_spch_4_col_carousel.html
  • testimonial_speech_bubble_box_carousel.css
  • testimonial_box_spch_2_col_left_carousel.html
  • testimonial_box_spch_3_col_left_carousel.html
  • testimonial_box_spch_4_col_left_carousel.html
  • adv_testimonial_box_spch_2_col_left_carousel.html
  • adv_testimonial_box_spch_3_col_left_carousel.html
  • adv_testimonial_box_spch_4_col_left_carousel.html
  • testimonial_speech_bubble_box_left_carousel.css
  • testimonial_box_spch_2_col_right_carousel.html
  • testimonial_box_spch_3_col_right_carousel.html
  • testimonial_box_spch_4_col_right_carousel.html
  • adv_testimonial_box_spch_2_col_right_carousel.html
  • adv_testimonial_box_spch_3_col_right_carousel.html
  • adv_testimonial_box_spch_4_col_right_carousel.html
  • testimonial_speech_bubble_box_right_carousel.css
  • testimonial_box_spch_2_col_top_carousel.html
  • testimonial_box_spch_3_col_top_carousel.html
  • testimonial_box_spch_4_col_top_carousel.html
  • adv_testimonial_box_spch_2_col_top_carousel.html
  • adv_testimonial_box_spch_3_col_top_carousel.html
  • adv_testimonial_box_spch_4_col_top_carousel.html
  • testimonial_speech_bubble_box_top_carousel.css
  • testimonial_box_spch_2_col_bottom_carousel.html
  • testimonial_box_spch_3_col_bottom_carousel.html
  • testimonial_box_spch_4_col_bottom_carousel.html
  • adv_testimonial_box_spch_2_col_bottom_carousel.html
  • adv_testimonial_box_spch_3_col_bottom_carousel.html
  • adv_testimonial_box_spch_4_col_bottom_carousel.html
  • testimonial_speech_bubble_box_bottom_carousel.css
  • range_slides_2_columns_carousel.html
  • range_slides_3_columns_carousel.html
  • range_slides_4_columns_carousel.html
  • range_slides_6_columns_carousel.html
  • adv_range_slides_2_columns_carousel.html
  • adv_range_slides_3_columns_carousel.html
  • adv_range_slides_4_columns_carousel.html
  • adv_range_slides_6_columns_carousel.html
  • range_slides_carousel.css

Use of JavaScript/JQuery

In Pack folder you will find "js" sub-folder. In "js" folder you will find "responsive_bootstrap_carousel.js" file. Just attach this file in <head/body> of your HTML file.

Now

Now It will look like this


<!DOCTYPE html>

<html lang="en-US">

	<head>
		
		<!--======= Bootstrap StyleSheet =========-->	
		
		<link href="css/bootstrap.min.css" rel="stylesheet" media="all">
		
		<!--======= Awesome Font StyleSheet =========-->		
		
		<link href="font-awesome-4.4.0/css/font-awesome.min.css" rel="stylesheet" media="all">
		
		<!--======= Animation StyleSheet =========-->	
		
		<link href="css/animate.min.css" rel="stylesheet">
		
		<!--======= Pack StyleSheet =========-->	
		
		<link href="css/mega_files/responsive_bootstrap_carousel_mega_min.css" rel="stylesheet" media="all">

	</head>
	
<body>


		<!--*-*-*-*-*-*-*-*-*-*- Carousel *-*-*-*-*-*-*-*-*-*-->
		
		<carousel>
		
		</carousel>
        
		<!--*-*-*-*-*-*-*-*-*-*- End Carousel *-*-*-*-*-*-*-*-*-*-->


		<!--======= jQuery =========-->
		
		<script src="js/jquery-1.11.3.min.js"></script>

		<!--======= Bootstrap =========-->	
		
		<script src="js/bootstrap.min.js"></script>
		
		<!--======= TouchSwipe =========-->	
		
		<script src="js/jquery.touchSwipe.min.js"></script>

		<!--======= Pack JavaScript =========-->	
		
		<script src="js/responsive_bootstrap_carousel.js"></script>


</body>

</html>

				

How To Use HTML

After attaching all above files you will be able to attach HTML. There are 141 HTML files in the pack folder. To use HTML Code Please follow the instruction:

HTML Structure

<body>

		<!--*-*-*-*-*-*-*-*-*-*-  BOOTSTRAP CAROUSEL  *-*-*-*-*-*-*-*-*-*-->
		<div id="fixed_width_carousel"   class="carousel   fixed_width_carousel_fade   animate_text   fixed_width_carousel_wrapper"   data-ride="carousel"   data-interval="6000"   data-pause="hover">
		
				<!--======= First slide =========-->
				<div class="item active">
				
				</div>
				
				<!--======= Second slide =========-->
				<div class="item">
				
				</div>
				
		</div> <!--*-*-*-*-*-*-*-*-*-*-  End BOOTSTRAP CAROUSEL  *-*-*-*-*-*-*-*-*-*-->
		
		
</body>
				

How To Change Images

You can find images sub-folder in the Packfolder. You just have to replace all the Pics/Video of images folder with your own.


Note: Images used in the demo are not include in Pack.

Classes

Responsive Bootstrap Carousel pack build with Bootstrap. So we used our own classes names to override its formatting.

Layouts Pack Class
commerce_columns_carousel .commerce_columns_
fixed_width_carousel .fixed_width_
full_width_carousel .full_width_
gp_product_carousel_advance .gp_products_
ken_burns_effect_carousel .ken_burns_effect_
one_color_blue_carousel .one_color_blue_
one_color_carousel .one_color_
portfolio_carousel .portfolio_
portfolio_columns_carousel .portfolio_columns_
portfolio_columns_video_carousel .portfolio_columns_video_
post_carousel .post_
range_slides_carousel .range_slides_
rotate_carousel .rotate_
simple_carousel .simple_
simple_second_carousel .simple_second_
team_columns_carousel .team_columns_
testimonial_carousel .testimonial_
testimonial_columns_carousel .testimonial_columns_
testimonial_columns_text_carousel .testimonial_columns_text_
testimonial_speech_bubble_border_carousel .testimonial_spch_babl_brdr_
testimonial_speech_bubble_box_bottom_carousel .testim_spch_babl_box_botm_
testimonial_speech_bubble_box_carousel .testimonial_spch_babl_box_
testimonial_speech_bubble_box_left_carousel .testim_spch_babl_box_left_
testimonial_speech_bubble_box_right_carousel .testim_spch_babl_box_right_
testimonial_speech_bubble_box_top_carousel .testmin_spch_babl_box_top_
testimonial_speech_bubble_carousel .testimonial_spch_babl_
testimonial_speech_bubble_circle_carousel .testimonial_spch_babl_cricle_
testimonial_thumbnails_carousel .testimonial_thumbnails_
testimonial_thumbnails_ind_carousel .testimonial_thumbnails_ind_
thumbnail_image_carousel .thumbnail_image_
thumbnail_image_gallery_carousel .thumbnail_image_gallery_
thumbnail_image_left_carousel .thumbnail_image_left_
thumbnail_text_carousel .thumbnail_text_
thumbnail_text_left_carousel .thumbnail_text_left_
vertical_slide_carousel .vertical_slide_
video_carousel .video_
Note: Above classes examples are showing just pattern and writing style of classes names.

Fonts

We Used Following Fonts

Animation

We used animate.css of Daniel Eden for animation. You can create your own animation easily by using animation.css.

Animation Name Use Animation Name Use
bounce data-animation="animated bounce" flash data-animation="animated flash"
pulse data-animation="animated pulse" rubberBand data-animation="animated rubberBand"
shake data-animation="animated shake" swing data-animation="animated swing"
tada data-animation="animated tada" wobble data-animation="animated wobble"
jello data-animation="animated jello" bounceIn data-animation="animated bounceIn"
bounceInDown data-animation="animated bounceInDown" bounceInLeft data-animation="animated bounceInLeft"
bounceInRight data-animation="animated bounceInRight" bounceInUp data-animation="animated bounceInUp"
bounceOut data-animation="animated bounceOut" bounceOutDown data-animation="animated bounceOutDown"
bounceOutLeft data-animation="animated bounceOutLeft" bounceOutRight data-animation="animated bounceOutRight"
bounceOutUp data-animation="animated bounceOutUp" fadeIn data-animation="animated fadeIn"
fadeInDown data-animation="animated fadeInDown" fadeInDownBig data-animation="animated fadeInDownBig"
fadeInLeft data-animation="animated fadeInLeft" fadeInLeftBig data-animation="animated fadeInLeftBig"
fadeInRight data-animation="animated fadeInRight" fadeInRightBig data-animation="animated fadeInRightBig"
fadeInUp data-animation="animated fadeInUp" fadeInUpBig data-animation="animated fadeInUpBig"
fadeOut data-animation="animated fadeOut" fadeOutDown data-animation="animated fadeOutDown"
fadeOutDownBig data-animation="animated fadeOutDownBig" fadeOutLeft data-animation="animated fadeOutLeft"
fadeOutLeftBig data-animation="animated fadeOutLeftBig" fadeOutRight data-animation="animated fadeOutRight"
fadeOutRightBig data-animation="animated fadeOutRightBig" fadeOutUp data-animation="animated fadeOutUp"
fadeOutUpBig data-animation="animated fadeOutUpBig" flipInX data-animation="animated flipInX"
flipInY data-animation="animated flipInY" flipOutX data-animation="animated flipOutX"
flipOutY data-animation="animated flipOutY" lightSpeedIn data-animation="animated lightSpeedIn"
lightSpeedOut data-animation="animated lightSpeedOut" rotateIn data-animation="animated rotateIn"
rotateInDownLeft data-animation="animated rotateInDownLeft" rotateInDownRight data-animation="animated rotateInDownRight"
rotateInUpLeft data-animation="animated rotateInUpLeft" rotateInUpRight data-animation="animated rotateInUpRight"
rotateOut data-animation="animated rotateOut" rotateOutDownLeft data-animation="animated rotateOutDownLeft"
rotateOutDownRight data-animation="animated rotateOutDownRight" rotateOutUpLeft data-animation="animated rotateOutUpLeft"
rotateOutUpRight data-animation="animated rotateOutUpRight" hinge data-animation="animated hinge"
rollIn data-animation="animated rollIn" rollOut data-animation="animated rollOut"
zoomIn data-animation="animated zoomIn" zoomInDown data-animation="animated zoomInDown"
zoomInLeft data-animation="animated zoomInLeft" zoomInRight data-animation="animated zoomInRight"
zoomInUp data-animation="animated zoomInUp" zoomOut data-animation="animated zoomOut"
zoomOutDown data-animation="animated zoomOutDown" zoomOutLeft data-animation="animated zoomOutLeft"
zoomOutRight data-animation="animated zoomOutRight" zoomOutUp data-animation="animated zoomOutUp"
slideInDown data-animation="animated slideInDown" slideInLeft data-animation="animated slideInLeft"
slideInRight data-animation="animated slideInRight" slideInUp data-animation="animated slideInUp"
slideOutDown data-animation="animated slideOutDown" slideOutLeft data-animation="animated slideOutLeft"
slideOutRight data-animation="animated slideOutRight" slideOutUp data-animation="animated slideOutUp"

For further guideline just read the following complete tutorial about animation.css;

You can also read more about animation.css plugIn usage from this article;

Bootstrap Carousel Options

If you want to know anything about Bootstrap Carousel Options you may refer to the following articles;

Support

Please do not hesitate if you have any queries about this item. We are always there for your help. You can contact us on this e-mail address szthemes53@gmail.com


Copyright © 2015 SZ_Themes All Rights Reserved