Click here to Skip to main content
15,748,330 members
Search within:


Insert a slider as background
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am working my website with Blocs App and the slider with Amazing Slider
I want to insert the full width amazing slider as background of a bloc. I have tested the insert into the bloc, the slider works well but the HTML content disappears.

Here is the bloc code:

HTML
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" type="image/png" href="favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    
	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="./js/jquery-2.1.0.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<script src="./js/blocs.min.js"></script><link rel='stylesheet' href='./css/font-awesome.min.css'/>
    
    <title></title>
</head>
<body>
<!-- Main container -->
<div class="page-container">
    
<!-- Hero Bloc -->
<div id="hero-bloc" class="bloc hero bgc-white bg-mixer d-bloc">
	<div class="container hero-nav bloc-sm">
		<nav class="navbar row">
			<div class="navbar-header">
				<a class="navbar-brand" href="index.html"><img src="img/logotext.png" width="230" height="100" /></a>
				<button id="nav-toggle" type="button" class="ui-navbar-toggle navbar-toggle" data-toggle="collapse" data-target=".navbar-1">
					<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
				</button>
			</div>
			<div class="collapse navbar-collapse navbar-1">
				<ul class="site-navigation nav navbar-nav pull-right">
					<li>
						<div class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Servicios<span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li>
									<a href="index.html" class="a-btn a-block">Audio</a>
								</li>
								<li>
									<a href="index.html" class="a-btn a-block">Video</a>
								</li>
								<li>
									<a href="index.html" class="a-btn a-block">Diseño Gráfico</a>
								</li>
								<li>
									<a href="index.html" class="a-btn a-block">Programación</a>
								</li>
								<li>
									<a href="index.html" class="a-btn a-block">Renta de Equipo</a>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<a href="index.html" class="ltc-white">Proyección Social</a>
					</li>
					<li>
						<a href="index.html" class="ltc-white">Acerca de Renuevos</a>
					</li>
				</ul>
			</div>
		</nav>
	</div>
	<div class="v-center">
		<div class="vc-content row">
			<div class="col-sm-12">
				<h1 class=" text-center tc-white">
					Grabaciones, Mezclas y Masterización HD
				</h1>
				<h3 class=" text-center mg-lg tc-white">
					Con la referencia mundial de los sistemas de sonido AVID™
				</h3>
				<div class="text-center">
					<a href="index.html" class="btn-wire btn btn-xl wire-btn-white">Ver más</a>
				</div>
			</div>
		</div><a id="scroll-hero" class="btn-dwn" href="#"><span class="fa fa-chevron-down"></span></a>
	</div>
</div>
<!-- Hero Bloc END -->

  </div>
<!-- Main container END -->

</body>
    
<!-- Google Analytics -->

<!-- Google Analytics END -->

</html>




Here is the slider code.

HTML
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title>Amazing Slider</title>
    
    <!-- Insert to your webpage before the </head> -->
    <script src="sliderengine/jquery.js"></script>
    <script src="sliderengine/amazingslider.js"></script>
    <link rel="stylesheet" type="text/css" href="sliderengine/amazingslider-1.css">
    <script src="sliderengine/initslider-1.js"></script>
    <!-- End of head section HTML codes -->
    
    <style type="text/css">
        body, html {
        margin: 0;
        padding: 0;
        }
    </style>

</head>
<body>
    
    <!-- Insert to your webpage where you want to display the slider -->
    <div id="amazingslider-wrapper-1" style="display:block;removed:relative;max-width:100%;margin:0 auto;">
        <div id="amazingslider-1" style="display:block;removed:relative;margin:0 auto;">
            <ul class="amazingslider-slides" style="display:none;">
                <li><img src="images/mixer.jpg" alt="mixer"  title="mixer" />
                </li>
                <li><img src="images/img%5Cc-slide-3.jpg" alt="img\c-slide-3"  title="img\c-slide-3" />
                </li>
                <li><img src="images/img%5Cpurple.jpg" alt="img\purple"  title="img\purple" />
                </li>
            </ul>
        </div>
    </div>
    <!-- End of body section HTML codes -->
    
</body>
</html>


What I have tried:

HTML
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" type="image/png" href="favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    
	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="./js/jquery-2.1.0.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<script src="./js/blocs.min.js"></script><link rel='stylesheet' href='./css/font-awesome.min.css'/>
    
    <title></title>
    <script src="sliderengine/jquery.js"></script>
    <script src="sliderengine/amazingslider.js"></script>
    <link rel="stylesheet" type="text/css" href="sliderengine/amazingslider-1.css">
    <script src="sliderengine/initslider-1.js"></script>

</head>
<body>
<!-- Main container -->
<div class="page-container">
    
<!-- Hero Bloc -->
<div id="amazingslider-wrapper-1" style="display:block;removed:relative;max-width:100%;margin:0 auto;">
        <div id="amazingslider-1" style="display:block;removed:relative;margin:0 auto;">
            <ul class="amazingslider-slides" style="display:none;">
                <li>&lt;img src="images/mixer.jpg" alt="mixer"  title="mixer" /&gt;
                </li>
                <li>&lt;img src="images/img%5Cc-slide-3.jpg" alt="img\c-slide-3"  title="img\c-slide-3" /&gt;
                </li>
                <li>&lt;img src="images/img%5Cpurple.jpg" alt="img\purple"  title="img\purple" /&gt;
                </li>
            </ul>
        
        <div class="container hero-nav bloc-sm">
		<nav class="navbar row">
			<div class="navbar-header">
				<a class="navbar-brand" href="index.html">&lt;img src="img/logotext.png" width="230" height="100" /&gt;</a>
				&lt;button id="nav-toggle" type="button" class="ui-navbar-toggle navbar-toggle" data-toggle="collapse" data-target=".navbar-1"&gt;
					<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
				&lt;/button&gt;
			</div>
			<div class="collapse navbar-collapse navbar-1">
				<ul class="site-navigation nav navbar-nav pull-right">
					<li>
						<div class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Servicios<span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li>
									<a href="index.html" class="a-btn a-block">Audio</a>
								</li>
								<li>
									<a href="index.html" class="a-btn a-block">Video</a>
								</li>
								<li>
									<a href="index.html" class="a-btn a-block">Diseño Gráfico</a>
								</li>
								<li>
									<a href="index.html" class="a-btn a-block">Programación</a>
								</li>
								<li>
									<a href="index.html" class="a-btn a-block">Renta de Equipo</a>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<a href="index.html" class="ltc-white">Proyección Social</a>
					</li>
					<li>
						<a href="index.html" class="ltc-white">Acerca de Renuevos</a>
					</li>
				</ul>
			</div>
		</nav>
	</div>
	<div class="v-center">
		<div class="vc-content row">
			<div class="col-sm-12">
				<h1 class=" text-center tc-white">
					Grabaciones, Mezclas y Masterización HD
				</h1>
				<h3 class=" text-center mg-lg tc-white">
					Con la referencia mundial de los sistemas de sonido AVID™
				</h3>
				<div class="text-center">
					<a href="index.html" class="btn-wire btn btn-xl wire-btn-white">Ver más</a>
				</div>
			</div>
		</div><a id="scroll-hero" class="btn-dwn" href="#"><span class="fa fa-chevron-down"></span></a>
	</div>
</div>
&lt;!-- Hero Bloc END --&gt;

&lt;!-- bloc-2 --&gt;
<div class="bloc bgc-dark-jungle-green d-bloc" id="bloc-2">
	<div class="container bloc-lg">
		<div class="row">
			<div class="col-sm-3">
				<div class="text-center">
					<span class="fa fa-heart icon-round icon-md"></span>
				</div>
				<h3 class="text-center mg-md">
					Audio
				</h3>
				<p class="text-center">
					A little feature description could go here. A little feature description.
				</p>
			</div>
			<div class="col-sm-3">
				<div class="text-center">
					<span class="fa fa-rocket icon-round icon-md"></span>
				</div>
				<h3 class="text-center mg-md">
					Video
				</h3>
				<p class="text-center">
					A little feature description could go here. A little feature description.
				</p>
			</div>
			<div class="col-sm-3">
				<div class="text-center">
					<span class="fa fa-code icon-round icon-md"></span>
				</div>
				<h3 class="text-center mg-md">
					Diseño Gráfico
				</h3>
				<p class="text-center">
					A little feature description could go here. A little feature description.
				</p>
			</div>
			<div class="col-sm-3">
				<div class="text-center">
					<span class="fa fa-tasks icon-round icon-md"></span>
				</div>
				<h3 class="text-center mg-md">
					Renta de Equipo
				</h3>
				<p class="text-center">
					A little feature description could go here. A little feature description.
				</p>
			</div>
		</div>
	</div>
</div>
&lt;!-- bloc-2 END --&gt;

&lt;!-- bloc-3 --&gt;
<div class="bloc l-bloc bgc-white" id="bloc-3">
	<div class="container bloc-lg">
		<div class="row">
			<div class="col-sm-12">
				<h2 class="text-center mg-md">
					Conoce a nuestro equipo de trabajo
				</h2>
				<p class="sub-heading text-center">
					Somos una familia con visión
				</p>
			</div>
		</div>
		<div class="row voffset-lg">
			<div class="col-sm-2">
				&lt;img src="img/placeholder-user.png" class="img-responsive img-circle" /&gt;
			</div>
			<div class="col-sm-4">
				<h3 class="mg-md">
					Christian R.
				</h3>
				<p>
					Arreglista y productor de audio
				</p><br /><a href="index.html" target="_blank"><span class="fa fa-twitter icon-sm pull-left"></span></a><a href="index.html" target="_blank"><span class="fa fa-facebook icon-sm pull-left"></span></a><a href="index.html" target="_blank"><span class="fa fa-dribbble icon-sm pull-left"></span></a>
			</div>
			<div class="col-sm-2">
				&lt;img src="img/placeholder-user.png" class="img-responsive img-circle" /&gt;
			</div>
			<div class="col-sm-4">
				<h3 class="mg-md">
					Helsin L.
				</h3>
				<p>
					Pintora y manager
				</p><br /><a href="index.html" target="_blank"><span class="fa fa-twitter icon-sm pull-left"></span></a><a href="index.html" target="_blank"><span class="fa fa-facebook icon-sm pull-left"></span></a><a href="index.html" target="_blank"><span class="fa fa-dribbble icon-sm pull-left"></span></a>
			</div>
		</div>
		<div class="row voffset-lg">
			<div class="col-sm-2">
				&lt;img src="img/placeholder-user.png" class="img-responsive img-circle" /&gt;
			</div>
			<div class="col-sm-4">
				<h3 class="mg-md">
					Daniel R.
				</h3>
				<p>
					Cantante, locutor y productor de video
				</p><br /><a href="index.html" target="_blank"><span class="fa fa-twitter icon-sm pull-left"></span></a><a href="index.html" target="_blank"><span class="fa fa-facebook icon-sm pull-left"></span></a><a href="index.html" target="_blank"><span class="fa fa-dribbble icon-sm pull-left"></span></a>
			</div>
			<div class="col-sm-2">
				&lt;img src="img/placeholder-user.png" class="img-responsive img-circle" /&gt;
			</div>
			<div class="col-sm-4">
				<h3 class="mg-md">
					Emanuel R.
				</h3>
				<p>
					Asistente de sonido y programador
				</p><br /><a href="index.html" target="_blank"><span class="fa fa-twitter icon-sm pull-left"></span></a><a href="index.html" target="_blank"><span class="fa fa-facebook icon-sm pull-left"></span></a><a href="index.html" target="_blank"><span class="fa fa-dribbble icon-sm pull-left"></span></a>
			</div>
		</div>
	</div>
</div>
<!-- bloc-3 END -->
</div>
<!-- Main container END -->

</body>
    
<!-- Google Analytics -->

<!-- Google Analytics END -->

</html></div>
Posted
Updated 11-Mar-16 14:05pm
v4
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
jquery background slider ie problem?
Insert a background image in xamarin
How to add a background image to testimonial slider?
Label Slider in Jquery
Problem inserting PHP code into jQuery Slider
Limit max and min on a two thumb slider
How to add multiple sliders? Please some extend the jquery for my code! ! !
Slider with temporal drawn
Jquery image rotate with slider handle
a question about slider control in MFC

Advertise
Privacy
Cookies
Terms of Use
Last Updated 11 Mar 2016
Layout: fixed | fluid
Copyright © CodeProject, 1999-2023
All Rights Reserved.

Web04 2.8:2023-09-29:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900