Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed last year.
Improve this question
Anyone can help me how to make carousel like this?
I didn't found any examples or tutorial to make the carousel like this design.
my carousel design
you can use Bootstrap and play with column and row div ---
.content{
float:left;
width:100%;
padding:4em 1em;
text-align:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>slider</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Carousel Example</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-6">
<div class="content">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="col-md-6">
<img src="la.jpg" alt="Los Angeles" style="width:100%;">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-6">
<div class="content">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="col-md-6">
<img src="chicago.jpg" alt="Chicago" style="width:100%;">
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-6">
<div class="content">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>
<div class="col-md-6">
<img src="ny.jpg" alt="New York" style="width:100%;">
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
If you are talking about the 15px padding on the left then that’s the default padding on that bootstrap grid.
You can remove it with:
.carousel-inner .col-xs-5{padding-left:0}
However you should read the bootstrap documentation as there is probably a class or something you could add to offset this. (I’ve stopped using the actual bootstrap grids a long time ago.)
LINK BELOW:
https://www.sitepoint.com/community/t/bootstrap-slider-image-and-caption-side-by-side/113599/2
Related
I want to stretch images in a carousel the entire width and height of the div that contains the carousel. However, the images are currently not occupying 100% width of the div, and the height is smaller or larger than the div. I am using Bootstrap 4.3.1. My code excerpt is shown below. Entire code is in this JS Fiddle page.
<div class="row">
<!-- card 1 -->
<div class="col-sm-4 card" style="height: 350px">
<div class="card-body small-tab-container">
<h6 class="card-title">Activity (last 7 days)</h6>
<p>Some content</p>
</div>
</div> <!-- end card 1 -->
<!-- card 2 -->
<div class="col-sm-4 card" style="height: 350px;">
<div id="photoCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://media.wired.com/photos/5fb70f2ce7b75db783b7012c/master/pass/Gear-Photos-597589287.jpg" class="d-block img-fluid">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/3680219/pexels-photo-3680219.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="d-block img-fluid">
</div>
<div class="carousel-item">
<img src="https://www.cnet.com/a/img/-qQkzFVyOPEoBRS7K5kKS0GFDvk=/940x0/2020/04/16/7d6d8ed2-e10c-4f91-b2dd-74fae951c6d8/bazaart-edit-app.jpg" class="d-block img-fluid">
</div>
<!-- the below code will insert the previous and next photo arrows -->
<a class="carousel-control-prev" href="#photoCarousel" 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="#photoCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div> <!-- end carousel -->
</div> <!-- end card 2 -->
<!-- card 3 -->
<div class="col-sm-4 card" style="Height: 350px">
<div class="card-body small-tab-container">
<h6 class="card-title">Upcoming Events</h6>
<p>Some content</p>
</div>
</div> <!-- end card 3-->
</div> <!-- end: row 1 -->
Your card <div>s still have their default padding,
Change all the <div class="col-sm-4 card" ...> to <div class="col-sm-4 card p-0" ....>.
or change the appropriate classes to include padding: 0;
With some CSS the object-fit and object-position of the images, and adding some other bootstrap utility classes, I am able to make your images take up 100% height and width of your carousel container. Is this what you are looking for?
.carousel-item img {
object-fit: cover;
object-position: center center;
}
<!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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Page title</h1>
<div class="row">
<!-- card 1 -->
<div class="col-sm-4 card" style="height: 350px">
<div class="card-body small-tab-container">
<h6 class="card-title">Activity (last 7 days)</h6>
<p>Some content</p>
</div>
</div> <!-- end card 1 -->
<!-- card 2 -->
<div class="col-sm-4 card p-0" style="height: 350px;">
<div id="photoCarousel" class="carousel h-100 slide" data-ride="carousel">
<div class="carousel-inner h-100">
<div class="carousel-item h-100 active">
<img src="https://media.wired.com/photos/5fb70f2ce7b75db783b7012c/master/pass/Gear-Photos-597589287.jpg" class="position-absolute t-0 l-0 h-100 w-100">
</div>
<div class="carousel-item h-100">
<img src="https://images.pexels.com/photos/3680219/pexels-photo-3680219.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="position-absolute t-0 l-0 w-100 h-100">
</div>
<div class="carousel-item h-100">
<img src="https://www.cnet.com/a/img/-qQkzFVyOPEoBRS7K5kKS0GFDvk=/940x0/2020/04/16/7d6d8ed2-e10c-4f91-b2dd-74fae951c6d8/bazaart-edit-app.jpg" class="position-absolute t-0 l-0 h-100 w-100">
</div>
<!-- the below code will insert the previous and next photo arrows -->
<a class="carousel-control-prev" href="#photoCarousel" 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="#photoCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div> <!-- end carousel -->
</div> <!-- end card 2 -->
<!-- card 3 -->
<div class="col-sm-4 card" style="Height: 350px">
<div class="card-body small-tab-container">
<h6 class="card-title">Upcoming Events</h6>
<p>Some content</p>
</div>
</div> <!-- end card 3-->
</div> <!-- end: row 1 -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I'm working on a noobie html/css challenge, and I can't seem to get the carousel to progress to the next slide. As far as I can tell, the bootstrap is linked (because when I remove the link, it completely transforms the page.) Any idea what could be happening?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Coding Bootcamp Testimonials Slider</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="css.css">
</head>
<body>
<!--Layer 0-->
<div class="level-0">
<div class="quote">
<img class="quote-image" src="images\pattern-quotes.svg" alt="">
</div>
<div class="curve">
<img class="curve-image" src="images\pattern-curve.svg" alt="">
</div>
<div class="bg">
<img class="bg-image" src="images\pattern-bg.svg" alt="">
</div>
</div>
<!--layer 1-->
<div class="level-1">
<div id="testimonials" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<p>
“ I’ve been interested in coding for a while but never taken the jump, until now.
I couldn’t recommend this course enough. I’m now in the job of my dreams and so
excited about the future. ”
Tanya Sinclair UX Engineer
</p>
<img class="image" src="images\image-tanya.jpg" alt="">
</div>
<div class="carousel-item">
<p>
“ If you want to lay the best foundation possible I’d recommend taking this course.
The depth the instructors go into is incredible. I now feel so confident about
starting up as a professional developer. ”
John Tarkpor Junior Front-end Developer
</p>
<img class="image" src="images\image-john.jpg" alt="">
</div>
</div>
<a class="carousel-control-prev" href="#testimonials" 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="#testimonials" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Aaron McDonald.
</div>
</body>
</html>
Thanks ahead of time for any help!
Not quite sure what you mean by...
remove the link, it completely transforms the page.
But using your supplied code, by adding Bootstrap 4's javascript files, your carousel works sweet.
Ignore my css and extra html for the below demo, but including javascript into your code makes the carousel progress to the next slide.
BODY {
background: black !important;
color: white !important;
}
.carousel-control-prev {
left: -15% !important;
}
.carousel-control-next {
right: -15% !important;
}
<div class="row justify-content-center p-4">
<div class="col-8">
<!--layer 1-->
<div class="level-1">
<div id="testimonials" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<p>
“ I’ve been interested in coding for a while but never taken the jump, until now. I couldn’t recommend this course enough. I’m now in the job of my dreams and so excited about the future. ” Tanya Sinclair UX Engineer
</p>
<img class="image" src="images\image-tanya.jpg" alt="">
</div>
<div class="carousel-item">
<p>
“ If you want to lay the best foundation possible I’d recommend taking this course. The depth the instructors go into is incredible. I now feel so confident about starting up as a professional developer. ” John Tarkpor Junior Front-end Developer
</p>
<img class="image" src="images\image-john.jpg" alt="">
</div>
</div>
<a class="carousel-control-prev" href="#testimonials" 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="#testimonials" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="attribution">
Challenge by Frontend Mentor. Coded by Aaron McDonald.
</div>
</div>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Just add the following lines in your code and it will work fine. Javascript is missing.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Xcart, PHP5.6, Bootstrap 3.1.1
My goal is to make a carousel that displays 3 items at a time and loops over a total of 5 items.
I've ensured my libraries are being called and that they are where they're supposed to be however the carousel never initiates.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style type="text/css">
.container{
margin: 0 auto;
}
</style>
<div class="container">
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="https://i.stack.imgur.com/ihiQ2.png" />
</div>
<div class="item">
<img src="https://i.stack.imgur.com/ihiQ2.png" />
</div>
<div class="item">
<img src="https://i.stack.imgur.com/ihiQ2.png" />
</div>
<div class="item">
<img src="https://i.stack.imgur.com/ihiQ2.png" />
</div>
<div class="item">
<img src="https://i.stack.imgur.com/ihiQ2.png" />
</div>
</div>
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹< /a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">› </a>
</div>
</div>
$(document).ready(function(){
$('.carousel').carousel({
interval: 4000
});
});
I've tried using sample code from the docs to get something to display carousel-like behavior but instead they are stacking:
I feel terrible because this question has been asked repeatedly and I've followed the answers but I'm stuck.
From the snippet you're showing, you have to put your javascript into <script>...</script> tags, be sure that your cdns are using https and not http.
You also forgot to add bootstrap.min.css:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
Use the https://... instead of the http://...
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js
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>
I'm building a site with the latest Twitter Bootstrap using the responsive features.
My problem is that I have two lists that appear side by side, but when the viewport width is less than 768px wide they appear stacked despite there being enough space for both of them to fit. How can I fix this?
Also, a couple of minor things: In the footer I have a strange A symbol appearing before the copyright symbol...how do I sort this out? Also, in IE two elements don't appear inline like they do on all other browsers.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGHicks Homepage</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<!-- Header -->
<div class="row-fluid">
<div class="span5 logo">
<img src="images/Logo.png" class="logo">
</div>
<div class="span4 offset3 phone_numbers">
<img src="images/Phone_icon.png" class="pull-left phone_icon hidden-phone hidden-tablet">
<h4 class="pull-right align_right">Northampton <span>01604786464</span><br><br>Mobile <span>07710537685</span></h4>
</div>
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="navbar_link navitem1"><strong>HOME</strong></li>
<li class="divider-vertical navitem2"></li>
<li class="navbar_link navitem3"><strong>GALLERY</strong></li>
<li class="divider-vertical navitem4"></li>
<li class="navbar_link navitem5"><strong>ABOUT US</strong></li>
<li class="divider-vertical navitem6"></li>
<li class="navbar_link navitem7"><strong>CONTACT</strong></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="row-fluid content">
<div class="span6">
<div id="homepage_carousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><img src="images/Homepage/640x480px-City-&-Guilds.png" /></div>
<div class="item"><img src="images/Homepage/640x480px-Domestic-&-Commercial.png" /></div>
<div class="item"><img src="images/Homepage/640x480px-Small-One-Off-Jobs.png" /></div>
</div>
</div>
</div>
<div class="span6">
<div class="row-fluid homepage_text">
<div class="span12">
<h5 class="text_justify">Welcome to AGHicks Building Services website! We are a Northampton based, family run company with over 20 years experience. Hardwork, efficiency and reliability are instilled throughout the workforce and we have gained a strong reputation through word of mouth.</h5>
</div>
</div>
<div class"row-fluid">
<div class="span12 icon_container">
<img src="images/Homepage/Map_pin.png" class="grid_item grid_item1" >
<h5 class="redtext grid_item grid_text">Northampton Based</h5>
<img src="images/Homepage/Quote.png" class="grid_item grid_item2" >
<h5 class="redtext grid_item grid_text">Free Quotes</h5>
</div>
<div class="span12 icon_container2">
<img src="images/Homepage/Tools.png" class="grid_item grid_item3" >
<h5 class="redtext grid_item grid_text">No Job Too Small</h5>
<img src="images/Homepage/Piggybank.png" class="grid_item grid_item4" >
<h5 class="redtext grid_item grid_text">Competitive Prices</h5>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h5 class="redtext centered">OUR SERVICES INCLUDE</h5>
</div>
</div>
<div class="row-fluid">
<div class="span5">
<ul>
<li><strong>Conservatories</strong></li>
<li><strong>Extensions</strong></li>
<li><strong>Window & Door Refits</strong></li>
<li><strong>Bricklaying</strong></li>
<li><strong>Driveways</strong></li>
<li><strong>Carpentry</strong></li>
<li><strong>Patios</strong></li>
<li><strong>Stonework</strong></li>
</ul>
</div>
<div class="span6 offset1 lists">
<ul>
<li><strong>Plastering</strong></li>
<li><strong>Kitchen & Bathroom Refits</strong></li>
<li><strong>Tiling</strong></li>
<li><strong>Fencing</strong></li>
<li><strong>Fascias</strong></li>
<li><strong>Garages & Carports</strong></li>
<li><strong>Guttering</strong></li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div class="row-fluid footer_wrapper">
<div class="span12">
<div class="row-fluid footer">
<div class="span5">
<p class="footer_text"><strong>Copyright © AGHicks Building Services 2012 - All rights reserved.<br>Registered Address - 19 Bentley Close, Rectory Farm, Northampton, NN3 5JS.</strong></p>
</div>
<div class="span4 offset3 align_right">
<p class="footer_text"><strong>Web Design Services and SEO from Ben Mildren</strong></p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel({
interval: 3500
})
</script>
</body>
The CSS is here: http://gw.gd/Ooky
Thanks in advance.
As #Omega noted, the stacking of columns <768px is the default Bootstrap behaviour. You can override this with some custom CSS though. Here's a post with a similar question: Stack elements in twitter bootstrap media grid differently
Regarding the strange symbol in your footer, start by checking that your header includes:
<meta charset="UTF-8">
Good luck!