how to use different swiperJS in one Html Page

how to use different swiperJS in one Html Page - javascript

I need to make two swiperjs in one html page but isn't working. I trying tow change and add new class but the result its same..
my Html
<!-- swiper1 Services Sections -->
<div class="service__container container ">
<div class="service__title">
<h1>services</h1>
</div>
<div class="swiper1 mySwiper1">
<div class="swiper-wrapper">
<div class="card swiper-slide1">
<img class="img__card" src="/img/Digital.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Our service one</b></h4>
<p class="card__suptitle">Our service two</p>
</div>
</div>
<div class="card swiper-slide1">
<img class="img__card" src="/img/coding.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Lorem ipsum dolor sit, amet consectetur</b></h4>
<p class="card__suptitle">Lorem ipsum dolor sit, amet consectetur</p>
</div>
</div>
<!-- swiper2 -->
<div class="customers__container container swiper mySwiper1">
<div class="swiper-wrapper customers__img">
<img class="swiper-slide" src="/img/customers1.png" style="width:100%">
<img class="swiper-slide" src="/img/custopmer2.png" style="width:100%">
<img class="swiper-slide" src="/img/customer3.png" style="width:100%">
</div>
</div>
</div>
and the js code for swiper1 and swiper2:
var swiper1 = new Swiper(".mySwiper1", {
effect: "cube",
grabCursor: true,
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
},
pagination: {
el: ".swiper-pagination",
},
});
//swiper2
var swiper2 = new Swiper(".mySwiper2", {
effect: "cards",
grabCursor: true,
});
the swiper2 its working as I want. but swiper1 not working.

Basic example
Your first slider missing the mandatory HTML layout (swiper instead of swiper1 and swiper-slide instead of swiper-slide1).
https://swiperjs.com/get-started#add-swiper-html-layout
Wrong:
<div class="swiper1 will_not_work">
<!-- const swiper = new Swiper('.will_not_work', { -->
Correct:
<div class="swiper will_work">
<!-- const swiper = new Swiper('.will_work', { -->
snippet
let swiper_setting = {
spaceBetween: 100,
pagination: {
el: '.swiper-pagination',
}
}
let swiper_setting_two = {
spaceBetween: 200,
}
let swiper_1 = new Swiper("[slider_one]", swiper_setting);
let swiper_2 = new Swiper("[slider_two]", swiper_setting_two);
html,
body {
background: #403F6B;
}
.swiper {
width: 100%;
height: 100%;
position: relative;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: 200px!important;
/* Center slide text vertically */
display: flex;
margin-bottom: 40px!important;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
<script src="https://unpkg.com/swiper#8.3.2/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper#8.3.2/swiper-bundle.min.css" rel="stylesheet"/>
<!-- Slider main container -->
<div class="swiper thumbnails-grid" slider_one>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper thumbnails-grid" slider_two>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
Loop throw example (multiple sliders with same setting):
You can take the example above and loop throw all sliders (Lets say for real estate pagelist with slider for each house card **like airbnb):
let swiper_setting = {
spaceBetween: 100,
pagination: {
el: '.swiper-pagination',
}
}
var swiper_nodes = document.querySelectorAll('.swiper');
/* loop throw */
[].forEach.call(swiper_nodes, function(swiper_node) {
// do whatever
let swiper = new Swiper(swiper_node, swiper_setting);
});
html,
body {
background: #403F6B;
}
main{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 3px;
}
.swiper {
width: 100%;
height: 100%;
position: relative;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: 200px!important;
/* Center slide text vertically */
display: flex;
margin-bottom: 40px!important;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
<script src="https://unpkg.com/swiper#8.3.2/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper#8.3.2/swiper-bundle.min.css" rel="stylesheet"/>
<!-- Slider main container -->
<main>
<div class="swiper thumbnails-grid" slider_one>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper thumbnails-grid" slider_two>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper thumbnails-grid" slider_two>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a>Slide 1</a></div>
<div class="swiper-slide">Slide 2</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
</main>

Yes the constructor of Swiper takes as argument one element at a time. So you should loop all the items with a forEach for example.
EDIT:
I made some changes in your HTML to fix the issues.
var swiper1 = new Swiper(".mySwiper1", {
effect: "cube",
grabCursor: true,
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94,
},
pagination: {
el: ".swiper-pagination",
},
});
//swiper2
var swiper2 = new Swiper(".mySwiper2", {
effect: "cards",
grabCursor: true,
});
.swiper {
width: 300px;
height: 100px;
margin: 5px;
}
.swiper-slide {
background: yellow;
padding: 20px;
font-size: 32px;
}
.swiper-slide:nth-child(2) {
background: red;
}
.swiper-slide:nth-child(3) {
background: blue;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
<!-- swiper1 Services Sections -->
<div class="service__container container ">
<div class="service__title">
<h1>services</h1>
</div>
<div class="mySwiper1">
<div class="swiper-wrapper">
<div class="card swiper-slide">
<img class="img__card" src="/img/Digital.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Our service one</b></h4>
<p class="card__suptitle">Our service two</p>
</div>
</div>
<div class="card swiper-slide">
<img class="img__card" src="/img/coding.png" alt="Avatar" style="width:100%">
<div class="card__info">
<h4 class="card__title"><b>Lorem ipsum dolor sit, amet consectetur</b></h4>
<p class="card__suptitle">Lorem ipsum dolor sit, amet consectetur</p>
</div>
</div>
</div>
</div>
<!-- swiper2 -->
<div class="customers__container container swiper mySwiper2">
<div class="swiper-wrapper customers__img">
<img class="swiper-slide" src="/img/customers1.png" style="width:100%">
<img class="swiper-slide" src="/img/custopmer2.png" style="width:100%">
<img class="swiper-slide" src="/img/customer3.png" style="width:100%">
</div>
</div>
</div>

Related

Componenturl Context

I'm trying to make a componenturl right now so I can make a dynamic product page, I use bootstrap as css framework, it only works as long as I use the components from framework7, but I want to use my own styles.
The same with images, as soon as I link an image from my file server with the tag it doesn't work again, the same error code every time:
Uncaught (in promise) Error: TypeError: Cannot create property 'elm' on string '[object Object],[object Object]'
I just want to use my own style file or continue to use the bootstrap framework.
MyCode looks like this:
Routes.js
const MyComponent = (props, context) => {
// some component logic
let value = 'pipi';
let productnumber = props.id;
// return render function
return () => context.$h`
<div class="page">
<!-- Header -->
<div class="no-navbar">
<div class="page-content" style="height: auto;">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title"></div>
<div class="right"></div>
</div>
</div>
</div>
</div>
<div data-pagination='{"el": ".swiper-pagination"}' data-space-between="50"
style="position: relative; top:30px" class="swiper swiper-init demo-swiper">
<div class="swiper-pagination"></div>
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/Frame 71.png"></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
</div>
</div>
<style>
</style>
`;
}
var routes = [
// Index page
{
path: '/home/',
url: './pages/home.html',
options: {
transition: 'f7-fade',
},
},
{
path: '/finder/',
url: './pages/finder.html',
options: {
transition: 'f7-fade',
},
},
{
path: '/wishlist/',
url: './pages/wunschliste.html',
options:{
transition: 'f7-fade',
},
},
{
path: '/brands/',
url: './pages/brands.html',
options: {
transition: 'f7-fade',
},
},
{
path: '/allbrands/',
url: './pages/allbrands.html',
options:{
transition: 'f7-parallax',
},
},
{
path: '/account/',
url: './pages/account.html',
options:{
transition: 'f7-fade',
},
},
{
path: '/addcard/',
url: './pages/addcard.html',
options:{
transition: 'f7-cover-v',
},
},
{
path: '/karten-info/',
url: './pages/karten-info.html',
options:{
transition: 'f7-push',
},
},
{
path: '/product/:id',
component: MyComponent,
options:{
transition: 'f7-parallax',
},
},
{
path: '/product-layout/',
url: './pages/product.html',
},
{
path: '/damen-geschenke/',
url: './pages/navigation/women/geschenke.html',
options:{
transition: 'f7-parallax',
transition: 'router-transition-f7-parallax-backward',
},
},
];
app.js
// Dom7
var $ = Dom7;
// Theme
var theme = 'md';
if (document.location.search.indexOf('theme=') >= 0) {
theme = document.location.search.split('theme=')[1].split('&')[0];
}
// Preloader
setTimeout(function () {
$('.loader-screen').hide();
}, 2000);
// Init App
var app = new Framework7({
id: 'com.thirteendegree.shop',
el: '#app',
theme,
view : {
browserHistory: true,
},
// store.js,
store: store,
// routes.js,
routes: routes,
popup: {
closeOnEscape: true,
},
sheet: {
closeOnEscape: true,
},
popover: {
closeOnEscape: true,
},
actions: {
closeOnEscape: true,
},
vi: {
placementId: 'pltd4o7ibb9rc653x14',
},
});
var mainView = app.views.create('.view-main');
I want this page for my componenturl context
<div class="page">
<!-- Header -->
<section class="finder padding-5" style="padding-top: 50px;">
<div class="account">
<div class="account-details product-flex" >
<a style="padding: 0px;" href="#" class="back backlink"><img style="font-size: 18px; width: 30px;" src="img/icons/Back Arrow.svg"></a>
<a style="padding: 0px;" href="#" class="back backlink"><img style="font-size: 15px; width: 30px;" src="img/icons/Union.svg"></a>
</div>
</div>
</section>
<section class="productview">
<div class="page-content">
<div class="swiper swiper-init demo-swiper">
<div data-pagination='{"el": ".swiper-pagination"}' data-space-between="50" class="swiper swiper-init demo-swiper">
<div class="swiper-pagination"></div>
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="slider-img" src="img/Frame 71.png"></div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
</div>
</section>
<div class="product-information">
<h2 class="name">Jordan 1</h2>
<span class="brand2">Dior</span>
<div class="details">
<span class="details-header">Details</span>
<p>
<ul>
<li>100% Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>100% Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
</p>
</div>
</div>
<div class="navigation-bottom-product">
<div class="priceetc">
<div>
<img src="img/icons/Tag_black.svg">
</div>
<div class="text-align-right">
<span class="price">€ 11.000</span><br>
<span class="mwst">inkl. MwSt.</span>
</div>
</div>
<div class="addtocart">
<button class="addtocard-button">
<img src="img/icons/Bag_white.svg">
</button>
</div>
</div>
</div>

SwiperJS - How can I put next/previous arrows outside of my gallery container?

I would like the arrows to be outside of the image gallery container because it's hard to see them. I have tried removing the elements and placing them outside of the gallery-container, but I'm not getting any results.
Not sure if there is a better way on achieving this look or another simple javascript library?
var appendNumber = 4;
var prependNumber = 1;
var swiper = new Swiper('.swiper-container', {
slidesPerView: 2,
centeredSlides: false,
spaceBetween: -410,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
});
document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {
e.preventDefault();
swiper.prependSlide([
'<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>',
'<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>'
]);
});
document.querySelector('.prepend-slide').addEventListener('click', function (e) {
e.preventDefault();
swiper.prependSlide('<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>');
});
document.querySelector('.append-slide').addEventListener('click', function (e) {
e.preventDefault();
swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>');
});
document.querySelector('.append-2-slides').addEventListener('click', function (e) {
e.preventDefault();
swiper.appendSlide([
'<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>',
'<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>'
]);
});
.swiper-container {
width: 70%;
height: 500px;
margin-top: 50px;
position: relative;
padding: 0 60px
}
.arrow-left {
position: absolute;
top: 50%;
left: 0;
}
.arrow-right {
position: absolute;
top: 50%;
right: 0;
}
.swiper-container .swiper-slide img {
height: 400px;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: 40px !important;
}
swiper-button-prev {
background-color: white;
}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
content: 'next';
color: yellowgreen;
}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
content: 'prev';
color: yellowgreen;
}
<section class="dest-gallery-container">
<!-- Slider main container -->
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/img/home/dest-gal-1.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-2.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-3.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-4.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-5.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-6.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-7.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-8.png" alt="">
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</section>

Try this. They should be outside of swiper-container but within your dest-gallery-container. Also put swiper-pagination within swiper-wrapper.
<section class="dest-gallery-container">
<!-- Slider main container -->
<!-- Add Left Arrow-->
<div class="swiper-button-prev"></div>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/img/home/dest-gal-1.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-2.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-3.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-4.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-5.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-6.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-7.png" alt="">
</div>
<div class="swiper-slide">
<img src="/img/home/dest-gal-8.png" alt="">
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Add Right Arrow -->
<div class="swiper-button-next"></div>
</div>
</section>

owl carousal navigation coming in same line in html

i have a ready made owl carousal slider in which the images slide automatically and there is a navigation at the top, now i have added tow more sliders of the same. but the problem is the navigation arrows are coming in one line instead of its corresponding sliders like below:
<div class="owl-carousel" data-autoplay="true" data-items="1" data-sm-items="2" data-lg-items="3" data-xl-items="4" data-margin="30" data-mouse-drag="false" data-navigation-class="#owl-custom-nav-1">
i have tried using margin top and padding and all, but none of it is working, can anyone please tell mw how to make the arrows above its corresponding sliders. thanks

$(document).ready(function() {
$("#owl-demo, #owl-demo-1").each(function() {
$(this).owlCarousel({
items : 6, //10 items above 1000px browser width
itemsDesktop : [1000,6], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
});
// Custom Navigation Events
$(".next").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.next');})
$(".prev").click(function(){$(this).closest('.span12').find('.owl-carousel').trigger('owl.prev');})
});
#owl-demo .item, #owl-demo-1 .item{
background: #3fbf79;
padding: 30px 0px;
margin: 10px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
width: 190px;
}
.customNavigation{
text-align: center;
}
.customNavigation a{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo" class="owl-carousel">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
<div class="item">
<h1>9</h1>
</div>
<div class="item">
<h1>10</h1>
</div>
</div>
<div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
</div>
</div>
</div>
</div>
<div id="demo-1">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-demo-1" class="owl-carousel">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
<div class="item">
<h1>9</h1>
</div>
<div class="item">
<h1>10</h1>
</div>
</div>
<div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
</div>
</div>
</div>
</div>

Align div to bottom of Bootstrap4 card-body

I'm working with bootstraps cards. I have card-header and card-footer and they are working great. In the card-body I have a card-title. This title can take up 1 or 2 lines in the card-body. Also inside this card-body I have some information in a div. I want to align this informational div to the card-body bottom as I use row/col to align things nicely but because 1 card-title is 1 line and another is 2 lines when you look across cards in the page this additional information doesn't line up exactly between cards and bottom aligning would solve that I think.
So basically I want the orangered divs to line up at the bottom of their cards because then visually across cards they would look to line up.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
</style>
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>

I did a few things:
added position:absolute with some (24%) clearance from the bottom;
the container class implemented a width of 100%, which is why the box now went outside the boundary;
card-body class implemented a 20px padding
To get the exact styling, we removed the width 20px from the 100% width (from the cowntainer)
complete snippet below:
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
.orangeRedClass {
position: absolute;
bottom: 24%;
width: calc(100% - 40px) !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>

Two column three image combination layout

I'm just trying to make fluid responsive layout through <img src="" alt="" /> tags but I made it through background image.
Is there any way to make this layout with img tag ?
XD Example
Front End Code
html,
body {
height: 100%;
width: 100%;
}
.cmd-three-img-container {
margin-bottom: 30px;
height: 250px;
display: flex;
}
.cmd-main-img {
position: relative;
width: 50%;
height: 100%;
margin-left: 5px;
background: url(https://i.imgur.com/9Q9pgmR.jpg);
background-size: cover;
background-position: center;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.cmd-img-stacked {
width: 50%;
height: 100%;
}
.cmd-img-overlay {
padding-right: 10px;
padding-top: 10px;
}
.cmd-img-overlay h4 {
float: right;
font-size: 18px;
color: #fff;
}
.cmd-top-img,
.cmd-bottom-img {
width: 100%;
height: calc(50% - 2.5px);
}
.cmd-top-img {
background: url(https://i.imgur.com/9Q9pgmR.jpg);
background-size: cover;
background-position: center;
border-top-left-radius: 4px;
}
.cmd-bottom-img {
background: url(https://i.imgur.com/hxiPgcK.jpg);
background-size: cover;
background-position: center;
border-bottom-left-radius: 4px;
}
.cmd-top-img {
margin-bottom: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
</div>
</div>

You just split the child column within the parent column and add the bootstrap 4 default class d-flex align-items-stretch h-100 stretch the image until column end. set border-radis for corners separately as per your requirement. I hope this example you will find the solution.
.row.eqcol {
padding-right: 10px;
}
.row.eqcol div[class^="col-"] {
padding: 0;
padding-right: 5px;
}
.text-overlay h3 {
font-size: 20px;
color: #fff;
}
.text-overlay {
position: absolute;
font-size: 14px;
top: 5px;
right: 5px;
}
.cmd-three-img-container {
position: relative;
}
.cmd-three-img-container img {
object-fit: cover;
padding-bottom: 5px;
width: 100%;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container my-3">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="row eqcol">
<div class="col-6">
<div class="cmd-three-img-container left-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
</div>
</div>
<div class="col-6">
<div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<div class="text-overlay">
<h3>Office</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="row eqcol">
<div class="col-6">
<div class="cmd-three-img-container left-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
</div>
</div>
<div class="col-6">
<div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<div class="text-overlay">
<h3>Office</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="row eqcol">
<div class="col-6">
<div class="cmd-three-img-container left-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
</div>
</div>
<div class="col-6">
<div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<div class="text-overlay">
<h3>Office</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="row eqcol">
<div class="col-6">
<div class="cmd-three-img-container left-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
</div>
</div>
<div class="col-6">
<div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<div class="text-overlay">
<h3>Office</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

how to use different swiperJS in one Html Page - javascript

Related

Componenturl Context

SwiperJS - How can I put next/previous arrows outside of my gallery container?

owl carousal navigation coming in same line in html

Align div to bottom of Bootstrap4 card-body

Two column three image combination layout

Categories

Resources