Hi I have very little coding experience and im very new to this so sorry if this is a silly question. I've been messing around with it but i cant figure out how to stop this code from displaying across all pages:
<!DOCTYPE html>
<html lang="en">
<head>
<body id="imageslide"
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
</style>
</head>
<body>
<div class="container" >
<br>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://d2a2wjuuf1c30f.cloudfront.net/product_photos/41163636/gg_201_original.jpg" alt="Chania" width="980" height="345">
</div>
<div class="item">
<img src="https://d1nr5wevwcuzuv.cloudfront.net/product_photos/40913430/gg1_original.jpg" alt="Chania" width="980" height="345">
</div>
</div>
</div>
</body>
</html>
<br>
<br>
<html>
<body>
<body>
<div class="imageslide">
<div style="background-color:#FFC3C3; color:white; padding:1px; text-align:center;">
<h2>Shop By Category</h2>
</div>
</body>
</html>
<br>
I only want it to display on my websites home page but its appearing on every page. The code is in the layout file as i need it to appear above the page content and sidebar. Im editing the stores html through storenvy if that helps.Is there something i can add to the CSS or html that will stop it coming up on pages other than the homepage. Thanks in advance!
Don't use two <html> tags. A page starts with a <html> and ends with a </html>.
If you want multiple sections on a page just use <div> & </div> for start and end of div.
<!DOCTYPE html>
<html lang="en">
<head>
<body id="imageslide" <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://d2a2wjuuf1c30f.cloudfront.net/product_photos/41163636/gg_201_original.jpg" alt="Chania" width="980" height="345">
</div>
<div class="item">
<img src="https://d1nr5wevwcuzuv.cloudfront.net/product_photos/40913430/gg1_original.jpg" alt="Chania" width="980" height="345">
</div>
</div>
</div>
<div class="imageslide">
<div style="background-color:#FFC3C3; color:white; padding:1px; text-align:center;">
<h2>Shop By Category</h2>
</div>
</div>
</body>
</html>
Related
Carousel stop on mouse hover i did try to set data-pause = "null" but
then the hole carousel stop working. If i try to make data pause null !important the also the hole carousel stop working. i added all the necessary bootstrap and script but to no avail it still stop cascading as soon as the mouse hover over the carousel.
.carousel-item:before {
-webkit-box-shadow: inset 0 0 20rem rgba(0, 0, 0, 1);
box-shadow: inset 0 0 20rem rgba(0, 0, 0, 1);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
}
.w-100 {
width: 100% !important;
height: 75vh;
}
<!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">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-sm">
<div id="carouselSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="https://www.w3schools.com/bootstrap/la.jpg" alt="1st slide">
</div>
<div class="carousel-item ">
<img class="w-100" src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="2nd slide">
</div>
<div class="carousel-item ">
<img class="w-100" src="https://www.w3schools.com/bootstrap/ny.jpg" alt="3rd slide">
</div>
</div>
</div>
</div>
</body>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</html>
use the term data-pause=false just as:
</head>
<body>
<div class="container-sm">
<div id="carouselSlidesOnly" class="carousel slide" data-ride="carousel" data-pause="flase">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="https://www.w3schools.com/bootstrap/la.jpg" alt="1st slide">
</div>
<div class="carousel-item ">
<img class="w-100" src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="2nd slide">
</div>
<div class="carousel-item ">
<img class="w-100" src="https://www.w3schools.com/bootstrap/ny.jpg" alt="3rd slide">
</div>
</div>
</div>
</div>
</body>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</html>
body{
background-color: #CAF7E3;
}
.container-fluid{
padding: 3% 15%;
}
.navbar{
font-family: 'Montserrat';
font-weight: bold;
}
.navbar-brand{
font-size: 2.5rem;
}
.nav-item{
margin-right: 2rem;
}
#title{
padding: 8% 15%;
background-color: #F8EDED;
}
.slogun{
padding-left: 25px;
font-family: 'Ubuntu';
font-weight: bold;
font-size: 3rem;
}
.img-fruit{
padding-left: 9%;
}
.fruit{
width: 90%;
}
.carousel-inner{
padding: 8% 15%;
}
.unsplash{
object-fit: none;
width: 100%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Grocery Store</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,600;0,700;1,900&family=Ubuntu:ital,wght#0,400;0,500;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrap">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-lg-6 slogun">
Not only an apple but fruits every day keeps the doctor away
</div>
<div class="col-lg-6 img-fruit">
<img class="fruit" src="photos/fruit.png" alt="">
</div>
</div>
</div>
<div class="carousel-item">
<img class="unsplash" src="photos/check.jpg" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Here is slide 2 I took the landscape photo from unsplash.com and used it here but since then when I move from slide 1 to slide 2 the carousel section height increases due to image and also the image doesn't in the width of the carousel-item (the image name in the html is check.png) how can i solve this problem.
You can give fixed height and width to the images as required by the carousel:
<img class="fruit" src="photos/fruit.png" alt="" height="50" width="200" >
(Height and Width are in Pixels.)
I have the following structure:
<div class="carousel" id="my-carousel">
<div class="carousel-item">
<div class="text-center">
...
</div>
</div>
<div class="carousel-item">
<div class="text-center">
...
</div>
</div>
<div class="carousel-item">
<div class="text-center">
...
</div>
</div>
</div>
I also have the following script for normalizing the carousel:
function normalizeCarousel() {
function normalize() {
var maxHeight = 0;
$(".carousel-item").each(function() {
var currentHeight = $(this).height();
if (currentHeight > maxHeight) {
maxHeight = currentHeight;
}
});
$("#my-carousel").css("height", maxHeight);
};
normalize();
$(window).on("resize orientationchange", function() {
normalize();
});
}
$(document).ready(function() {
normalizeCarousel();
});
Here is the JSFiddle: JSFiddle
What I'm trying to do is vertically align each text-center div inside the carousel-items. I've tried using flexbox but couldn't manage to make it work!
Thank you in advance!
This is ought to do the trick
.carousel-item {
display: table;
}
.text-center {
display: table-cell;
vertical-align:middle;
}
with flexbox, use something like this
<!DOCTYPE html>
<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/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
div.text-center {
position: absolute;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
width: 100%;
color: red;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="text-center">Text Vertically Center Aligned</div>
<img src="la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<div class="text-center">Text Vertically Center Aligned</div>
<img src="chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<div class="text-center">Text Vertically Center Aligned</div>
<img src="ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
im working with HTML and right now i just added a carousel item to my html project, my question is how can you display the carousel in the middle of the page since it appears at the left side.
www.littlebossworld.com
In this situation you have to use !important attribute because your carousel plugin is adding inline styles (maybe there is a setup where you can change this?).
"hard" css:
.fusion-carousel .fusion-carousel-wrapper {
margin: 0 auto !important;
}
this shows the example
This Code Help for you
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<style>
.corosolstylelog {
margin: 0 auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
margin: 0 auto;
}
</style>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var hight = $(window).height();
var hightforcourosol = ($(window).height() / 4) * 3;
var width = ($(window).width() / 2);
$('.carousel-inner img').css("height", hightforcourosol);
$('.carousel-inner a img').css("height", hightforcourosol);
$('.carousel-inner img').css("width", width);
$('.carousel-inner a img').css("width", width);
})
</script>
</head>
<body>
<div class="col-lg-2">
Left Side
</div>
<div class="col-lg-8 corosolstylelog">
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Image/Carousel/a.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="Image/Carousel/b.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="Image/Carousel/c.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2">
Right Side
</div>
</body>
</html>
I have a carousel on angular web app which is supposed to move images on intervals but it is not working as expected, I can not figure out the reason behind --
here's my code
<div id="section1" class="carousel slide" data-ride="carousel" data-interval="1000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#section1" data-slide-to="0" class="active" ></li>
<li data-target="#section1" data-slide-to="1" ></li>
<li data-target="#section1" data-slide-to="2" ></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img1.jpg" alt="...">
<div class="carousel-caption">
<!-- <h3>Caption Text</h3> -->
</div>
</div>
<div class="item ">
<img src="img2.jpg" alt="...">
<div class="carousel-caption">
<!-- <h3>Caption Text</h3> -->
</div>
</div>
<div class="item ">
<img src="img3.jpg" alt="...">
<div class="carousel-caption">
<!--h3>Caption Text</h3-->
</div>
</div>
</div>
</div>
Everything seems fine, what bootstrap plugin did you used, because the class you have applies requires bootstrap plugin. Please let me know which bootstrap plugin did you use...
try this CDN for bootstrap plugin. It works perfectly with mine
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--Bootstrap jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!--Bootstrap javascript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>