Materialize - Full screen slider and navigation bar - slider

During a project's development I've decided to use a full screen image slider. As shown on the official site : Link
In this way the navigation bar is disappeared, but on a Youtube video I've seen that there is a way (which I don't know) in order to maintain both the full-screen slider and the navbar. Can anyone help me in this problem? Is there a way to take both of these features?
Thanks.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="./script.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="./src/jquery.js"></script>
<script src="./src/js.js"></script>
<title>Home Automation - Test</title>
<meta charset="utf-8" lang="it">
<link rel="stylesheet" href="./css/mycss.css">
</head>
<body class="bkground">
<nav class="teal darken-1">
<div class="nav-wrapper">
Domotic Home
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li class="active">General</li>
<li>Home Control - First floor</li>
<li>Home Control - Second floor</li>
<li>Private Area</li>
</ul>
</div>
</nav>
<br>
<br>
<div class="slider fullscreen">
<div class="main-content">
<ul class="slides">
<li>
<img src="./img/1.jpg">
</li>
<li>
<img src="./img/5.jpg">
</li>
<li>
<img src="./img/3.jpg">
</li>
<li>
<img src="./img/6.jpg">
</li>
<li>
<img src="./img/7.jpg">
</li>
<li>
<img src="./img/9.jpg">
</li>
<li>
<img src="./img/11.jpg">
</li>
<li>
<img src="./img/12.jpg">
</li>
<li>
<img src="./img/13.jpg">
</li>
<li>
<img src="./img/14.jpg">
</li>
<li>
<img src="./img/15.jpg">
</li>
<li>
<img src="./img/16.jpg">
</li>
</ul>
</div>
</div>
</body>
</html>
And here the css
.modal {
max-height: 90%;
max-width: 90%;
}
.bkground {
background-image: url("/img/Sfondo3.jpg")
}
.sliderimg {
border-color: black;
border: solid 2px;
}
.floorimg {
border-color: black;
border: solid 4px;
}
.main-content {
top: 100%;
position: absolute;
width: 100%;
}


I found the answer
CSS
.slider-adjustment{
position: fixed;
top: 56px; <!-- as nav bar has height of 56px -->
left: 0;
bottom: 0;
right: 0;
overflow: auto;
background-color:cyan ;
}
HTML
<div class="slider-adjustment">
<!-- All html for slider goes here -->
</div>


Yup. It can be done.I added a div.main-content after div.slider.fullscreen like below :
div.main-content {
top: 100%;
position: absolute;
width: 100%;
}
and it worked for me. Just add whatever you want in that div.main-content element


Have you tried increasing z-index
nav{
z-index:100;
}


You can wrap everything after the fullscreen slider in a div (say with id
content) and set CSS as follows :
#content {
position: relative;
top : 100vh;
}
credits: https://github.com/anshap1719

Related

How do i fix this navbar Issue in my website?

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

Bootstrap accordion (On click of an accordion should close other accordions)

My current accordion functionality is when we click on '+' sign it opens the accordion and leaves it open even though we click on the '+' sign of other accordion.
What i need is on click of one accordion other open accordions should close.
Below is my Codepen link.
<aside class="col-md-4">
<section class="sidebar-tools">
<h4 class="my-4">My</h4>
<nav>
<a class="tile-link" data-toggle="collapse" href="#myDoctor">
My
</a>
<div class="collapse sidebar-collapse" id="myDoctor">
Viewr
Change
</div>
<a class="tile-link" data-toggle="collapse" href="#IDcards"> Cards</a>
<div class="collapse sidebar-collapse" id="IDcards">
View
Change
</div>
<a class="tile-link" href="#">nformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
<h4 class="my-4">My Tools</h4>
<nav>
<a class="tile-link" href="#">Cards</a>
<a class="tile-link" href="#">Enformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
</section>
</aside>
Thanks
CodePen

You can achieve this by using data-parent to your link, here is the snippet with your code
var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function() {
$myGroup.find('.collapse.in').collapse('hide');
});
.sidebar-tools a {
color: white;
}
a.tile-link {
text-decoration: none;
}
.tile-link {
-js-display: flex;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2980b9;
padding: 10px;
margin: 2px 0;
}
.tile-link:hover {
background-color: #2980b9;
}
.tile-link[data-toggle]:after {
content: '\f067';
font-family: 'fontawesome';
transition: all .25s ease-in-out;
float: right;
}
.tile-link[aria-expanded="true"]:after {
transform: rotate(45deg);
}
.sidebar-collapse {
background-color: #95a5a6;
margin-top: -2px;
}
.sidebar-collapse .sidebar-collapse-link {
color: white;
display: block;
padding: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<aside class="col-md-4" id="myGroup">
<section class="sidebar-tools">
<h4 class="my-4">My</h4>
<nav>
<a class="tile-link" data-toggle="collapse" href="#myDoctor" data-parent="#myGroup">
My
</a>
<div class="collapse sidebar-collapse" id="myDoctor">
Viewr
Change
</div>
<a class="tile-link" data-toggle="collapse" data-parent="#myGroup" href="#IDcards"> Cards</a>
<div class="collapse sidebar-collapse" id="IDcards">
View
Change
</div>
<a class="tile-link" href="#">nformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>
<h4 class="my-4">My Tools</h4>
<nav>
<a class="tile-link" href="#">Cards</a>
<a class="tile-link" href="#">Enformation</a>
<a class="tile-link" href="#"> Estimator</a>
</nav>

Background images will not show on bootstrap carousel

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;
}

Bootstrap Fixed navbar is pushing up on only one of my pages

I have something in the following css that is causing my fixed navbar to push up when scrolling down untill its almost not visible. This navbar works on all my other pages so I know its something to do with the following css to this page. Attached is the nav bar css and the css that seems to be causing it to not work properly for (1) page... it seems to work fine in browser and Dreamweaver live view but not on any cell phone... The footer seems jacked now too.. its something in between the header and footer ; Also attached is the pages HTML.
live version as you can see the pages I have finished scroll properly except services > roofing page
<!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">
<title>Roofing Contractor Springfield IL Surrounding Areas</title>
<meta name="description" content="Licensed Roofing Contractor serving Springfield IL and surrounding areas. Hire a professional and let us exceed your residential roofing needs today!">
<meta name="keywords" content="Roofing Contractor New Roof Repair Licensed Bonded Insured Free Estimates">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
<div class="container" id="custom-nav">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
<li class="dropdown">
Services<b class="caret"></b>
<ul class="dropdown-menu">
<li>Roofing</li>
<li>Siding</li>
</ul>
</li>
<li>
Contact
</li>
<li class="dropdown">
More<b class="caret"></b>
<ul class="dropdown-menu">
<li>Gallery</li>
<li>Reviews</li>
<li>Careers</li>
</ul>
</li>
</ul>
<div class="social">
<ul>
<li><i class="fa fa-lg fa-facebook"></i></li>
<li><i class="fa fa-lg fa-twitter"></i></li>
<li><i class="fa fa-lg fa-google-plus"></i></li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container-fluid margin-top">
<div class="row padding-left padding-right">
<h3><span class="glyphicon glyphicon-bullhorn glyphicon-color"></span> Roofing Contractor <br><small>"Get The Free Estimate You Deserve!"</small></h3><hr>
<h4>Need a New Roof or Roof Repairs?<br><small>We are completely Licensed Bonded and Insured for all of your roofing needs!</small></h4>
</div>
<hr>
<div class="row ">
<div class="col-md-4 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-lg-7 col-md-6">
<img class="lib-img-show" alt="New Roof - Shingle Roofing" src="images/shingle-roofing.jpg">
</div>
<div class="col-md-5">
<div class="lib-row lib-header">
Shingle Roofing
<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
Shingle Roofing Info Here!
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-lg-7 col-md-6">
<img class="lib-img-show" alt="New Roof - Rubber Roofing" src="images/flat-roofing.jpg">
</div>
<div class="col-md-5">
<div class="lib-row lib-header">
Rubber Roofing
<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
Rubber Roofing Info Here
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-lg-7 col-md-6">
<img class="lib-img-show" alt="New Roof - Metal Roofing" src="images/metal-roofing.jpg">
</div>
<div class="col-md-5">
<div class="lib-row lib-header">
Metal Roofing
<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
Metal Roofing Info Here!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12 call-now">
<h4>“We pride ourselves on being able to provide Safe, Clean, Quality work with competitive rates!”</h4>
Call Now (217) 820-7597
</div>
<footer>
<div class="container-fluid">
<small>Copyright © ZNC Roofing Contractor 2017</small>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-91438053-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Google Maps -->
</body>
</html>
Custom Navbar
.navbar-collapse {border-color: #FFFFFF !important; margin-top: 5px;}
.dropdown-menu > li > a {color : #FFFFFF !important;}
.dropdown-menu > li > a:hover{color : #EF7800 !important;}
.navbar-toggle {background: #192F42; padding-top: 12px;}
.navbar-inverse .navbar-toggle {border-color: #192F42;}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {background: none;}
#custom-nav { margin-left: 0px; width: 100%;}
.navbar-inverse {background-color: #192F42;}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #192F42}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #192F42}
.dropdown-menu { background-color: #192F42}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #192F42}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none;}
.navbar-inverse { border-color: #192F42}
.navbar-inverse .navbar-brand {height: 50px;width: 142px;background: url(../images/brand.jpg) no-repeat;background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;
-o-background-size: cover;}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #EF7800}
.dropdown-menu>li>a { color: #FFFFFF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #EF7800}
/* Roofing Page */
.lib-panel {
margin-bottom: 20Px;
}
.lib-panel img {
width: 100%;
background-color: transparent;
}
.lib-panel .row,
.lib-panel .col-md-6 {
padding: 0;
background-color: #FFFFFF;
}
.lib-panel .lib-row {
padding: 0 20px 0 20px;
}
.lib-panel .lib-row.lib-header {
background-color: #FFFFFF;
font-size: 20px;
padding: 10px 20px 0 20px;
}
.lib-panel .lib-row.lib-header .lib-header-seperator {
height: 2px;
width: 26px;
background-color: #FFFFFF;
margin: 7px 0 7px 0;
}
.lib-panel .lib-row.lib-desc {
position: relative;
height: 100%;
display: block;
font-size: 13px;
}
.lib-panel .lib-row.lib-desc a{
position: absolute;
width: 100%;
bottom: 10px;
left: 20px;
}
.row-margin-bottom {
margin-bottom: 20px;
}
.box-shadow {
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.10);
box-shadow: 0 0 10px 0 rgba(0,0,0,.10);
}
.no-padding {
padding: 0;
}

Bootstrap - Carousel | Links not working

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