How To...

Bootstrap 4, JQuery & FontAwesome

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

CSS
<link href="css/bootstrap.min.css" rel="stylesheet" media="all">
<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" media="all">
JavaScript/jQuery
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

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

js
CSS
fonts
font-awesome-4.7.0

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!

CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
JavaScript/jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js">

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

<link href="css/single_css_file/animate.min.css" rel="stylesheet">
<script src="js/jquery.touchSwipe.min.js"></script>

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:

fixed_width_carousel.css
ken_burns_effect_carousel.css
portfolio_columns_carousel.css
There are 36 files in "css" folder for all the HTML files. The detail about names of CSS files are mentioned in the table. Which ever file you want to use just attach that particular file in the <head/body> section of your HTML file.
You Can Also Use Compressed CSS File From mega_files folder
responsive_bootstrap_carousel_mega_min.css
Note:
You can use only this file for all HTML files

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

CSS
<link href="css/single_css_file/responsive_bootstrap_carousel_mega_min.css" rel="stylesheet" media="all">
JavaScript/jQuery
<script src="js/responsive_bootstrap_carousel.js"></script>

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.7.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.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:

1- Open HTML file that you want to use in a code editor such as Notepad++
2- Copy all HTML code of Carousel.
3- Paste this Carousel code in your own Project file
4- Save your file and open it.

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="carousel-item active">
				
				</div>
				
				<!--======= Second slide =========-->
				<div class="carousel-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

FontAwesome
Lato (Google Fonts)
Roboto (Google Fonts)
Raleway (Google Fonts)
Open Sans (Google 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;

SitePoint

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

GuideBook

Responsive Bootstrap Carousel

What We Have Prepared ?

Features

How To...

Bootstrap 4, JQuery & FontAwesome

CSS

JavaScript/jQuery

Or

CSS

JavaScript/jQuery

Animation & TouchSwipe Files

Use of CSS

You Can Also Use Compressed CSS File From `mega_files` folder

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

Use of JavaScript/JQuery

Now

CSS

JavaScript/jQuery

Now It will look like this

How To Use HTML

HTML Structure

How To Change Images

Classes

Fonts

Animation

Bootstrap Carousel Options

Support

GuideBook

Responsive Bootstrap Carousel

What We Have Prepared ?

Features

How To...

Bootstrap 4, JQuery & FontAwesome

CSS

JavaScript/jQuery

Or

CSS

JavaScript/jQuery

Animation & TouchSwipe Files

Use of CSS

You Can Also Use Compressed CSS File From mega_files folder

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

Use of JavaScript/JQuery

Now

CSS

JavaScript/jQuery

Now It will look like this

How To Use HTML

HTML Structure

How To Change Images

Classes

Fonts

Animation

Bootstrap Carousel Options

Support

You Can Also Use Compressed CSS File From `mega_files` folder