I am using bootstrap carousel and I have enabled the data-bs-touch to true. The swiping only seems to work after you click the arrow the first time and then the touch/swipe works for every item after that on a mobile view. How do I get the touch to work on the first item in the carousel as well? I am using Bootstrap v5.1.
See below code:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<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>
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-touch="true" >
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2" class="" aria-current="true"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3" class=""></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Second slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"></rect><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
</div>
<div class="carousel-item">
<svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Third slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"></rect><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
JS FIDDLE: https://jsfiddle.net/opvL8w4t/
Related
The carousel fades into the next slide when I click the next/previous buttons, even though I have added the 'slide' class.
<div id="testimonials-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active" style="background-color: red;">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" style="background-color: yellow;">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" style="background-color: blue;">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I want the slides to slide smoothly and not fade. Can you guys tell me if I'm doing something wrong or guide me through how I should be doing it
your code work and no problem and slide smoothly, try this strucktur in your html
<head>
<link href="your.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
</head>
<body>
//your html
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
</body>
I have a Bootstrap 5 carousel with captions. Is it possible to add any class to the div containing the carousel-item or the carousel-caption to put the captions in the centre of the slide? Or I still need to use CSS as in older versions (below)? I tried align-middle and similar classes but without success.
Eg. Old solution from Fiddle:
.carousel-caption {
top: 0;
bottom: auto;
}
Can't really find a good combination of just using utility class to achieve what you want, but able to find a minimum way where still need to define a manual class :
.carousel-caption {
transform: translateY(50%);
}
and then add bottom-50 to carousel-caption. Since so it could rather just write
.carousel-caption {
transform: translateY(50%);
bottom: 50% !important;
}
LOL :)
#carouselExampleCaptions {
width: 600px;
height: 400px;
}
.carousel-caption {
transform: translateY(50%);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div id="carouselExampleCaptions" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://rb.gy/18mzdx" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block bottom-50">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://rb.gy/18mzdx" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block bottom-50">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://rb.gy/18mzdx" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block bottom-50">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I modify the tailwind elements carousel with two columns left column with content and a right column with image. All functionality is correct but the problem is responsivity.
How can I modify this carousel so that I change the resolution to md or sm I get columns vertical?
I tried to do flex flex-row and when i change the resolution to md or sm to be flex flex-col and nothing changed the same with grid grid-cols-2 and after changing to md and sm to grid-cols-1
This is my code
<div id="carouselExampleCaptions" class="carousel slide relative" data-bs-ride="carousel">
<div class="carousel-indicators absolute right-0 bottom-0 left-0 flex justify-center p-0 mb-4">
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<div class="carousel-inner relative w-full overflow-hidden">
<div class="carousel-item active relative float-left w-full">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg"
class="block w-1/4 h-96 float-right mr-80"
alt="..."
/>
<div class="carousel-caption hidden md:block absolute text-left h-96 ">
<h1 class="font-bold text-4xl lg:text-6xl text-blue-900 leading-tight font-poppins pb-4 ">SOME TEXT</h1>
<p class="text-gray-500">Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item relative float-left w-full">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg"
class="block w-1/4 h-96 float-right mr-80"
alt="..."
/>
<div class="carousel-caption hidden md:block absolute text-left h-96">
<h1 class="font-bold text-4xl lg:text-6xl text-blue-900 leading-tight font-poppins pb-4">SOME TEXT 1</h1>
<p class="text-gray-500">Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item relative float-left w-full">
<img
src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg"
class="block w-1/4 h-96 float-right mr-80"
alt="..."
/>
<div class="carousel-caption hidden md:block absolute text-left h-96">
<h1 class="font-bold text-4xl lg:text-6xl text-blue-900 leading-tight font-poppins pb-4">SOME TEXT 2</h1>
<p class="text-gray-500">Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button
class="carousel-control-prev absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline left-0 text-black"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon inline-block bg-no-repeat" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next absolute top-0 bottom-0 flex items-center justify-center p-0 text-center border-0 hover:outline-none hover:no-underline focus:outline-none focus:no-underline right-0 text-black"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="next"
>
<span class="carousel-control-next-icon inline-block bg-no-repeat" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I have set up a carousel to show 5 videos. I have set up indicators at the bottom to navigate:
<div class="col-lg-12 carousel slide" id="trailers" data-bs-ride="carousel" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#trailers" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#trailers" data-bs-slide-to="1" data-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#trailers" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#trailers" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#trailers" data-bs-slide-to="4" aria-label="Slide 5"></button>
</div>
<div class="trailerSlider carousel-inner" style="background-color: #000; padding-bottom: 50px;"> <!-- was livetv -->
<div class="carousel-item active" >
<div id="cover">
Loading video...
</div>
</div>
<div class="carousel-item">
<div id="cover2">
Loading video...
</div>
</div>
<div class="carousel-item">
<div id="cover3">
Loading video...
</div>
</div>
<div class="carousel-item">
<div id="cover4">
Loading video...
</div>
</div>
<div class="carousel-item">
<div id="cover5">
Loading video...
</div>
</div>
</div>
</div>
However, even though the indicators show correctly, they don't work, nothing happens when I tap, not even an error message.
If I change data-bs-ride, data-bs-target and data-bs-slide-to to data-ride, data-target and data-slide-to (as I saw in a video tutorial), the buttons do work but the buttons look weird (much smaller and with a white border).
Also, how can I have the slider work only via the indicator buttons and not slide automatically?
You have a duplicate data-bs-ride="carousel" and an extra data-slide-to="1" but I when I ran your code, those errors wouldn’t stop the carousel from working. You didn’t include a working snippet with your question, so it’s not possible to verify which version of Bootstrap 5 you’re using.
Here’s a working snippet using your code.
.carousel-item {
height: 10.5rem;
}
#cover, #cover2, #cover3, #cover4, #cover5 {
color: white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<div class="col-lg-12 carousel slide" id="trailers" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-indicators">
<button type="button" data-bs-target="#trailers" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#trailers" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#trailers" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#trailers" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#trailers" data-bs-slide-to="4" aria-label="Slide 5"></button>
</div>
<div class="trailerSlider carousel-inner" style="background-color: #000; padding-bottom: 50px;">
<!-- was livetv -->
<div class="carousel-item active">
<div id="cover">
Loading video 1...
</div>
</div>
<div class="carousel-item">
<div id="cover2">
Loading video 2...
</div>
</div>
<div class="carousel-item">
<div id="cover3">
Loading video 3...
</div>
</div>
<div class="carousel-item">
<div id="cover4">
Loading video 4...
</div>
</div>
<div class="carousel-item">
<div id="cover5">
Loading video 5...
</div>
</div>
</div>
</div>
To prevent the slider from working automatically, add data-bs-interval="false" to the carousel div.
This is what i am using bootstrap 3.3.1 this code is not mobile friendly kindly look into. when i open in mobile all content gets small instead of convert into grids.please tell me what do to make it mobile responsive..
This is what i am using bootstrap 3.3.1 this code is not mobile friendly kindly look into. when i open in mobile all content gets small instead of convert into grids.please tell me what do to make it mobile responsive..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- ====================================================
header section -->
<header class="top-header" >
<div class="container">
<div class="row">
<div class="col-xs-5 header-logo">
<br>
<img src="img/logo.png" alt="" class="img-responsive logo">
</div>
<div class="col-md-7">
<nav class="navbar navbar-default">
<div class="container-fluid nav-bar">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="menu active" href="http://www.mysite" >Home</a></li>
<li><a class="menu" href="#products">our products </a></li>
<li><a class="menu" href="#contact"> contact us</a></li>
</ul>
</div><!-- /navbar-collapse -->
</div><!-- / .container-fluid -->
</nav>
</div>
</div>
</div>
</header> <!-- end of header area -->
<section class="slider" id="home">
<div class="container-fluid">
<div class="row">
<div id="carouselHacked" class="carousel slide carousel-fade" data-ride="carousel">
<div class="header-backup"></div>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
<div class="item">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
<div class="item">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
<div class="item">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carouselHacked" 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="#carouselHacked" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<br />
<div class="container" id="products">
<div class="row">
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/women-care.jpg" style="width: 140px; height: 140px;">
<h2>Women Care</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/man-power.jpg" style="width: 140px; height: 140px;">
<h2>Man Power</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
</div>
</div>
<!-- map section -->
<section class="api-map" id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 map" id="map"></div>
</div>
</div>
</section><!-- end of map section -->
<!-- contact section starts here -->
<section class="contact">
<div class="container">
<div class="row">
<div class="contact-caption clearfix">
<div class="contact-Product Name text-center">
<h2>contact us</h2>
</div>
<div class="col-md-5 contact-info text-left">
<h3>contact information</h3>
<div class="info-detail">
<ul><li><i class="fa fa-calendar"></i><span>Monday - Sunday:</span> 24X7</li></ul>
<ul><li><i class="fa fa-map-marker"></i><span>Address:</span></li></ul>
<ul><li><i class="fa fa-phone"></i><span>Telephone:</span> </li></ul>
<ul><li><i class="fa fa-envelope"></i><span>Email:</span> info#mysite</li></ul>
</div>
</div>
<div class="col-md-6 col-md-offset-1 contact-form">
<h3>leave us a message</h3>
<form class="form">
<input class="name" type="text" placeholder="Name">
<input class="email" type="email" placeholder="Email">
<input class="phone" type="text" placeholder="Phone No:">
<textarea class="message" name="message" id="message" cols="30" rows="10" placeholder="Message"></textarea>
<input class="submit-btn" type="submit" value="SUBMIT">
</form>
</div>
</div>
</div>
</div>
</section><!-- end of contact section -->
<!-- footer starts here -->
<footer class="footer clearfix">
<div class="container">
<div class="row">
<div class="col-xs-6 footer-para">
<p><i style="color:white;">©</i> <i style="color:white;">mysite</i> All right reserved</p>
</div>
<div class="col-xs-6 text-right">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-skype"></i>
</div>
</div>
</div>
</footer>
<!-- script tags
============================================================= -->
<script src="js/jquery-2.1.1.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/gmaps.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>