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>
Related
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
I'm trying to implement a tutorial class project working on bootstrap5 carousel previous and next sliding buttons. if I execute this I'm getting boxes over on the buttons and the buttons are not working. enter image description here
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="1000">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden"></span>
</button>
</div>
</section>
You missed add d-block w-100 to img selector and I think you did not hook up bootstrap-5 correctly. I made changes and it works like a charm ;-)
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world! Bootstrap 5 Carousel!</title>
</head>
<body>
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-image d-block w-100" src="https://images.unsplash.com/photo-1534972195531-d756b9bfa9f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGNvZGV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image d-block w-100" src="https://images.unsplash.com/photo-1564865878688-9a244444042a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Y29kZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden"></span>
</button>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
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>
My teacher has been assigning my class these trainings from a class on Lynda.com (Bootstrap 4 Essentials Trainings).
I have no idea what's wrong with my code. I copied it directly from the trainings and I'm not sure what happened.
The carousel will only load images with the active class
The accordion won't show content unless I apply the show class
The alert doesn't go away when I click the 'x'
In one document, I copied the code and made alterations to fit the requirements for the assignment I've been given. In the other, I copy-pasted the elements directly from the completed files that are working as they should when I run them. Neither of these documents is functioning properly (these files are for an assignment that is separate from the Lynda training files):
<html lang="en">
<head>
<title>Worksheet 8</title>
<!--
Author: Crab
Date: 11/20/2020
Filename: worksheet8.html
-->
<!-- 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://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<header>
<h1 class="p-3 text-left text-light bg-dark d-md-none d-sm-block">Chapter 8 Worksheet</h1>
</header>
<header class="jumbotron jumbotron-fluid p-4 bg-dark d-none d-md-block">
<h1 class="display-1 mb-4 text-center text-light">Chapter 8 Worksheet</h1>
</header>
<div class="container">
<h2>Carousel</h2>
<div class="row">
<section class="col-12">
<div class="carousel slide" id="featured" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#feature" data-slide-to="0"></li>
<li data-target="#feature" data-slide-to="1"></li>
<li data-target="#feature" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item">
<img class="d-nlock w-100" src="images/image1.JPG" alt="Lifestyle Photo">
</div>
<div class="carousel-item">
<img class="d-nlock w-100" src="images/image2.JPG" alt="Mission">
<div class="carousel-caption d-none d-md-block">
<h3>Pete, owner of McAllister</h3>
<p>"Wisdom Pet Medicine is the only clinic around that will even book pet fish for appointments."</p>
</div>
</div>
<div class="carousel-item active">
<div><img class="d-nlock w-100" src="images/image3.JPG" alt="Vaccinations"></div>
</div>
</div>
<a class="carousel-control-prev" href="#featured" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
<span class="sr-only">Previous</span>
</span>
</a>
<a class="carousel-control-next" href="#featured" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
<span class="sr-only">Next</span>
</span>
</a>
</div>
<h2>Our Mission</h2>
<p>Wisdom Pet Medicine strives to blend the best in traditional and alternative medicine in the diagnosis and treatment of companion animals including dogs, cats, birds, reptiles, rodents, and fish. We apply the wisdom garnered in the centuries old tradition of veterinary medicine, to find the safest treatments and cures.</p>
<p>We strive to be your pet's medical experts from youth through the senior years. We build preventative health care plans for each and every one of our patients, based on breed, age, and sex, so that your pet receives the most appropriate care at crucial milestones. We want to give your pet a long and healthy life.</p>
</section>
</div><!-- row -->
<h2 class="pt-4">Accordion</h2>
<div class="accordion" id="servicesaccordion">
<div class="card">
<div class="card-header" id="groomingheading">
<h5 class="mb-0">
<a href="#grooming" data-toggle="collapse" aria-expanded="true" aria-controls="grooming">
Grooming
</a>
</h5>
</div><!-- card header -->
<div id="grooming" class="collapse show" data-parent="#servicesaccordion" aria-labelledby="groomingheading">
<div class="card-body">
<p>Our therapeutic grooming treatments help battle fleas, allergic dermatitis, and other challenging skin conditions.</p>
</div>
</div><!-- collapse -->
</div><!-- card -->
<div class="card">
<div class="card-header" id="generalhealthheading">
<h5 class="mb-0">
<a href="#generalhealth"
class="collapsed"
data-toggle="collapse"
aria-expanded="false"
aria-controls="generalhealth"
>General Health</a>
</h5>
</div><!-- card header -->
<div id="generalhealth" class="collapse" data-parent="#servicesaccordion" aria-labelledby="generalhealthheading">
<div class="card-body">
<p>Wellness and senior exams, ultrasound, x-ray, and dental cleanings are just a few of our general health services.</p>
</div>
</div><!-- card collapse -->
</div><!-- card -->
<div class="card">
<div class="card-header" id="nutritionheading">
<h5 class="mb-0">
<a href="#nutrition" class="collapsed" data-toggle="collapse"
aria-expanded="false">
Nutrition
</a>
</h5>
</div><!-- card header -->
<div id="nutrition" class="collapse" data-parent="#servicesaccordion" aria-labelledby="nutritionheading">
<div class="card-body">
<p>Let our nutrition experts review your pet's diet and prescribe a custom nutrition plan for optimum health and disease prevention.</p>
</div>
</div><!-- collapse -->
</div><!-- card -->
</div><!-- accordion -->
<h2 class="pt-4">Alert</h2>
<div class="alert alert-info alert-dismissable fade show">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="alert-heading">Standard Checkups</h4>
<p class="mb-2">Our standard checkups offer ultrasounds, x-rays and dental cleanings.</p>
More Info
</div>
</div><!-- container -->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>```
Replace the last 3 with these
<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.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
And it should work fine now, it was most likely a problem with your script tags
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