I'm really new to bootstrap and web development overall and I don't know what to do. I have made a carousel for the website we had to make for our computer science class, but then I added the title and now, when I shrink the site to mobile size, the title just disappears. Here is my carousel HTML:
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-prev"></div>
<div class="carousel-next"></div>
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="christmas.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="christmas2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="christmas3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div class="carousel-caption d-none d-md-block">
<h5 class="myText">Our shop</h5>
<p>Browse our catalog and discover great discounts</p>
</div>
</div>
This is my CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.carousel-image {
height: 100vh;
}
.full-screen {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.z-index-1 {
z-index: 1;
}
.z-index-2 {
z-index: 2;
position: absolute;
width: 100%
}
.myText {
font-size: 70px;
-webkit-text-stroke: 4px red;
}
.controls {
margin-top: 0%;
}
.myHR {
border-width: 4px;
border-color: white;
margin-left: 30%;
margin-right: 30%;
}
.carousel-paragraph {
font-size: 25px;
}
.carousel-caption {
top: 40%;
position: absolute;
}
And this is my javascript:
var $item = $('.carousel-item');
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight);
$item.addClass('full-screen');
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function (){
$wHeight = $(window).height();
$item.height($wHeight);
});
$('.carousel').carousel({
interval: 6000,
pause: "false"
});
Never mind, I just removed the d-none class from my title division. It seems to work for me.
<div class="carousel-caption d-md-block">
<h5 class="myText">Our shop</h5>
<p>Browse our catalog and discover great discounts</p>
</div>
Related
I have build a boostrap Carousel and modified the indicators to be the map markers with icons in the middle. They rollover fine, but what i was hoping to add is when the corresponding slide below is active they show the hover state.
http://women.hemophilia.on.ca/
What is tied so far is adding the class, as it scrolls, Carousel automatically changes the active class to each item
.marker-recently:hover, .marker-recently .active{
background-image:url(/wp-content/uploads/2021/11/marker-recently-over.png);
}
HTML
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-indicators">
<span data-target="#myCarousel" data-slide-to="0" class="marker-size marker-recently active"></span>
<span data-target="#myCarousel" data-slide-to="1" class="marker-size marker-pregnant"></span>
<span data-target="#myCarousel" data-slide-to="2" class="marker-size marker-period"></span>
<span data-target="#myCarousel" data-slide-to="3" class="marker-size marker-menopause"></span>
<span data-target="#myCarousel" data-slide-to="4" class="marker-size marker-concerns"></span>
<span data-target="#myCarousel" data-slide-to="5" class="marker-size marker-continuing-eduation"></span>
</div>
<br clear="all" />
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<div class="carousel-caption">
<img class="first-slide" src="http://women.hemophilia.on.ca/wp-content/uploads/2021/11/icon-recently-dianosed.png" alt="Recently Diagnosed" width="81" height="95">
<p>I am recently diagnosed with a bleeding disorder and I am looking to learn.</p>
</div>
</div>
</div>
<div class="carousel-item ">
<div class="container">
<div class="carousel-caption text-left">
<img class="first-slide" src="http://women.hemophilia.on.ca/wp-content/uploads/2021/11/icon-pregnant.png" alt="Pregnant" width="71" height="95">
<p>I am pregnant or trying to get pregnant and I have a bleeding disorder.</p>
</div>
</div>
</div>
<div class="carousel-item ">
<div class="container">
<div class="carousel-caption text-left">
<img class="first-slide" src="http://women.hemophilia.on.ca/wp-content/uploads/2021/11/icon-period.png" alt="Started my period" width="77" height="95">
<p>I am about to get my period or I have just started my period recently.</p>
</div>
</div>
</div>
<div class="carousel-item ">
<div class="container">
<div class="carousel-caption text-left">
<img class="first-slide" src="http://women.hemophilia.on.ca/wp-content/uploads/2021/11/icon-menopause.png" alt="Menopause" width="67" height="95">
<p>I have started menopause and want to know bleeding disorder related issues.</p>
</div>
</div>
</div>
<div class="carousel-item ">
<div class="container">
<div class="carousel-caption text-left">
<img class="first-slide" src="http://women.hemophilia.on.ca/wp-content/uploads/2021/11/icon-new-concern.png" alt="Bleeding Concerns" width="116" height="95">
<p>I have a bleeding concerns, could I have a bleeding disorder?</p>
</div>
</div>
</div>
<div class="carousel-item ">
<div class="container">
<div class="carousel-caption text-left">
<img class="first-slide" src="http://women.hemophilia.on.ca/wp-content/uploads/2021/11/icon-continuing-ed.png" alt="Continuing Education" width="73" height="95">
<p>I have had a bleeding disorder for awhile now and I am looking for new info.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">▶</span>
<span class="sr-only">Next</span>
</a>
</div>
css
/* Carousel base class */
.carousel {
position: inherit;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
color: #000;
display: grid;
grid-template-columns: 1fr 3fr;
}
.carousel-caption p {
text-align: left;
font-size: 30px;
font-style: italic;
line-height: 40px;
}
/* Declare heights because of positioning of img element */
.carousel-item {
height: 220px;
background-color: #f8f4ed;
vertical-align: top;
}
.carousel-item > img {
position: absolute;
top: 0;
left: 0;
width: 81px;
height: 95px;
}
.carousel-inner{
margin-top: 90px;
margin-left: -15px;
width: 1120px;
border-bottom: 20px #cf3537 solid;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
font-size: 30px;
background-image: none;
color: #cf3537;
margin-top: -100px;
}
.carousel-indicators {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
max-width: 1120px;
margin: 10px 0px 0px 0px;
height: 250px;
top: 0;
background-color: transparent;
background-image: url(images/graphic-road.png);
background-repeat: no-repeat;
background-position: bottom;
}
.carousel-indicators .active {
background-color: transparent;
}
.marker-size {
background-repeat:no-repeat;
background-position: center top;
background-size: 100px 134px;
}
.marker-recently{
background-image:url(/wp-content/uploads/2021/11/marker-recently.png);
}
.marker-recently:hover, .marker-recently .active{
background-image:url(/wp-content/uploads/2021/11/marker-recently-over.png);
}
.marker-pregnant{
background-image:url(/wp-content/uploads/2021/11/marker-pregnant.png);
}
.marker-pregnant:hover, .marker-pregnant .active{
background-image:url(/wp-content/uploads/2021/11/marker-pregnant-over.png);
}
.marker-period{
background-image:url(/wp-content/uploads/2021/11/marker-period.png);
}
.marker-period:hover, .marker-period .active{
background-image:url(/wp-content/uploads/2021/11/marker-period-over.png);
}
.marker-menopause{
background-image:url(/wp-content/uploads/2021/11/marker-menopause.png);
}
.marker-menopause:hover, .marker-menopause .active{
background-image:url(/wp-content/uploads/2021/11/marker-menopause-over.png);
}
.marker-concerns{
background-image:url(/wp-content/uploads/2021/11/marker-concerns.png);
}
.marker-concerns:hover, .marker-concerns .active{
background-image:url(/wp-content/uploads/2021/11/marker-concerns-over.png);
}
.marker-continuing-eduation{
background-image:url(/wp-content/uploads/2021/11/marker-continuing-eduation.png);
}
.marker-continuing-eduation:hover, .marker-continuing-eduation .active{
background-image:url(/wp-content/uploads/2021/11/marker-continuing-eduation-over.png);
}
You already did it right in your CSS sheet, but you just wrote it wrong.
You wrote:
.marker-concerns:hover, .marker-concerns .active
so you are sniping an element with class active as a child of element with class marker-concerns (which it does not exist). Remove the space so when you call:
.marker-concerns.active
You are actually calling an element with BOTH classes (which is what you need).
Remove the blank space from all six css lines ans it should work.
I made a carousel in Bootstrap 4.1.0 and used Font Awesome for the controls and css to keep the control just outside the images. When you hover on the left or right control, they controls disappears. Here is a codepen I made too
https://codepen.io/mlegg10/pen/qYEegR
Can you tell me what to fix so the carousel controls don't disappear when hovered or moused on? Thanks
<script> $('.carousel').carousel()</script>
.carousel {
background:#F5F5F5;
}
.carousel-item .img-fluid {
width:80%;
height: 80%;
}
.carousel-item a {
display: block;
width:90%;
height: 90%;
}
.carousel-control-prev {
color:#036;
margin-left: -1rem;
z-index: 10;
}
.carousel-control-next {
color:#036;
margin-right: -1rem;
z-index: 10;
}
.carousel-controls a:hover {
color: 004289;
z-index: 10;
}
<div id="carouselExampleControls" class="carousel slide align-items-center" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block mx-auto img-fluid" src="http://nationalkitchencabinets.com/slides/A1.jpg" alt="A1">
</div>
<div class="carousel-item">
<img class="d-block mx-auto img-fluid" src="http://nationalkitchencabinets.com/slides/A2.jpg" alt="A2">
</div>
<div class="carousel-item">
<img class="d-block mx-auto img-fluid" src="http://nationalkitchencabinets.com/slides/A3.jpg" alt="A3">
</div>
<div class="carousel-item">
<img class="d-block mx-auto img-fluid" src="http://nationalkitchencabinets.com/slides/A4.jpg" alt="A4">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<i class="fas fa-chevron-circle-left fa-lg"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-faded" href="#carouselExampleControls" role="button" data-slide="next">
<i class="fas fa-chevron-circle-right fa-lg"></i>
<span class="sr-only">Next</span>
</a>
</div>
You need to add the :hover action and set a different color, right now it's showing but your background is white, that's why you don't see it.
.carousel-control-prev:hover {
color:red;
}
.carousel-control-next:hover {
color:red;
}
var audio, playbtn, mutebtn, seek_bar;
function initAudioPlayer() {
audio = new Audio();
audio.src = "nineDays.mp3";
audio.loop = true;
audio.play();
// Set object references
playbtn = document.getElementById("playpausebtn");
mutebtn = document.getElementById("mutebtn");
// Add Event Handling
playbtn.addEventListener("click", playPause);
mutebtn.addEventListener("click", mute);
// Functions
function playPause() {
if (audio.paused) {
audio.play();
playbtn.style.background = "url(video_pause.png) no-repeat";
} else {
audio.pause();
playbtn.style.background = "url(play.png) no-repeat";
}
}
function mute() {
if (audio.muted) {
audio.muted = false;
mutebtn.style.background = "url(speaker.png) no-repeat";
} else {
audio.muted = true;
mutebtn.style.background = "url(mute.png) no-repeat";
}
}
}
window.addEventListener("load", initAudioPlayer);
body {
background: #282828;
color: white;
font-family: sans-serif;
}
.nav {
display: flex;
justify-content: flex-end;
position: absolute;
width: 100%;
top: 0;
left: 0;
list-style-type: none;
}
li a {
color: white;
text-decoration: none;
padding: 0 10px;
}
h1 {
font-size: 13px;
margin-bottom: 80%;
margin-right: 50%;
font-family: 'Montserrat';
}
.container {
padding-top: 8%;
}
button {
border: none;
cursor: pointer;
outline: none;
}
button#playpausebtn {
background: url(video_pause.png) center center no-repeat;
background-size: cover;
margin-left: 20px;
marging-top: 35px;
width: 20px;
height: 15px;
}
button#mutebtn {
background: url(speaker.png) center center no-repeat;
background-size: cover;
margin-top: 35px;
width: 25px;
height: 20px;
}
.soundNav {
position: absolute;
width: 20%;
height: 30px;
z-index: 99999;
}
<body>
<div class="soundNav">
<button id="playpausebtn"></button>
<button id="mutebtn"></button>
</div>
<ul class="nav nav-tabs">
<li role="presentation">Home
</li>
<li role="presentation">About me
</li>
<li role="presentation" class="active">Work
</li>
<li role="presentation">Get In Touch
</li>
</ul>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="my-slider" class="carousel slide" data-ride="carousel">
<!--Indicators dot nav-->
<ol class="carousel-indicators">
<li data-target="#my-slider" data-slide-to="0" class="active"></li>
<li data-target="#my-slider" data-slide-to="1"></li>
<li data-target="#my-slider" data-slide-to="2"></li>
<li data-target="#my-slider" data-slide-to="3"></li>
</ol>
<!--wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="1.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> © Ed Sheeran Concert at Blossom Center</br>
August 2015
</h1>
</div>
</div>
<div class="item">
<img src="5.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </br>
</h1>
</div>
</div>
<div class="item">
<img src="6.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </br>
</h1>
</div>
</div>
<div class="item ">
<img src="2.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
<div class="carousel-caption">
<h1> </h1>
</div>
</div>
<!--controls or next and prev buttons-->
<a class="left carousel-control" href="#my-slider" 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="#my-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am trying to understand what the problem is- whenever someone opens the page, the music starts. I want the user to be able to pause or mute the music whenever they want to. And that works fine, except my icons won't show, it's as they are hidden. Everything is in the same folder. I was thinking to use glyphicons, but I don't know how to use them inside of the javascript.
the javascript style syntax is littlebit different. use
mutebtn.style.backgroundImage = "url('mute.png') no-repeat";
and make sure ./mute.png exists and is readable
Image of my carousel:
Hey guys, I'm trying to get my previous/next photos in my carousel to be edge (so you can see three photos, but only half of the first and third photo) to edge with a 10px gap in between. Can't find a way to do this. I've gotten as far as setting the height of the carousel and centering the image. Now if I could just get the other images to slide up next to the displayed image!
Thank you guys!
<script>
$(document).ready(function() {
$('#carousel-example-generic').carousel({
interval: 10000
})
$('.carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
</script>
.carousel-inner {
height: 515px;
}
.item {
height: 515px;
}
.carousel-inner .item img {
position: relative;
top: 50%;
transform: translateY(-50%);
height: 515px;
margin: 0 auto;
}
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 150%;
left: -25%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left,
.carousel-control.right {
background: rgba(255, 255, 255, 0.3);
width: 20%;
}
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="assets/img/carousel-1.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="assets/img/carousel-2.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="assets/img/carousel-3.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I'm using this CSS Code to make an image overlay on top of a slider in bootstrap but when resizing down the image is not responsive:
.overlay {
background: url(../img/bocSlider.png) top left no-repeat;
position: absolute;
background-position: center;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
}
#media (min-width: 768px) and (max-width: 979px) {
.overlay{
width:50%;
height:50%;
}
}
#media (max-width: 767px) {
.overlay{
width:50%;
height:50%;
}
}
#media (max-width: 480px) {
.overlay{
width:50%;
height:50%;
}
}
Below is the HTML for the slider that I am using:
<div id="myCarousel" class="carousel slide">
<!-- 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>
<div class="carousel-inner">
<div class="overlay" class="img-responsive"></div>
<div class="item active">
<img src="/img/Bar.jpg" class="fill">
</div>
<div class="item">
<img src="/img/Outside.jpg" class="fill">
</div>
<div class="item">
<img src="/img/Table_1.jpg" class="fill">
</div>
<div class="item">
<img src="/img/Tables_2.jpg" class="fill">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
Could someone please help me fix this issue?
Image is a .png
You can use background color instead of overlay image.
just write
background-color:rgba(0,0,0,.5);
Hope this will help you.
In you css add background size property
.overlay {
background: url(../img/bocSlider.png) top left no-repeat;
position: absolute;
background-position: center;
background-size: 100%;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
}
You are adding class in wrong way and in bootstrap img-responsive applies to img tag,
<div class="overlay" class="img-responsive"></div>
Should be
<div class="overlay img-responsive"></div>
For your code remove img-responsive
<div class="overlay"></div>