تب ریسپانسیو

با استفاده از این تب می توانید در سایت خود تب کاملا آبی و ریسپانسیو داشته باشید .

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<link rel="stylesheet" type="text/css" href="css/component.css" />
	<script src="js/modernizr.custom.js"></script>

2-  کد html جهت استفاده پلاگین

		<div class="container">	
			<div class="main">
				<div id="cbp-contentslider" class="cbp-contentslider">
					<ul>
						<li id="slide1">
							<h3>دنیای جی کوئری</h3>
							<div>
								<div class="cbp-content">
                                    <p><!-- متن مورد نظرتان را اینجا وارد کنید --></p>
                                </div>
							</div>
						</li>
						<li id="slide2">
							<h3>دنیای جی کوئری</h3>
							<div>
								<div class="cbp-content">
                                    <p><!-- متن مورد نظرتان را اینجا وارد کنید --></p>
								</div>
							</div>
						</li>
						<li id="slide3">
							<h3>دنیای جی کوئری</h3>
							<div>
								<div class="cbp-content">
                                    <p><!-- متن مورد نظرتان را اینجا وارد کنید --></p>
								</div>
							</div>
						</li>
						<li id="slide4">
							<h3>دنیای جی کوئری</h3>
							<div>
								<div class="cbp-content">
                                    <p><!-- متن مورد نظرتان را اینجا وارد کنید --></p>
								</div>
							</div>
						</li>
						<li id="slide5">
							<h3>دنیای جی کوئری</h3>
							<div>
								<div class="cbp-content">
                                    <p><!-- متن مورد نظرتان را اینجا وارد کنید --></p>
								</div>
							</div>
						</li>
					</ul>
					<nav>
						<a href="#slide1" class="icon-wolf"><span>دنیای جی کوئری</span></a>
						<a href="#slide2" class="icon-rabbit"><span>دنیای جی کوئری</span></a>
						<a href="#slide3" class="icon-aligator"><span>دنیای جی کوئری</span></a>
						<a href="#slide4" class="icon-turtle"><span>دنیای جی کوئری</span></a>
						<a href="#slide5" class="icon-platypus"><span>دنیای جی کوئری</span></a>
					</nav>
				</div>
			</div>
		</div>
		<script src="js/jquery.cbpContentSlider.min.js"></script>
		<script>
			$(function() {
				/*
				- how to call the plugin:
				$( selector ).cbpContentSlider( [options] );
				- options:
				{
					// default transition speed (ms)
					speed : 500,
					// default transition easing
					easing : 'ease-in-out',
					// current item's index
					current : 0
				}
				- destroy:
				$( selector ).cbpContentSlider( 'destroy' );
				*/

				$( '#cbp-contentslider' ).cbpContentSlider();
			});
		</script>