Hello, I am trying to use both these carousels from this site on the same page:
However, I cannot use both of them at the same time. If I fix the prices one, this happens to the quotes one:
I have no idea how to fix this. The CSS classes aren’t conflicting, so don’t know what is causing this. I have the following Bootstrap and JQuery in the header:
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
Anyone know?
Thanks!
Edit; If I fix the quotes, this happens to pricing:
Edit: I think it could be an issue with my header files, however I need the latest versions. Is there anything I need to update in the HTML in order for the carousels to work with the latest Bootstrap and JQuery versions? When adding the versions used in the snippet it works for one but not the other.
Thanks
Yes, you can use this carousel with any bootstrap.
follow some point:-
- use same version of bootstrap for bootstrap.css and bootstrap.js
- arrange all stylesheet link within header and all script link just before ending of body(/body)
- put jquery link on top then other js link at as described above
and best is use its alternative i.e OwlCarousel
https://owlcarousel2.github.io/OwlCarousel2/
No fix. If I use one of the Bootstrap files in the thing, it breaks the other.
why not you use owlCarousel?
if not
can you share code pls?
I will do once I’m back on pc. I want to use what I’ve made so far.
hey dear,
check out I have made a sample for you using bootstrap4.0 and your desired snippets
And its working
hey you are using bootstrap4.x and in snippets they are using bootstap.3.3
so there are lots of class that has changed to new. please check in quote carousel that there is a div with class=“item”, just replace it with carousel-item. that’s it.
and please change bootstrap js link to 4.2.1 when you are using bootstrap css4.2.1
Thanks, I will take a look when back on pc 
Thanks, it’s working now, however the bottom looks like this:
How can I solve this?
Thanks
what kinds of look you want?
As shown on the snippet:
I have updated it from the snippet, however it did not fix the issue.
Thanks
so you want to change button shape to circle
simply add a class to respective button and define them in stylesheet fix width, height, and border-radius to 50%.
or if you want to position both arrow left and right then you have to id via css with the help of browser developer tool.
Seems to be a problem with the links I have in the header.
<div class="container">
<div class='row'>
<div class='col-md-offset-2 col-md-8'>
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
<li data-target="#quote-carousel" data-slide-to="3"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="carousel-item active">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img src="img/lajolla.jpg" class="quoteimg" alt="Customer quote" />
</div>
<div class="col-sm-9">
We needed our driveway and back patio cleaned because it had gotten really bad over the years. Pressure Washing 24-7 pricing was reasonable and when they arrived, they gave us an explanation of everything they were going to do. Whenever they encountered an unforeseen problem, they came to us and told us about it without just barreling through the problem. They also kindly pointed out some disgusting mold on the shaded side of our house and offered to take care of the few troublesome spots. We were highly impressed with how courteous they were and how great our driveway and back porch looked. We will definitely use them again and recommend them to our family and friends.
<footer class="blockquote-footer">Sandra Anderson resident in <span class="quotecity">La Jolla, CA</span></footer>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="carousel-item">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img src="img/carlsbad.jpg" class="quoteimg" alt="Customer quote" />
</div>
<div class="col-sm-9">
Paul was not only prompt in responding to my email, but did an outstanding job, beyond what I expected. He was so thorough, he really took pride in the job he was doing. Without hesitation, I would call him again and I would certainly recommend him. Just fantastic!
<footer class="blockquote-footer">Brittany Rogers resident in <span class="quotecity">Carlsbad, CA</span></footer>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="carousel-item">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img src="img/delmar.jpg" class="quoteimg" alt="Customer quote" />
</div>
<div class="col-sm-9">
Went great. They did a great job and were very professional. I never consider having my listings professionally washed before and it now looks awesome. Definitely recommend Paul and his company for all my real estate listings.
<footer class="blockquote-footer">John Taylor resident in <span class="quotecity">Del Mar, CA</span></footer>
</div>
</div>
</blockquote>
</div>
<!-- Quote 4 -->
<div class="carousel-item">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img src="img/santafe.jpg" class="quoteimg" alt="Customer quote" />
</div>
<div class="col-sm-9">
We hired Pressure Washing 24-7 to pressure wash our house and drive way. They were great to work with very flexible with our hectic schedule. Junior the technician was excellent. He was there on time and did a great job. Very happy and highly recommend!
<footer class="blockquote-footer">Kathryn Briggs resident in <span class="quotecity">Rancho Santa Fe, CA</span></footer>
</div>
</div>
</blockquote>
</div>
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div
Is there anything I need to update?
Thanks
Manged to fix, thanks for the help 
