I have been using a video tutorial for Bootstrap Carousel and somehow my code is same as per the video yet the links are not working...
The code...
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Portfolio Document</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js">
</script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand">Photo Gallery</div>
</div>
<ul class="nav navbar-nav">
<li><a href='#'>Home</a></li>
<li><a href='#'>Nature Gallery</a></li>
<li><a href='#'>Science Gallery</a></li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="carousel slide" data-ride="carousel" id="slider">
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
<li data-target="#slider" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><img src="img/slide01.png"></div>
<div class="item"><img src="img/slide02.png"></div>
<div class="item"><img src="img/slide01.png"></div>
<div class="item"><img src="img/slide02.png"></div>
</div>
<a href="#slider" data-slide="prev" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#slider" data-slide="next" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Another issue is, I am using images of 750px*300px and in desktop view there is grey shade area on the right of the image. While in the mobile or responsive view that grey shade area isnt visible. Can someone please suggest how to rectify the issue?
Please help people, I am new to web-designing and new to stackoverflow too :)
Your links wont work because you need to load jquery.js before bootstrap.js so just flip these around in your head section. Also you need to load jquery and not jquery ui so it should look something like the following
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Then your images need to have some css to get them to fill the carousel
#slider .item {
height: 250px;
}
#slider .item img{
width: 100%;
height: 100%;
}
Here is a fiddle for you to see this working Fiddle
The only thing about this is images can become skewed in responsive design and images have different sizes so you may want to create a background image for each of the carousel items. Like so
#slider .item {
padding-bottom: 50%;
}
#slider .first-item{
background: url('http://placehold.it/350x150');
background-size: cover;
background-position: center;
}
#slider .second-item{
background: url('http://placehold.it/350x150');
background-size: cover;
background-position: center;
}
#slider .third-item{
background: url('http://placehold.it/350x150');
background-size: cover;
background-position: center;
}
#slider .fourth-item{
background: url('http://placehold.it/350x150');
background-size: cover;
background-position: center;
}
and your html for the carousel inner will look like this:
<div class="carousel-inner">
<div class="item active first-item"></div>
<div class="item second-item"></div>
<div class="item third-item"></div>
<div class="item fourth-item"></div>
</div>
Here is a fiddle of that working Fiddle
Related
I have coded a carousel (photo slide) that I had functioning before; however, I am revising my site and having trouble making it function again. The arrow controls that slide left and right are present; however, the photos are not. Before placing the carousel code the photos were visible, but they were not aligned correctly.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="images/rb/tisha-prevented-from-leaking-live-behind-the-scenes-stories.jpg" alt="superstar" style="width:500px;height:500px;">
<div class="carousel-caption">
<h3 align="right">Tisha Vaculin</h3>
<p align="right">Prevented from leaking teasers behind the scenes in stories. Amongst a few targeted.</p>
</div>
</div>
<div class="item">
<img src="images/rb/gabrielle-steberis-prevented-from-leaking-behind-the-scenes-footage-of-new-series-diety.jpg" alt="superstar" style="width:500px;height:500px;">
<div class="carousel-caption">
<h3 align="right">Gabrielle Steberis</h3>
<p align="right">Prevented from leaking teasers to her Diety series in her stories</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"> </span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<style>
/* Carousel */
.carousel-inner img {
/* make all photos black and white */
width: 100%; /* Set width to 100% */
margin: auto;
}
.carousel-caption h3 {
color: green !important;
}
#media (max-width: 1200px) {
.carousel-caption {
display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
}
/* End of Carousel */
</style>
How do I fix This navbar issue in my website. If you Check This link (http://ibrahim.techrms.com/), You will find that the navbar Buttons are squished together in the home page. The same code is in the pages "About us" and "Contact us". But the navbar in the "About us" and "Contact us" pages are not squished together.
This is the code:
<!DOCTYPE html>
<html>
<head>
<title>Tecmarks</title>
<link rel="stylesheet" type="text/css" href="tecmarks.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.dropbtn {
background-color: darkgrey;
color: white;
padding: 20px;
font-size: 15px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: whitesmoke;
padding: 20px 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {display: block;}
</style>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top" style="background-color: lightgrey">
<div class="container">
<a class="navbar-brand" href="http://tecmarks.com/"><img src="images/logo (1).png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home
</a>
</li>
<li class="dropdown">
<button class="dropbtn">Company</button>
<div class="dropdown-content">
About us
</div>
</li>
<div class="dropdown">
<button class="dropbtn">Our Solutions</button>
<div class="dropdown-content">
Human Resources & Payroll
Time Attendance
Time Sheet Managment
Website Design & Development
Domain & Hosting
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Our websites</button>
<div class="dropdown-content">
Tecmarks
ibrahim.techrms
Feuger
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="contact-us.html">Contact us</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Sorry but it wasn't a problem the thing was that is was a responsive navbar and it joins together in smaller views in mobiles and all it will become a dropdown button.
Sorry about the question. If you liked the question please vote for it :)
I only have one badge and 11 points.If you liked my website you can enable notifications and I'll let you know if i changed it or not. If you want you could tell me how my website looks like from your point of view. If you didn't like it then you can tell me what changes I Should do in the website then I'll let you know when I edited the website. I am a beginner in making websites This is a website that I am making for a company,Tecmarks.com
I can not seem to get the background images to work on the carousel. Everything else seems to be working but I cannot get the those to work.
<!DOCTYPE html>
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
This is where I have place the css in order to set the background size and what image I plan to use for each slide. I have checked and rechecked to make sure the path to the image is correct and it is 100 percent.
<style type="text/css">
.slide1{
background-image: url('images/image01.jpg');
height: 500px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.slide2{
background-image: url('images/image02.jpg');
height: 500px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.slide3{
background-image: url('images/image03.jpg');
height: 500px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
</style>
</head>
<body>
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"> </li >
<li data-target="#theCarousel" data-slide-to="1"> </li>
<li data-target ="#theCarousel" data-slide-to="2"> </li>
</ol >
And here is where I used the classes that connect to the specific slides. It seems to me like I have the code correctly typed, but still can't seem to figure out why the images will not show.
<div class="carousel-inner">
<div class="item active" >
<div class ="slide1"></div>
</div>
<div class="item">
<div class="slide2"></div>
</div>
<div class="item">
<div class="slide3"></div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"> </span>
</a>
<a class="right carousel-control" href="#theCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I was able to get them to work by setting the height and width of the div (to 100% in my case). It seems like maybe if there is nothing included in the carousel-item, its default size is 0 so the background image is not visible.
I'm using Bootstrap 4 and I applied the background directly to the carousel-item div, but if you added a width: to your existing slide1, etc. classes, it might work as well.
.carousel-item {
height:100%;
width:100%;
}
<div class="carousel-inner">
<div class="carousel-item active slide1" >
</div>
</div>
or
.slide1{
background-image: url('images/image01.jpg');
height: 500px;
width: _____;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
For some odd reason scrollspy is causing my second list item to be active on page load instead of the first one. It's weird because after I scroll a bit with the mouse it will make the correct list item active. Aside from this error it functions perfectly. If someone could help me out it would be greatly appreciated.
Heres my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="111">
<header id="home">
<nav class="navbar navbar-default navbar-fixed-top cbp-af-header">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
Determined Divas
<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li id="home" class="active">Home</li>
<li>About</li>
<li>Who We Are</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" id="content">
<!-- Home page row -->
<div class="row" id="home">
<div class="fill" style="background-image:url(img/LP/pathways_12.jpg)"></div>
</div>
<!-- About Section -->
<section class="row" id="about">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>About</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Who We Are Section -->
<section class="row" id="whoWeAre">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Who We Are</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Gallery -->
<section class="row" id="gallery">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Gallery</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Contact-->
<section class="row" id="contact">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Contact</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Scripts to animated the nav -->
<script type="text/javascript" src="js/Animated Header/classie.js"></script>
<script type="text/javascript" src="js/Animated Header/cbpAnimatedHeader.js"></script>
<!-- Smooth Scrolling -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- Script for full screen bg image -->
<script src="js/fillscreen.js"></script>
</body>
</html>
Heres the CSS:
body{
position: relative;
background-color: #FFF2E2;
color: white;
font-family: 'Raleway', sans-serif;
/*Keeps page content under the header, must match navbar height*/
/*padding-top: 75px; */
}
/*NAV STYLING*/
.navbar-default{
height: 76px;
transition: all 0.5s;
-webkit-animation: all 0.5s;
}
.navbar-default .navbar-nav{
font-weight: bold;
}
.navbar-default .navbar-brand {
color: white;
font-size: 2.0em;
font-family: 'Poiret One', cursive;
font-weight: bolder;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar-default .navbar-nav>li>a:hover {
color: #777;
}
.navbar-default {
background-color: #E498AF;
}
/*Controls active nav items*/
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus {
color: #777;
}
/*Animate nav on scroll*/
.cbp-af-header-shrink{
height: 51px;
}
/*Full screen image styles*/
.fill{
background-size: cover;
background-position: center;
}
/*Title Row Styling*/
.title-row{
height: 100px;
color: #777;
background-color: #FFF2E2;
text-align: center;
}
/*Content row styling*/
.content-row{
height: 600px;
background-color: white;
}
that is because you have
<body data-spy="scroll" data-target=".navbar" data-offset="111">
data target of navbar class but you html markup has
<div id="navbar" class="collapse navbar-collapse">
id navbar; switch either one and should work.
bootstrap scrollspy will look for a target then default to a nav if it cant find the target or if a target is not specified. Its also better to put the scrollspy on a div that only contains the navigation
here is a fiddle example
My slider is not responsive. It does not get re-sized when I re-scale my browser. I want the slider to bo responsive even if I use in tablet or mobile.
The slider code is below the navigation.
<!DOCTYPE html"">
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>Vijay Hemant Finance & Estates Limited</title>
<link rel="shortcut icon" href="" />
<link rel='stylesheet' id='page-css' href='css/bootstrap-shortcodes.css' type='text/css' media='all' />
<link rel='stylesheet' id='page-css' href='css/settings.css' type='text/css' media='all' />
<style type="text/css">.tp-caption a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}</style>
</style>
<link rel='stylesheet' id='page-css' href='css/shortcodes.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css-css' href='css/bootstrap.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-responsive-css-css' href='css/bootstrap-responsive.css' type='text/css' media='all' />
<link rel='stylesheet' id='main_style-css' href='css/style.css' type='text/css' media='all' />
<!--
<link rel='stylesheet' id='Merriweather-css' href='http://fonts.googleapis.com/css?family=Merriweather%3A400%2C700%2C900%2C300&ver=3.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='fontawesome-css' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css?ver=3.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='google_fonts-css' href='http://fonts.googleapis.com/css?family&ver=3.5.1' type='text/css' media='all' /> -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jssor.core.js"></script>
<script type="text/javascript" src="js/jssor.utils.js"></script>
<script type="text/javascript" src="js/jssor.slider.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<style type="text/css" id="custom-background-css">
body.custom-background { background-image: url(''); background-repeat: repeat; background-position: top left; background-attachment: fixed; }
</style>
<link rel='stylesheet' id='page-css' href='css/page.css' type='text/css' media='all' />
<link rel='stylesheet' id='slider-css' href='css/slider.css' type='text/css' media='all' />
</head>
<body class="home blog custom-background">
<div id="container">
<div class="container-narrow">
<!-- Header -->
<header>
<div class="top">
<div class="container">
<div class="row-fluid">
<div class="span12">
<!-- Logo -->
<div class="logo" style="margin-top:20px;margin-bottom:20px;margin-left:0px;">
<img src="img/logo4.png" alt='Vijay Hemant Finance & Estates Limited' title="Vijay Hemant Finance & Estates Limited"/>
</div>
<!-- Site description -->
<h2 class="site_heading">Handling Money........ With Devotion And Care</h2>
<!-- Contact -->
<div class="header_contact rounded">
<div class="phone"><img src="img/phoneicon.png" alt="phone icon" /><span>044-30228855 </span></div>
<div class="email"><img src="img/mailicon.png" alt="mail icon" /><span>office#vijayhemant.in</span></div>
</div>
</div>
</div>
</div>
</div>
<div> <img src="img/separator.png" style="margin-top: -60px; width:755px;
margin-left: 390px; "></div>
<!-- Menu Navigation -->
<div class="menu_wrap" style="position:relative; top:-60px;">
<div class="container">
<div class="navbar navbar-inverse navbar-relative-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
</a>
<div class="nav-collapse collapse navbar-responsive-collapse" style="height:auto;">
<ul id="menu-menu" class="nav">
<li id="menu-item-284" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-284"><a title="Home" href="index.html">Home</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9 dropdown-submenu"><a title="Blog" href="commercial-vehicles.html" data-toggle="dropdown" data-target="#" class="dropdown-toggle">Business<span class="caret"></span></a>
<ul class="dropdown-menu ">
<li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a title="Commercial Vehicles" href="commercial-vehicles.html">Commercial Vehicles</a></li>
<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a title="Car / LMV" href="car-finance.html">Car Finance</a></li>
</ul>
</li>
<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594"><a title="About Us" href="about-us.html">About Us</a></li>
</li>
<li id="menu-item-275" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-275"><a title="CSR" href="csr.html">CSR</a></li>
</li>
<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594"><a title="Investment" href="investment.html">Investment</a></li>
<!-- <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85 dropdown-submenu"><a title="Shortcodes" href="" data-toggle="dropdown" data-target="#" class="dropdown-toggle">services<span class="caret"></span></a>
<ul class="dropdown-menu ">
<li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a title="Blog Fullwidth" href="">Fixed Deposits</a></li>
<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a title="Blog Sidebar Left" href="">Recurring Deposits</a></li>
<li id="menu-item-149" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-149"><a title="Standard" href="">Annual Reports</a></li>
</ul>
</li> -->
<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594"><a title="Contact Us" href="contact-us.html">Contact Us</a></li>
<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594"><a title="Downloads" href="download.html">Downloads</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<section style="margin-top:-75px;">
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider2_container" style="position: relative; width: 600px;
height: 350px;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
<div style="position: absolute; display: block; no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div class="sliderrs" u="slides" style="cursor: move; position: absolute; left: 150px; top: 0px; width: 1000px; height: 372px;
overflow: hidden;">
<div>
<a u=image href="#"><img src="img/slider1.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="img/slider2.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="img/slider3.jpg" /></a>
</div>
</div>
<!-- Bullet Navigator Skin Begin -->
<!-- jssor slider bullet navigator skin 01 -->
<!-- bullet navigator container -->
<div u="navigator" class="jssorb01" style="position: absolute; bottom: 30px; left: 620px;">
<!-- bullet navigator item prototype -->
<div u="prototype" style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px;"></div>
</div>
<!-- Bullet Navigator Skin End -->
<!-- Arrow Navigator Skin Begin -->
<!-- Arrow Left -->
<span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 123px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 123px; right: 8px">
</span>
<!-- Arrow Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">slideshow</a>
</div>
<!-- Jssor Slider End -->
</section>
<!-- SLIDER ends -->
<!-- CONTENT STARTS -->
<section style="margin-top: 10px;">
<div class="container">
<!--part-1-->
<div class="row-fluid part_home">
<!-- SERVICES LEFT -->
<section>
<div class="span4 ca-menu left">
<div class="row-fluid">
<style type="text/css">
.ca-menu .ca-item270:hover {background-color: #FFFFFF}
.ca-menu.left .ca-item:hover a.more_link span, .ca-menu.left .ca-item:hover h1, .ca-menu.left .ca-item:hover p{color: #515151 !important;}
.ca-menu .ca-item270 {background-color: #D25555}
.ca-item270 .ca-main {color: #FFFFFF;}
.ca-item270 .ca-sub {color: #FFFFFF}
.ca-item270 .more_link {color: #FFFFFF;}
</style>
<div class="ca-item ca-item270 rounded">
<div class="ca-content">
<a href="investment.html">
<h2 class="ca-main">Secure Future</h2>
<p> </p>
<p align="justify" class="ca-sub">Become an entrepreneur and grow with the booming and extremely lucrative logistic sector. We are serving this segment since 1985 and have turned many dreams into reality.</p>
</a>
</div>
</div>
</div>
</div>
<!-- SERVICES CENTER -->
<div class="span4 ca-menu center">
<div class="row-fluid">
<style type="text/css">
.ca-menu .ca-item277:hover {background-color: #FFFFFF}
.ca-menu.center .ca-item:hover a.more_link span, .ca-menu.center .ca-item:hover h1, .ca-menu.center .ca-item:hover p{color: #515151 !important;}
.ca-menu .ca-item277 {background-color: #515151}
.ca-item277 .ca-main {color: #FFFFFF;}
.ca-item277 .ca-sub {color: #FFFFFF}
.ca-item277 .more_link {color: #FFFFFF;}
</style>
<div class="ca-item ca-item277 rounded">
<div class="ca-content">
<a href="about-us.html">
<h2 class="ca-main">Strong Values</h2>
<p> </p>
<p align="justify" class="ca-sub">We value people, culture, tradition, and respect honesty, truth, integrity and experience.</p>
</a>
</div>
</div>
</div>
</div><!-- span4 -->
<!-- SERVICES RIGHT -->
<div class="span4 ca-menu right">
<div class="row-fluid">
<style type="text/css">
.ca-menu .ca-item279:hover {background-color: #FFFFFF}
.ca-menu.right .ca-item:hover a.more_link span, .ca-menu.right .ca-item:hover h1, .ca-menu.right .ca-item:hover p{color: #103042 !important;}
.ca-menu .ca-item279 {background-color: #236890}
.ca-item279 .ca-main {color: #FFFFFF;}
.ca-item279 .ca-sub {color: #FFFFFF}
.ca-item279 .more_link {color: #FFFFFF;}
</style>
<div class="ca-item ca-item279 rounded">
<a href="commercial-vehicles.html">
<div class="ca-content">
<a href="commercial-vehicles.html">
<h2 class="ca-main"> Dedicated Services </h2>
<p> </p>
<p align="justify" class="ca-sub"> We have a bunch of loyal associates who have grown with the company and will partner you in all your needs.</p>
</a>
</a>
</div>
</div>
</div>
</div><!-- span4 -->
<div style="clear:both;"> </div>
<!-- NEWS RIGHT -->
</div>
<!--part-1-->
<!--part-2-->
<!--part-2-->
<!--part-3-->
</div><!-- .container -->
<!--part-3-->
</section>
<div style="clear:both;"> </div><div style="clear:both;"> </div>
<section class="homecon">
<div class="container">
<div class="row-fluid">
<ul>
<p align="justify">
<li>
<div align="justify"> Vijay Hemant Finance & Estates limited incorporated in the year 1985, listed on the Madras stock exchange serves the small and medium transport sector segment in Tamilnadu.</div>
<li>
<div align="justify"> We provide loans from 1 year to 3 years upto 70% value of the vehicle and upto 10 year old vehicle.
</div>
<li>
<div align="justify"> We have branches in Ramnad, Madurai, Coimbatore, Trichy & our head office is in Chennai.
</div>
<li>
<div align="justify"> A useful life of a vehicle is 15 years and we fund this segment.
</div>
<li>
<div align="justify"> We pride ourselves in last mile connectivity with the transport sector throughout Tamilnadu with our loyal staff, committed service and rare dedication.
</div>
<li>
<div align="justify">Attractive terms for the deposits and service through our Chennai office with monthly, quarterly and annual interest options.
</p>
</div>
</ul>
</div>
</div>
<br><br><br><br>
</section>
<!-- Div for styling purpose only -->
<div class="blank_separator"></div>
<!--prefooter-->
<section>
<div class="row-fluid">
<img src="img/shadow-divider.png" class="shadow_divider">
</div>
<div class="container">
<div class="row-fluid twitter_wrap">
<div class="span9" style="">
<p> Vijay Hemant Finance & Estates Limited, A trusted financial service group in India.</a></p></div>
<style type="text/css">
.social:hover {opacity: 0.5; filter: alpha(opacity=30);}
</style>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="row-fluid">
<!-- Footer Widget 1 -->
<div class="span4">
<div class="textwidget"><p><img src="img/logo5.png"></p></br>
<p>A trusted financial service group in India. The activities of the group span savings products like Deposits, Car and Commercial Vehicle Finance...</p>
</div>
</li>
</div>
<style type="text/css">
.quicklinks{ }
</style>
<!-- Footer Widget 2 -->
<div class="span4">
<h3 class="widget_title">Useful Links</h3>
<ul id="quicklinks">
<li class="quicklinks">Branches</li>
<li class="quicklinks">Deposit Rates</li>
<li class="quicklinks">Deposit Form</li>
<li class="quicklinks"> Interest Rate Model</li>
<li class="quicklinks"> Invester Relations</li>
<li class="quicklinks">Fair Practice Code</li></ul></li>
</div>
<!-- Footer Widget 3 -->
<div class="span4">
<h3 class="widget_title">Head Office (Chennai)</h3>
<p>
No:110,5th floor,Prakash Presidium,<br />
Mahatma Gandhi Road,<br />
Nungabakkam,Chennai-600 034
Phone:044-3022885</p>
</div>
</div>
<!-- footer 4-->
<br>
<div id="foot">
<img src="img/separator.png" alt="separator" />
<div class="span8"><p>Copyright 2014©All Rights Reserved by Vijay Hemant Finance & Estates Limited.</p></div>
</div>
</div><!-- /container -->
</footer>
</div><!-- container-fluid ends -->
</body>
</html>
You can use the API instance.$ScaleWidth(width) to scale your slider.
The following is typical responsive code,
//responsive code begin
//you can remove responsive code if you don't want the slider scales
//while window resizes
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
Reference: http://www.jssor.com/development/tip-make-responsive-slider.html