I am using a combination of Images and Videos in Bootstrap Carousel 4. HTML5 Video controls work fine if I slide the carousel in left direction but if slide carousel in the right direction, video controls either disappear or move towards the extreme left.
I found a reference here Bootstrap Video Carousel Play button/ left & right indicators not appearing, but none of the provided answers work.
<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>
<div id="homeCarousel" class="col-lg-12 col-md-12 no-padding">
<div id="demo" class="carousel slide" data-ride="carousel" data-interval="7000">
<div class="carousel-inner">
<div id="p_lt_ctl00_pageplaceholder_p_lt_ctl00_UniversalPageViewer_viewElem">
</div>
<div class="carousel-item active">
<img src="https://via.placeholder.com/1920x675" alt="" width="1920" height="675" style="display:block;">
<div class="carousel-caption carousel-caption-2" style="display:block;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x675" alt="" width="1920" height="675" style="display:block;">
<div class="carousel-caption carousel-caption-1" style="display:block;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x675" alt="" width="1920" height="675" style="display:block;">
<div class="carousel-caption carousel-caption-3" style="display:none;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<video controls="controls" width="1920" height="675" style="display:block;">
<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
</video>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1" class=""></li>
<li data-target="#demo" data-slide-to="2" class=""></li>
<li data-target="#demo" data-slide-to="3" class=""></li>
</ol>
<!-- 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>
</div>
You should avoid setting height and width in html. Setting those measurements from within css will give you much more predictable and flexible results.
.carousel-item img,
.carousel-item video {
width: 100%;
height: auto;
}
<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>
<div id="homeCarousel" class="col-lg-12 col-md-12 no-padding">
<div id="demo" class="carousel slide" data-ride="carousel" data-interval="7000">
<div class="carousel-inner">
<div id="p_lt_ctl00_pageplaceholder_p_lt_ctl00_UniversalPageViewer_viewElem">
</div>
<div class="carousel-item active">
<img src="https://via.placeholder.com/1920x675" alt="" style="display:block;">
<div class="carousel-caption carousel-caption-2" style="display:block;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x675" alt="" style="display:block;">
<div class="carousel-caption carousel-caption-1" style="display:block;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x675" alt="" style="display:block;">
<div class="carousel-caption carousel-caption-3" style="display:none;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<video controls="controls" style="display:block;">
<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
</video>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1" class=""></li>
<li data-target="#demo" data-slide-to="2" class=""></li>
<li data-target="#demo" data-slide-to="3" class=""></li>
</ol>
<!-- 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>
</div>
Related
This question already has answers here:
How can I have text wrap in a child element of an element with nowrap?
(2 answers)
CSS white-space nowrap parent, wrap child
(1 answer)
Closed 24 days ago.
I am trying to make a horizontal scrolling container that contains a list of cards. Each card contains a set image and has details (title and description). The sizes of the cards vary depending the amount of text that is in the details. The max-width a card can grow to is 45em. Even when a card has a max-width, the text on the details side does not wrap and flows out of the card. I think my problem is because of the white-space: nowrap on the container div, but I'm not sure how to correct it.
.c-card {
display: flex;
flex-direction: column;
gap: 1em;
}
#media screen and (min-width: 32em) {
.c-card {
max-width: 45em;
flex-direction: row;
}
}
.container {
overflow: x-scroll;
padding-left: 0;
white-space: nowrap;
}
.container__listItem {
display: inline-block;
margin-right: 1em;
}
<ul class="container">
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>
Lorem ipsum dolor sit amete</h3>
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodt
Lorem ipsum dolo.
</h3>
<p>Lorem ipsum dolo.</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec ullamcorper sit amet risus nullam eget felis.</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
</ul>
You're absolutely right. Resetting white-space behavior on the details element resolves the problem.
.c-card {
display: flex;
flex-direction: column;
gap: 1em;
}
#media screen and (min-width: 32em) {
.c-card {
max-width: 45em;
flex-direction: row;
}
}
.container {
overflow: x-scroll;
padding-left: 0;
white-space: nowrap;
}
.container__listItem {
display: inline-block;
margin-right: 1em;
}
.c-card__details {
white-space: normal;
}
<ul class="container">
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>
Lorem ipsum dolor sit amete</h3>
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodt Lorem ipsum dolo.
</h3>
<p>Lorem ipsum dolo.</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec ullamcorper sit amet risus nullam eget felis.</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
</ul>
I am trying to display three items in a bootstrap list group.
Here, in the middle, if the content is larger than it is currently making the content on the left overflowed.
The code i have came up with so far is:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-9/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="d-flex align-items-end">
<img class="rounded-circle" src="https://i.pravatar.cc/300" style="width: 50px;height:50px;object-fit: cover;" />
<span style="margin-left: -20px;margin-bottom: -8px;" class="font-weight-bold text-warning"><i class="fa fa-users fa-2x"></i></span>
</div>
<div class="ml-2">
<p class="h3 py-3">
Dapibus ac facilisis in
</p>
</div>
</div>
<p class="font-weight-light">05-19-2022 4:20</p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="d-flex align-items-end">
<img class="rounded-circle" src="https://i.pravatar.cc/150?u=a042581f4e29026704e" style="width: 50px;height:50px;object-fit: cover;" />
<span style="margin-left: -20px;margin-bottom: -8px;" class="font-weight-bold text-warning"><i class="fa fa-users fa-2x"></i></span>
</div>
<div class="ml-2">
<p class="h3 py-3">
Nullam semper lorem eget tortor consectetur, id mollis magna scelerisque.
</p>
</div>
</div>
<p class="font-weight-light">05-19-2022 4:20</p>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
How to keep that content as it is without changing its layout when the text content is large?
I wanted to achieve this using the pure bootstrap.
Please try white-space: nowrap for the font-weight-light class
You just need to add class="text-nowrap" in those elements.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-9/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="d-flex align-items-end">
<img class="rounded-circle" src="https://i.pravatar.cc/300" style="width: 50px;height:50px;object-fit: cover;" />
<span style="margin-left: -20px;margin-bottom: -8px;" class="font-weight-bold text-warning"><i class="fa fa-users fa-2x"></i></span>
</div>
<div class="ml-2">
<p class="h3 py-3">
Dapibus ac facilisis in
</p>
</div>
</div>
<p class="font-weight-light text-nowrap">05-19-2022 4:20</p>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="d-flex align-items-end">
<img class="rounded-circle" src="https://i.pravatar.cc/150?u=a042581f4e29026704e" style="width: 50px;height:50px;object-fit: cover;" />
<span style="margin-left: -20px;margin-bottom: -8px;" class="font-weight-bold text-warning"><i class="fa fa-users fa-2x"></i></span>
</div>
<div class="ml-2">
<p class="h3 py-3">
Nullam semper lorem eget tortor consectetur, id mollis magna scelerisque.
</p>
</div>
</div>
<p class="font-weight-light text-nowrap">05-19-2022 4:20</p>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
I've made a full screen carousel on a responsive web-page. And added a navbar to the carousel. But this navbar have problems with responsiveness. When I shrink the web site (responsive), the navbar creats a problem about responsiveness: words are nested. How can I fix this? When I add something, I do not see anything. The latter under the carousel. Can you help me?
.carousel-item {
height: 100vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.navbar {
margin-top: 50px;
margin-left: 50px;
margin-right: 50px;
border-radius: 3px;
z-index: 1090;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="https://image.ibb.co/bQEXKz/logo.png" alt=""></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="#">ANASAYFA
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BİZ KİMİZ?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ÜRÜNLERİMİZ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">HİZMETLERİMİZ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">RESİM GALERİSİ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İLETİŞİM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fab fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fab fa-linkedin"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-search"></i></a>
</li>
</ul>
</div>
</div>
</nav>
<header>
<div id="carouselExampleIndicators" class="carousel slide fixed-top " data-ride="carousel">
<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" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('http://placehold.it/1900x1080')">
<div class="carousel-caption d-none d-md-block">
<h3>First Slide</h3>
<p>This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('http://placehold.it/1900x1080')">
<div class="carousel-caption d-none d-md-block">
<h3>Second Slide</h3>
<p>This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('http://placehold.it/1900x1080')">
<div class="carousel-caption d-none d-md-block">
<h3>Third Slide</h3>
<p>This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<div class="container">
<div class="hizmetlerimiz-top text-center">
<p>NELER YAPIYORUZ?</p>
<h3>HİZMETLERİMİZ</h3>
<i class="fas fa-ellipsis-h"></i>
</div>
<div class="hizmetlerimiz-content">
<div class="row">
<div class="col-sm-3">
<div class="item-logo">
<img src="images/index.jpg" alt="">
</div>
<h4>RASCHEL ÖRME MAKİNALARI</h4>
<p> Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse iaculis varius cursus. consectetur adipiscing elit.
Suspendisse iaculis varius cursus.</p>
</div>
<div class="col-sm-3">
<div class="item-logo">
<img src="images/cozum.jpg" alt="">
</div>
<h4>AYRIŞTIRICI ÇÖZGÜ</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse iaculis varius cursus. consectetur adipiscing elit.
Suspendisse iaculis varius cursus.</p>
</div>
<div class="col-sm-3">
<div class="item-logo">
<img src="images/levent.jpg" alt="">
</div>
<h4>LEVENT ÇÖZGÜ</h4>
<p> Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse iaculis varius cursus. consectetur adipiscing elit.
Suspendisse iaculis varius cursus.</p>
<i class="fas fa-plus"></i>
</div>
<div class="col-sm-3">
<div class="item-logo">
<img src="images/boya.jpg" alt="">
</div>
<h4>BOYAHANE</h4>
<p> Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse iaculis varius cursus. consectetur adipiscing elit.
Suspendisse iaculis varius cursus.</p>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Remove fixed-top class from the <div id="carouselExampleIndicators">.
Replace this:
<div id="carouselExampleIndicators" class="carousel slide fixed-top" data-ride="carousel">
With this:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
My carousel is a 1200*500 dimension one. When I put an image of the same dimension , its not taking the full width of the carousel , just partially.
I tried using the "fill" class in my html code but its not working , I also tried with this css code:
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
Nothing seems to be working. Any help please
HTML Code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner">
<div class="item active">
<img src="images/18.jpg" alt="First slide">
<div class="carousel-caption">
<h3>
First slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x500/9b59b6/8e44ad" alt="Second slide">
<div class="carousel-caption">
<h3>
Second slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x500/34495e/2c3e50" alt="Third slide">
<div class="carousel-caption">
<h3>
Third slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control"
href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
</span></a>
</div>
<div class="main-text hidden-xs">
<div class="col-md-12 text-center">
<h1>
Static Headline And Content</h1>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<div class="">
<a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">Login</a><a class="btn btn-clear btn-sm btn-min-block"
href="http://www.jquery2dotnet.com/">Registration</a></div>
</div>
</div>
</div>
</div>
</div>
<div id="push">
</div>
CSS code:
.main-text
{
position: absolute;
top: 80px;
width: 96.66666666666666%;
color: #FFF;
}
.btn-min-block
{
min-width: 170px;
line-height: 26px;
}
.btn-clear
{
color: #FFF;
background-color: transparent;
border-color: #FFF;
margin-right: 15px;
}
.btn-clear:hover
{
color: #000;
background-color: #FFF;
}
#carousel-example-generic
{
margin-top: 80px;
min-height: 100px;
min-width: 80%;
}
I did this example for you (it's a bit simple, but will help you).
The change I made, compared to yours, is that I am now adding the image as background in a DIV, not in an image element. Thus, we can control the display, regardless of the size the image has.
.carousel-img {
width: 100%;
height: 400px;
background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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/3.3.7/js/bootstrap.min.js"></script>
<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">
<div class="carousel-img" style="background-image: url('http://lorempixel.com/1200/500/')"></div>
<div class="carousel-caption">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="item">
<div class="carousel-img" style="background-image: url('http://lorempixel.com/1200/500/')"></div>
<div class="carousel-caption">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</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 have helped you in any way
I have an HTML code, that want to bind to sql server DB and using the data list asp.net control.as well as we know data list can repeat the code to read all data from DB.
but in my code there is a tag that i don't want to repeat.How can i do this with data list?
this is HTML code before binding:
<div id="welcomeHero">
<div id="slideshow-main">
<ul>
<li class="p1 active">
<a href="www.sdsd.adsf">
<img src="images/1_big.gif" width="430" height="290" alt=""/>
<span class="opacity"></span>
<span class="content">
<h1>Title 1</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</span>
</a>
</li>
<li class="p2">
<a href="#">
<img src="images/2_big.gif" width="430" height="290" alt=""/>
<span class="opacity"></span>
<span class="content"><h1>Title 2</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</a>
</li>
<li class="p3">
<a href="#">
<img src="images/3_big.gif" width="430" height="290" alt=""/>
<span class="opacity"></span>
<span class="content"><h1>Title 3</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</a>
</li>
</ul>
</div>
<div id="slideshow-carousel">
<ul id="carousel" class="jcarousel jcarousel-skin-tango">
<li><img src="images/1_big.gif" width="206" height="95" alt="#"/></li>
<li><img src="images/2.gif" width="206" height="95" alt="#"/></li>
<li><img src="images/3.gif" width="206" height="95" alt="#"/></li>
</ul>
</div>
</div>
and i don't want to repeat this codes:
<div id="welcomeHero">
<div id="slideshow-main">
<ul>
</ul>
</div>
<div id="slideshow-carousel">
</div>
</div>
or any idea?