GuideBook

Responsive Bootstrap Carousel

Last updated
( 09 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 24/7. 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 included Different types of carousel like thumbnail image gallery and content carousel with animated captions, testimonial carousel, portfolio carousel, video carousel etc.

Features

How To...

First of all add the following 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!


Use of CSS

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

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

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

Animation Plug-in

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

You can create your own animation easily by using animation.css plugIn. Just read the following complete tutorial about animation.css;

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

It will look like this:


<!DOCTYPE html>

<html lang="en-US">

	<head>

		<!--======= Awesome Font StyleSheet =========-->		
		
		<link href="font-awesome-4.4.0/css/font-awesome.min.css" rel="stylesheet" media="all">
		
		
		<!--======= Helping Plug-in StyleSheets =========-->	
		
		<link href="css/bootstrap.min.css" rel="stylesheet" media="all">
		<link href="css/animate.min.css" rel="stylesheet">
		
		
		<!--======= Pack StyleSheets =========-->	
		
		<link href="css/mega_files/responsive_bootstrap_carousel_mega_min.css" rel="stylesheet" media="all">

	</head>
	
<body>


		<!--/////////////// Carousel ///////////////-->
		
		<carousel>
		
		</carousel>
        
		
		
		<!--======= jQuery =========-->
		
		<script src="js/jquery-1.11.3.min.js"></script>
		
		
		<!--======= Bootstrap =========-->	
		
		<script src="js/bootstrap.min.js"></script>
		
		
		<!--======= Pack JavaScript =========-->	
		
		<script src="js/responsive_bootstrap_carousel.js"></script>
		
		<script src="js/jquery.touchSwipe.min.js"></script>

    
</body>

</html>

How To Use HTML

After attaching all above files you will be able to attach HTML. There are 36 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 Carousel Pack Class
Default .carousel .fixed_width_carousel
Note: Above classes examples are showing just pattern and writing style of classes names.

Fonts

We Used Following Fonts

Support

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

Copyright © 2015 SZ_Themes All Rights Reserved