I am experiencing an issue with Materialize CSS columns. Essentially I would expect the following to render as follows.
1 2 3 4 5 6
7 8
However, the result looks like this.
1 2 3 4 5 6
7 8
<div class="row">
<div class="col s4 m3 l2">
<img src="my-image.png" class="responsive-img circle hoverable">
</div>
<div class="col s4 m3 l2">
<img src="my-image.png" class="responsive-img circle hoverable">
</div>
<div class="col s4 m3 l2">
<img src="my-image.png" class="responsive-img circle hoverable">
</div>
<div class="col s4 m3 l2">
<img src="my-image.png" class="responsive-img circle hoverable">
</div>
<div class="col s4 m3 l2">
<img src="my-image.png" class="responsive-img circle hoverable">
</div>
<div class="col s4 m3 l2">
<img src="my-image.png" class="responsive-img circle hoverable">
</div>
<div class="col s4 m3 l2">
<img src="my-image.png" class="responsive-img circle hoverable">
</div>
<div class="col s4 m3 l2">
<img src="my-image.png" class="responsive-img circle hoverable">
</div>
</div>
I have since discovered that if I isolate the html (as above) into a new file, the issue is not occurring.
It is going to be a bit tricky to give an example of the full picture, as the HTML is being rendered with Django, however would anyone be able to point me in the right direction as to what could possibly be causing this.
Edit: If it means anything, it is in a modal.
That code looks fine, this is your initial code with icons: https://codepen.io/flyingDonut/pen/qBZrMgm
Update as requested by the OP: Adding a custom couple of flex classes (container and item) and giving them a wrap solves the img issue: https://codepen.io/flyingDonut/pen/RwaVwjP
Code:
<!DOCTYPE html>
<head>
<title>Edit Profile</title>
<!-- Materialize -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.cc {
display: flex;
flex-direction: row;
justify-content: flex-start !important;
flex-wrap: wrap !important;
}
.cr {
padding: 4px;
}
#media screen and (max-width: 1980px) {
.cr {
flex-basis: 10%;
}
}
#media screen and (max-width: 1600px) {
.cr {
flex-basis: 14.2%;
}
}
#media screen and (max-width: 1300px) {
.cr {
flex-basis: 20%;
}
}
#media screen and (max-width: 800px) {
.cr {
flex-basis: 33.3%;
}
}
#media screen and (max-width: 500px) {
.cr {
flex-basis: 50%;
}
}
</style>
</head>
<body>
<div class="container">
Change Image
<div id="test" class="modal">
<div class="modal-content">
<h4 class="center">Change Profile Avatar</h4>
<div class="cc">
<div class="cr">
<img
id="profilePic1"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic2"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic3"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic4"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic5"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic6"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic7"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic8"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic9"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic10"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic11"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic12"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic13"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
<div class="cr">
<img
id="profilePic14"
src="https://i.imgur.com/MM0HXX0.png"
class="small circle hoverable responsive-img"
style="cursor: pointer"
/>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$(".modal").modal();
});
</script>
</body>
Related
The carousel fades into the next slide when I click the next/previous buttons, even though I have added the 'slide' class.
<div id="testimonials-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active" style="background-color: red;">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" style="background-color: yellow;">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" style="background-color: blue;">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I want the slides to slide smoothly and not fade. Can you guys tell me if I'm doing something wrong or guide me through how I should be doing it
your code work and no problem and slide smoothly, try this strucktur in your html
<head>
<link href="your.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
</head>
<body>
//your html
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
</body>
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>
Created a swipe with thumbs. When I click on thumbs, it scrolls to the right with incomprehensible logic. I cannot understand what this may be connected with, I am trying to solve this problem for the second day, nothing comes out. Is it possible to somehow disable this option so that you can remove this scroll when clicked?
const productThumbs = new Swiper(".swiper-thumbs", {
spaceBetween: 30,
loop: true,
slidesPerView: 6,
loopedSlides: 7,
});
const productCarousel = new Swiper(".swiper-content", {
effect: 'fade',
fadeEffect: {
crossFade: true
},
touchRatio: 0,
thumbs: {
swiper: productThumbs,
}
});
.swiper-slide{
background: gray;
}
.swiper-thumbs .swiper-slide{
height: 300px;
}
.swiper-content{
margin-top: 30px;
}
.swiper-thumbs .swiper-slide{
display: flex;
flex-direction: column;
}
.swiper-content .swiper-slide{
height: 250px;
background: black;
color: white;
font-size: 72px;
}
<link href="https://unpkg.com/swiper/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="swiper-container swiper-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<span class="slider-title">01</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">02</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">03</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">04</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">05</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
<div class="swiper-slide">
<span class="slider-title">06</span>
<img src='https://i.ibb.co/Tq5Hvp8/1.png'>
<span class="slider-desc">Windows Server</span>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper-container swiper-content">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
</div>
</div>
I tried to do this, but I just simply do not understand why this is happening
In the "thumbs" slider, you need to change the value "loop" to "false" or remove the key "loop" from "thumbs" slider.
I am a beginner in web designing. I am trying to create a full screen carousel/slide show for a specific section of a web page.
More specifically, I have a carousel like this:
https://codepen.io/john9929/pen/aEjBqZ
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.lacity.org/sites/g/files/wph781/f/styles/tiled_homepage_blog/public/bigstock-Los-Angeles-5909078.jpg?itok=Pu2dewLz" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Chicago_skyline%2C_viewed_from_John_Hancock_Center.jpg/500px-Chicago_skyline%2C_viewed_from_John_Hancock_Center.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="item">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg" alt="New York" style="width:100%;">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
I would like to transform it into this:
https://mobirise.com/bootstrap-carousel/
How can I do it?
Set width to 100% and you can even set fixed height for consistency.
.carousel-inner img {
width: 100%; /* Set width to 100% */
}
#media (min-width: 576px) {
.carousel-inner img {
width: 100%; /* Set width to 100% */
max-height:340px;
}
}
#media (min-width: 768px) {
.carousel-inner img {
width: 100%; /* Set width to 100% */
max-height:720px;
}
}
#media (min-width: 992px) {
.carousel-inner img {
width: 100%; /* Set width to 100% */
}
.carousel-inner{
max-height:580px;
}
}
#media (min-width: 1200px) {
.carousel-inner img {
width: 100%; /* Set width to 100% */
max-height:700px;
}
.carousel-inner{
max-height:700px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://www.lacity.org/sites/g/files/wph781/f/styles/tiled_homepage_blog/public/bigstock-Los-Angeles-5909078.jpg?itok=Pu2dewLz" alt="LA" width="1200" height="700">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="item">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg" alt="New York" width="1200" height="700">
<div class="carousel-caption">
<h3>New York</h3>
<p>Thank you, New York - A night we won't forget.</p>
</div>
</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Chicago_skyline%2C_viewed_from_John_Hancock_Center.jpg/500px-Chicago_skyline%2C_viewed_from_John_Hancock_Center.jpg" alt="Los Angeles" width="1200" height="700">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!!</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>
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