I'm trying to have a slideshow (carousel) of cards on my index.html.
The code I currently have presents all five cards vertically stacked, with clickable arrows that don't do anything. Anyone know how to make it so one card is shown at a time and can be clicked on to the next?
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="card active" style="width: 12rem;">
<img src="https://static.americasbestracing.net/s3fs-public/styles/large/public/reylu-gutierrez.jpg?KHONSa1SS2GQbZtqmIed8QZzxaE.XX.4&itok=AKl_nQxN" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Reylu Gutierrez.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/eric-cancel.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Eric Cancel.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/manuel-franco.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Manuel Franco.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/joel-rosario.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Joel Rosario.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://live.staticflickr.com/65535/43429236045_546119af43_b.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Andre Worrie.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I have the CSS and JS sources. My js file has these lines
const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
interval: 2000,
touch: false
})
Console log says bootstrap is not defined in the const carousel line?
okay in bootstrap you must follow template provide ,see this https://getbootstrap.com/docs/5.2/components/carousel/
you forget take class= "carousel-item"
so like this
<div class="card carousel-item " style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/joel-rosario.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Joel Rosario.</p>
</div>
</div>
Related
i have this good loking box grid
However, after adding a data filter and toggling between filters, the images appear in the same exact location and size as the grid that I designed. Is it feasible to have a data filter that displays all filtered images in one size?
this is my grid code
<div class="container">
<div class="text-center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button" data-filter="bootstrap">BootStrap</button>
<button class="btn btn-default filter-button" data-filter="bootstrax">BootStrax</button>
<button class="btn btn-default filter-button" data-filter="purecss">Pure CSS</button>
</div>
<div class="container container-box">
<style>
.container-box{
width: 600px; }
</style>
<div class="row">
<div class="col-12"><img width="600" class="img-fluid pb-3 filter bootstrax "
src="./images/01.jpg" alt=""></div>
</div>
<div class="row g-3">
<div class="col-4"><img width="200" class="img-fluid filter bootstrap"
src="./images/02.jpg" alt=""></div>
<div class="col-4"><img width="200" class="img-fluid filter purecss"
src="./images/03.jpg" alt=""></div>
<div class="col-4"><img width="200" class="img-fluid filter bootstrax"
src="./images/04.jpg" alt=""></div>
</div>
</div>
</div>
$(document).ready(function() {
$(".filter-button").click(function(e) {
var value = $(this).attr("data-filter");
if (value == "all") {
$(".filter").show("1000");
} else {
$(".filter").filter("." + value).show("3000");
$(".filter").not("." + value).hide("3000");
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
Is it possible to achieve that outcome in js, css, and html? Alternatively, if somebody has a better suggestion, please enlighten me.
You can simply use isotop js library by adding the following cdn to your script area :
<script src="https://unpkg.com/isotope-layout#3/dist/isotope.pkgd.min.js"></script>
You can still have the nested gallery structure and use the data filter by using isotope, also the filtered images will show properly one beside the other, and of course you will still have the same grid structure that will not be affected.
<div class="container text-center pt-5">
<div class="row">
<div class="col-md-12">
<div class="filters">
<h4>Featured categories</h4>
<ul>
<li data-filter=".idea">Furniture <img class="dot" src="./images/dot.svg"
alt=""></li>
<li data-filter=".ui">lighting <img class="dot" src="./images/dot.svg"
alt=""></li>
<li data-filter=".ux">Accessories <img class="dot" src="./images/dot.svg"
alt=""></li>
<li data-filter=".code">Tailor-made objects <img class="dot"
src="./images/dot.svg" alt=""></li>
<li class="is-checked fp" data-filter="*">All</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div class="rows grid data-isotope='{ "itemSelector": ".grid-item", "masonry":
{ "columnWidth": 200 } }'">
<div class="col-md-12 grid-item code">
<img class="img-fluid" src="./images/01.jpg" alt="">
</div>
<div class="col-md-4 grid-item ux ">
<img class="img-fluid img-grid" src="./images/02.jpg" alt="">
</div>
<div class="col-md-4 grid-item ui">
<img class="img-fluid img-grid" src="./images/03.jpg" alt="">
</div>
<div class="col-md-4 grid-item idea">
<img class="img-fluid img-grid" src="./images/04.jpg" alt="">
</div>
<div class="col-md-4 grid-item ux ">
<img class="img-fluid img-grid" src="./images/02.jpg" alt="">
</div>
<div class="col-md-4 grid-item ui">
<img class="img-fluid img-grid" src="./images/03.jpg" alt="">
</div>
<div class="col-md-4 grid-item idea">
<img class="img-fluid img-grid" src="./images/04.jpg" alt="">
</div>
<div class="col-md-4 grid-item ux ">
<img class="img-fluid img-grid" src="./images/02.jpg" alt="">
</div>
<div class="col-md-4 grid-item ui">
<img class="img-fluid img-grid" src="./images/03.jpg" alt="">
</div>
<div class="col-md-4 grid-item idea">
<img class="img-fluid img-grid" src="./images/04.jpg" alt="">
</div>
</div>
</div>
and use the following script as well
var $grid = $('.grid').isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows',
});
// change is-checked class on buttons
var $buttonGroup = $('.filters');
$buttonGroup.on( 'click', 'li', function( event ) {
$buttonGroup.find('.is-checked').removeClass('is-checked');
var $button = $( event.currentTarget );
$button.addClass('is-checked');
var filterValue = $button.attr('data-filter');
$grid.isotope({ filter: filterValue });
});
Best of luck
I am trying to use Bootstrap 5 Carousel slide in my Angular 13 project. Everything works fine in development with ng serve, but once I build a production version ng build it's not working, the carousel is missing slide effect, next image appears immediately under the sliding away image. Am I missing something in setup?
Repo: https://github.com/ebem/angular-bs-carousel
I added .js and .css file in angular.json
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
And added carousel (example from bootstrap) in app.component.html
<div style="height: 200px; width: 200px;">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<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://i.picsum.photos/id/311/200/300.jpg?hmac=ltcRErkHQZRTlJl3xZ_6HSzWzco1GSU3zbZhA12WvJw" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://i.picsum.photos/id/1057/200/300.jpg?hmac=NbjAWVAsLFsIna7Sw8vp4X2BhTpao1KbwORuUZlAcWw" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://i.picsum.photos/id/718/200/300.jpg?hmac=33vt_lg60EIOuc--jquKwN9epg7jFtlsroU-yn2NvLw" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<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>
</div>
This question already has answers here:
How can I make Bootstrap columns all the same height?
(34 answers)
Closed last year.
Expected behavior: same height for all cards
(all cards should adjust their height to the highest card)
Actual behavior: height depends on text length
Snippet: https://mdbootstrap.com/snippets/jquery/temp/3565823
IMAGE THAT NOT EACH SLIDE IS SAME HEIGHT
Adding style="min-height:300px" to each of the card-text
Please use this code:
<div class="container my-4">
<p class="font-weight-bold">Bootstrap carousel multiple items is an improved version of the standard bootstrap
carousel which allows you to put inside more than one element.</p>
<p><strong>Detailed documentation and more examples of Bootstrap grid you can find in our <a href="https://mdbootstrap.com/docs/standard/components/carousel/"
target="_blank">Bootstrap Carousel Docs</a>.</p>
<p>See also <a target="_blank" href="https://mdbootstrap.com/docs/standard/plugins/multi-item-carousel/"><strong>Advanced mutli item carousel plugin</strong></a> or <a target="_blank" href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2904002"><strong>multi-item carousel example for the newest Bootstrap 5</strong></a>.</p>
<hr class="mt-5">
<p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>
<a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fa fa-download"></i></a>
<a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>
<a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>
<a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fa fa-github ms-2"></i></a>
<hr class="mb-5"/>
<!--Carousel Wrapper-->
<div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">
<!--Controls-->
<div class="controls-top">
<a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
<!--/.Controls-->
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#multi-item-example" data-slide-to="0" class="active"></li>
<li data-target="#multi-item-example" data-slide-to="1"></li>
<li data-target="#multi-item-example" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="row">
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(47).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(48).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="row">
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(53).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(45).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(51).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.Third slide-->
</div>
<!--/.Slides-->
</div>
<!--/.Carousel Wrapper-->
</div>
Note: Here in the snippets I'm using the sm breakpoint to make the result visible without the full screen mode. The code in the MDB and CodePen sandboxes uses the original md breakpoint.
Step 1. Adjust the height of cards on one slide
Turn nested blocks .card and .card-body into flex-boxes with a column direction.
Add the flex-grow: 1; property to the .card-body block so that it occupies all the available height.
Assign the same property to the .card-text block so that it presses the buttons to the bottom edge of the cards and thus aligns them.
I prefer to achieve this with CSS so that I don't have to repeat the same utility classes for all the blocks involved. But for the .col-... blocks I have used the utility classes .d-flex, .d-none and .d-sm-flex, because they play here one more role: they also change the cards visibility according to the screen width.
Also I've removed the .clearfix class because it creates extra pseudo-elements and I see no reason to use this hear.
.carousel-equal-heights .carousel-item .card,
.carousel-equal-heights .carousel-item .card-body {
display: flex;
flex-direction: column;
}
.carousel-equal-heights .carousel-item .card-body,
.carousel-equal-heights .carousel-item .card-text {
flex-grow: 1;
}
<div class="container my-4">
<div class="carousel-equal-heights">
<div class="carousel-item active">
<!--Content of a slide-->
<div class="row">
<div class="col-sm-4 d-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
Step 2. Adjust the height of the slides
Unfortunately, this approach doesn't work for slides. Inactive slides get the display: none; property and the .carousel-inner container always changes its height to match the height of the active slide.
In this situation we can use JS:
Calculate the height of the highest and set it for all carousel slides.
Update these values if the browser window resizes.
Also add the height: 100%; property to the .row block on each slide.
Check the solution on MDB and CodePen.
$(document).ready(function() {
let $carouselItems = $('.carousel-equal-heights').find('.carousel-item');
updateItemsHeight();
$(window).resize(updateItemsHeight);
function updateItemsHeight() {
// remove old value
$carouselItems.height('auto');
// calculate new one
let maxHeight = 0;
$carouselItems.each(function() {
maxHeight = Math.max(maxHeight, $(this).outerHeight());
});
// set new value
$carouselItems.each(function() {
$(this).outerHeight(maxHeight);
});
// debug it
console.log('new items height', maxHeight);
}
});
.carousel-equal-heights .carousel-item > .row {
height: 100%;
}
.carousel-equal-heights .carousel-item .card,
.carousel-equal-heights .carousel-item .card-body {
display: flex;
flex-direction: column;
}
.carousel-equal-heights .carousel-item .card-body,
.carousel-equal-heights .carousel-item .card-text {
flex-grow: 1;
}
<div class="container my-4">
<!--Carousel Wrapper-->
<div id="multi-item-example" class="carousel slide carousel-multi-item carousel-equal-heights" data-ride="carousel">
<!--Controls-->
<div class="controls-top">
<a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
<!--/.Controls-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-sm-4 d-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="row">
<div class="col-sm-4 d-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(47).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(48).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="row">
<div class="col-sm-4 d-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(53).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(45).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(51).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.Third slide-->
</div>
<!--/.Slides-->
</div>
<!--/.Carousel Wrapper-->
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"></script>
I've got 3 buttons, sort of a filter (Smaller/Same/Bigger) that I would like to use with Isotope.js. I looked at the documentation all the time but still could not figure out how to make it work. In my opinion, everything is set good but it is still not working as it should be, as a filter that would show only items with exact class.
This is HTML:
<div id="mouse-buttons-wrapper">
<div class="btn-group filter-button-group" id="mouse-buttons">
<button type="button" class="button btn btn-lg btn-outline-warning" id="Smaller"
data-filter=".smaller">Smaller</button>
<button type="button" class="btn btn-lg btn-outline-warning" id="Same">Same</button>
<button type="button" class="btn btn-lg btn-outline-warning" id="Bigger">Bigger</button>
</div>
</div>
<div class="btn-group" id="mouse-buttons"></div>
<div class="container" id="mouses">
<div class="row row-cols-1 row-cols-md-5 g-4 text-justify grid">
<div class="col grid-item smaller">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
Go somewhere
</div>
</div>
</div>
<div class="col grid-item">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
Go somewhere
</div>
</div>
</div>
<div class="col grid-item">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
Go somewhere
</div>
</div>
</div>
<div class="col grid-item">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
Go somewhere
</div>
</div>
</div>
<div class="col grid-item">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</div>
And my Javascript I for isotope settings:
$('.grid').isotope({
// options...
itemSelector: '.grid-item',
masonry: {
columnWidth: 200
}
});
// filters
$(".grid").isotope({
filter: '.smaller'
});
$(".grid").isotope({
filter: '.same'
});
$(".grid").isotope({
filter: '.bigger'
});
})(jQuery); // End of use strict
// init Isotope
var $grid = $('.grid').isotope({
// options
});
// filter items on button click
$('.filter-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({
filter: filterValue
});
$('.filter-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({
filter: filterValue
});
I would appreciate any help, I am seriously stuck on this for a long time. Thanks a lot.
You are not following the basic structure of isotope. Kindly follow the below structure :
<html>
<div id="mouse-buttons-wrapper">
<div class="btn-group filter-button-group" id="mouse-buttons">
<button type="button" class="button btn btn-lg btn-outline-warning" id="Smaller" data-filter=".smaller">Smaller</button>
<button type="button" class="btn btn-lg btn-outline-warning" id="Same" data-filter=".same">Same</button>
<button type="button" class="btn btn-lg btn-outline-warning" id="Bigger" data-filter=".bigger">Bigger</button>
</div>
</div>
<div class="container" id="mouses">
<div class="row row-cols-1 row-cols-md-5 g-4 text-justify grid">
<div class="col grid-item smaller">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
Go somewhere
</div>
</div>
</div>
<div class="col grid-item same">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
Go somewhere
</div>
</div>
</div>
<div class="col grid-item bigger">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
Go somewhere
</div>
</div>
</div>
<div class="col grid-item smaller">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
Go somewhere
</div>
</div>
</div>
<div class="col grid-item bigger">
<div class="card">
<img src="..." class="card-img-top img-fluid" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</html>
<script type="text/javascript">
jQuery(document).ready(function($) {
var $grid = $('.grid').isotope({
// options...
itemSelector: '.grid-item',
masonry: {
columnWidth: 200
}
});
$("#mouse-buttons").on("click", "btn", function() {
var filterValue = $( this ).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- When click on image -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;">
<figcaption class="img-title"> </figcaption>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="panel panel-default" style="margin-top: 7px;">
<div class="photo-gallary-head panel-heading ">
<h4 title="Photo Gallery" class="photo-gallary-head-name"> Photo Gallery </h4>
</div>
<div class="panel-body">
<div class="img-t humbnail">
<div class="carousel slide" id="myCarousel1" data-ride="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<!--/item-->
<div class="item active">
<div class="row">
<div class="col-xs-3">
<a href="#x" class="pop"><img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-1.jpg">
<figcaption class="img-title">A caption for the above image.</figcaption></a>
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-2.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-3.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-4.jpg">
</div>
</div>
</div>
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-5.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-6.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-7.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-8.jpg">
</div>
</div>
</div>
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-9.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-10.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-11.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-12.jpg">
</div>
</div>
</div>
<!--/item-->
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-13.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-14.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-15.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-16.jpg">
</div>
</div>
</div>
<div class="item ">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-17.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-18.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-19.jpg">
</div>
<div class="col-xs-3">
<img class="img-responsive" alt="Image" src="~/Images/PhotoGallery/pg-20.jpg">
</div>
</div>
</div>
<!--/item-->
</div>
</div>
<div id="carouselButtons" style="text-align:center; margin-top:20px">
<a class="left1 carousel-control1" href="#myCarousel1
" data-slide="prev" title="Previous"><i class="fa fa-angle-left"></i></a>
<button id="pauseButton" type="button" class="btn btn-default btn-md" title="Play">
<i class="fa fa-play-circle" style="font-size:20px"></i>
</button>
<button id="playButton" type="button" class="btn btn-default btn-md" title="Pause">
<i class="fa fa-pause-circle" style="font-size:20px"></i>
</button>
<a class="right1 carousel-control1" href="#myCarousel1" data-slide="next" title="next"><i class="fa fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
I have done preview the image with the help of model popup, but need show same image caption when click on image. In this code this is the thumbnail slider with image preview. Here some of the missing file, it is not working. I don't want to show by title but show by caption. This is the thumbnail slider.
You can try to set title or alt tag into image, i think it will take automatically as caption.
Or can you give me your slider jquery url