Masonry images design issue with MaterializeCSS "materialboxed" class - javascript

I had created masonry images design with pure CSS.
Link here to codepen (only html and css) No materialize CSS and JS
However, I want the effect of `materialboxed` class from materializeCSS
Link to materialbox class from materializeCSS
The problem is that when I add materialboxed class to image, the masonry layout is changed
link to codepen with masonary design + materializeCSS
Expected Result
Actual Result
Expected Result
.gallery {
position: relative;
height: auto;
width: 100%;
margin: auto;
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 2vh;
grid-auto-flow: dense;
}
.gallery .img {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.gallery .img:first-child {
grid-column-start: span 2;
grid-row-start: span 2;
}
.gallery .img:nth-child(2n + 3) {
grid-row-start: span 2;
}
.gallery .img:nth-child(4n + 5) {
grid-column-start: span 2;
grid-row-start: span 2;
}
.gallery .img:nth-child(6n + 7) {
grid-row-start: span 1;
}
.gallery .img:nth-child(8n + 9) {
grid-column-start: span 1;
grid-row-start: span 1;
}
.gallery .img img {
height: 100%;
width: 100%;
object-fit: cover;
filter: brightness(0.5) grayscale(100);
transition: all 0.3s ease-in-out;
}
.gallery .img:hover img {
filter: brightness(1) grayscale(0);
}
#media only screen and (max-width: 768px) {
.gallery {
grid-template-columns: auto auto auto;
}
.gallery .img img {
filter: brightness(1) grayscale(0);
}
}
#media only screen and (max-width: 425px) {
.gallery {
display: block;
}
.gallery .img {
display: block;
width: 100%;
height: 100%;
margin: 10px 0;
}
.gallery .img img {
display: block;
filter: brightness(1) grayscale(0);
}
}
<section class="container">
<div class="gallery">
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img src="https://placeimg.com/640/480/any" alt="image">
</div>
</div>
</section>
Example with design not working with class materializedbox
document.addEventListener("DOMContentLoaded", function () {
var elems = document.querySelectorAll(".materialboxed");
M.Materialbox.init(elems);
});
.gallery {
position: relative;
height: auto;
width: 100%;
margin: auto;
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 2vh;
grid-auto-flow: dense;
}
.gallery .img {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.gallery .img:first-child {
grid-column-start: span 2;
grid-row-start: span 2;
}
.gallery .img:nth-child(2n + 3) {
grid-row-start: span 2;
}
.gallery .img:nth-child(4n + 5) {
grid-column-start: span 2;
grid-row-start: span 2;
}
.gallery .img:nth-child(6n + 7) {
grid-row-start: span 1;
}
.gallery .img:nth-child(8n + 9) {
grid-column-start: span 1;
grid-row-start: span 1;
}
.gallery .img img {
height: 100%;
width: 100%;
object-fit: cover;
filter: brightness(0.5) grayscale(100);
transition: all 0.3s ease-in-out;
}
.gallery .img:hover img {
filter: brightness(1) grayscale(0);
}
#media only screen and (max-width: 768px) {
.gallery {
grid-template-columns: auto auto auto;
}
.gallery .img img {
filter: brightness(1) grayscale(0);
}
}
#media only screen and (max-width: 425px) {
.gallery {
display: block;
}
.gallery .img {
display: block;
width: 100%;
height: 100%;
margin: 10px 0;
}
.gallery .img img {
display: block;
filter: brightness(1) grayscale(0);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<section class="container">
<div class="gallery">
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
</div>
</section>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

You can add full width and height to material-placeholder to get it working.
document.addEventListener("DOMContentLoaded", function () {
var elems = document.querySelectorAll(".materialboxed");
M.Materialbox.init(elems);
});
.gallery {
position: relative;
height: auto;
width: 100%;
margin: auto;
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 2vh;
grid-auto-flow: dense;
}
.gallery .img {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.gallery .img:first-child {
grid-column-start: span 2;
grid-row-start: span 2;
}
.gallery .img:nth-child(2n + 3) {
grid-row-start: span 2;
}
.gallery .img:nth-child(4n + 5) {
grid-column-start: span 2;
grid-row-start: span 2;
}
.gallery .img:nth-child(6n + 7) {
grid-row-start: span 1;
}
.gallery .img:nth-child(8n + 9) {
grid-column-start: span 1;
grid-row-start: span 1;
}
.gallery .img img {
height: 100%;
width: 100%;
object-fit: cover;
filter: brightness(0.5) grayscale(100);
transition: all 0.3s ease-in-out;
}
.gallery .img:hover img {
filter: brightness(1) grayscale(0);
}
.material-placeholder {
position: relative;
width: 100%;
height: 100%;
}
#media only screen and (max-width: 768px) {
.gallery {
grid-template-columns: auto auto auto;
}
.gallery .img img {
filter: brightness(1) grayscale(0);
}
}
#media only screen and (max-width: 425px) {
.gallery {
display: block;
}
.gallery .img {
display: block;
width: 100%;
height: 100%;
margin: 10px 0;
}
.gallery .img img {
display: block;
filter: brightness(1) grayscale(0);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<section class="container">
<div class="gallery">
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
<div class="img">
<img class="materialboxed" src="https://placeimg.com/640/480/any" alt="image">
</div>
</div>
</section>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Related

How can I change the value of CSS custom property by 1 on button click using jQuery?

How can I change the value of css custom property by 1 on button click using jQuery?
I want to change the value by 1 when the next button is clicked, I tried to use this x variable and then add one to it whenever the next button is clicked but it didn't work. What should i do to get the code working, if I want the x variable to increase by 1 when i click on the next button.
$('.carouselnav.next').click(function(){
var x = 0;
$(":root")[0].style.setProperty("--slider-index", x++);
})
*{
margin:0;
padding:0;
box-sizing:border-box;
}
:root{
--handle-size:3rem;
--img-gap:.25rem;
--slider-index:1;
--items-per-screen:5;
}
body{
background:#f3f3f3;
}
.container{
width:100%;
position:relative;
}
.carouselcontainer{
max-width:1360px;
margin:50px auto;
background:#f1f1f1;
position:relative;
overflow:hidden;
}
.caroufredsel_wrapper{
width:100%;
}
.shopWindow{
display:flex;
justify-content:space-between;
transform: translateX(calc(var(--slider-index) * -100%));
transition:transform 0.9s linear;
}
.shopWindow .grid-unit {
flex-shrink: 0;
width: 144px;
/*width: calc(100% / 5);*/
width:calc(100% / var( --items-per-screen));
max-width:100%;
padding-right: 5px !important;
margin-right: 0 !important;
height: 460px !important;
}
.shopWindow .thumb{
position: relative;
overflow: hidden;
padding: 45px 10px;
background: #fff;
}
.shopWindow .grid-unit .grid-unit-inner .item .thumb .img-responsive {
display:block;
margin: 0 auto;
}
.shopWindow .item .itemInfo {
padding: 20px 0;
background: #fafafa;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
font-weight: 500;
text-align: center;
}
.shopWindow .item .trademark {
margin-bottom: 4px;
}
.shopWindow .item .title {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 9px;
}
.shopWindow .item .trademark a {
line-height: 16px;
font-size: 14px;
color: #000;
font-weight: 600;
text-transform: uppercase;
}
.shopWindow .item .title a {
line-height: 19px;
font-size: 14px;
color: #000;
text-decoration: none;
font-weight: 400;
}
.shopWindow .item .campaignContainer {
display: flex;
margin-bottom: 10px;
height: 30px;
}
.shopWindow .item .campaignContainer .priceContainer {
display: flex;
width: 100%;
font-family: 'Inter',sans-serif;
justify-content: center;
}
.shopWindow .item .campaignContainer .priceContainer .price, .shopWindow .item .campaignContainer .priceContainer .discount {
color: #303030;
font-weight: 700;
display: inline-block;
font-size: 18px;
line-height: 27px;
}
.carouselcontainer .carouselnav {
background-color: transparent !important;
background-image: none !important;
position: absolute;
background-color: #ececec;
background-repeat: no-repeat;
background-position: center center;
opacity: 0.8;
top: 0;
height: 100%;
width: 30px;
}
div.carouselcontainer.horizontal a.carouselnav.prev {
left: 0;
}
div.carouselcontainer.horizontal a.carouselnav.next {
right: 4px;
}
.carouselcontainer.horizontal .carouselnav.next:before {
content: '>';
}
.carouselcontainer.horizontal .carouselnav.prev:before {
content: '<';
}
.carouselcontainer a.carouselnav {
visibility: visible !important;
}
.carouselcontainer .carouselnav:before {
font-family: FontAwesome;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
transform: translateY(-50%);
font-size: 40px;
opacity: 0.5;
}
.carouselcontainer .carouselnav:hover {
background-color: #e0e0e0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="carouselcontainer horizontal">
<div class="caroufredsel_wrapper">
<div class="shopWindow">
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</img>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</img>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carouselnav next" href="#">
</a>
<a class="carouselnav prev" href="#">
</a>
</div>
</div>
Use CSSStyleDeclaration.getPropertyValue() to get the current --slider-index value, assign to a variable, such as x, and pre-increment it's value, as in: ++x.
For example:
$('.carouselnav.next').click(function(){
let x = $(":root")[0].style.getPropertyValue("--slider-index");
$(":root")[0].style.setProperty("--slider-index", ++x);
console.log(x);
})
*{
margin:0;
padding:0;
box-sizing:border-box;
}
:root{
--handle-size:3rem;
--img-gap:.25rem;
--slider-index:0;
--items-per-screen:5;
}
body{
background:#f3f3f3;
}
.container{
width:100%;
position:relative;
}
.carouselcontainer{
max-width:1360px;
margin:50px auto;
background:#f1f1f1;
position:relative;
overflow:hidden;
}
.caroufredsel_wrapper{
width:100%;
}
.shopWindow{
display:flex;
justify-content:space-between;
transform: translateX(calc(var(--slider-index) * -100%));
transition:transform 0.9s linear;
}
.shopWindow .grid-unit {
flex-shrink: 0;
width: 144px;
/*width: calc(100% / 5);*/
width:calc(100% / var( --items-per-screen));
max-width:100%;
padding-right: 5px !important;
margin-right: 0 !important;
height: 460px !important;
}
.shopWindow .thumb{
position: relative;
overflow: hidden;
padding: 45px 10px;
background: #fff;
}
.shopWindow .grid-unit .grid-unit-inner .item .thumb .img-responsive {
display:block;
margin: 0 auto;
}
.shopWindow .item .itemInfo {
padding: 20px 0;
background: #fafafa;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
font-weight: 500;
text-align: center;
}
.shopWindow .item .trademark {
margin-bottom: 4px;
}
.shopWindow .item .title {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 9px;
}
.shopWindow .item .trademark a {
line-height: 16px;
font-size: 14px;
color: #000;
font-weight: 600;
text-transform: uppercase;
}
.shopWindow .item .title a {
line-height: 19px;
font-size: 14px;
color: #000;
text-decoration: none;
font-weight: 400;
}
.shopWindow .item .campaignContainer {
display: flex;
margin-bottom: 10px;
height: 30px;
}
.shopWindow .item .campaignContainer .priceContainer {
display: flex;
width: 100%;
font-family: 'Inter',sans-serif;
justify-content: center;
}
.shopWindow .item .campaignContainer .priceContainer .price, .shopWindow .item .campaignContainer .priceContainer .discount {
color: #303030;
font-weight: 700;
display: inline-block;
font-size: 18px;
line-height: 27px;
}
.carouselcontainer .carouselnav {
background-color: transparent !important;
background-image: none !important;
position: absolute;
background-color: #ececec;
background-repeat: no-repeat;
background-position: center center;
opacity: 0.8;
top: 0;
height: 100%;
width: 30px;
}
div.carouselcontainer.horizontal a.carouselnav.prev {
left: 0;
}
div.carouselcontainer.horizontal a.carouselnav.next {
right: 4px;
}
.carouselcontainer.horizontal .carouselnav.next:before {
content: '>';
}
.carouselcontainer.horizontal .carouselnav.prev:before {
content: '<';
}
.carouselcontainer a.carouselnav {
visibility: visible !important;
}
.carouselcontainer .carouselnav:before {
font-family: FontAwesome;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
transform: translateY(-50%);
font-size: 40px;
opacity: 0.5;
}
.carouselcontainer .carouselnav:hover {
background-color: #e0e0e0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="carouselcontainer horizontal">
<div class="caroufredsel_wrapper">
<div class="shopWindow">
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</img>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214369/bergamont-grandurance-rd-5-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</img>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
<div class="grid-unit">
<div class="grid-unit-inner">
<div class="item">
<div class="thumb">
<div class="badges"></div>
<a href="" >
<img class="img-responsive lazy" src="https://03.cdn37.se/p6/images/2.2214257/trek-marlin-6-2022.jpeg" alt="">
</a>
</div>
<div class="itemInfo">
<div class="trademark">
KTM
</div>
<div class="title">
Wild Cross 24
</div>
<div class="campaignContainer">
<div class="priceContainer">
<span class="price">6490</span>
</div>
</div>
<div class="bottom-container"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carouselnav next" href="#">
</a>
<a class="carouselnav prev" href="#">
</a>
</div>
</div>
If you don't need to use the --slider-index value in that code block again, you can skip assigning to a variable and just add one to the current --slider-index value:
$('.carouselnav.next').click(function(){
$(":root")[0].style.setProperty(
"--slider-index",
1 + $(":root")[0].style.getPropertyValue("--slider-index")
);
})
You have two problems:
Everytime click Next button, your x variable is re-declared as 0. You should define it outside the callback function.
$(":root")[0].style.setProperty("--slider-index", x++); will set --slider-index property by 0 and then increase x value by 1. You should use ++x to increase x value by 1 before assigning to --slider-index property.

Image positioning in image gallery

I'm trying to keep leaderboard/photographer image always right top position even in responsive.
Here is my code
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
img {
position: relative;
overflow: hidden;
top: 0;
left: 0;
opacity: 1;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
padding: 0 20px;
}
.column {
-ms-flex: 25%;
/* IE10 */
flex: 25%;
max-width: 25%;
padding: 10px;
}
.column img {
margin-top: 20px;
vertical-align: middle;
}
#overlay:hover {
overflow: hidden;
top: 0;
left: 0;
opacity: 0.7;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
<html>
<body>
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
</div>
<div class="column">
<a class="js-leaderboard" href="#"><img src="https://i.imgur.com/C5vLv9p.png" id="overlay" style="width:100%"></a>
<img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
</div>
</div>
</div>
</body>
</html>
If you see a pexels website, a leaderboard always keeps positioning the same on the right top. Can I do this? moreover, I have added a class js-leaderboard for this image.
This can be done using order property of flex-items. I have re-ordered the columns in small screens.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
img {
position: relative;
overflow: hidden;
top: 0;
left: 0;
opacity: 1;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.row {
display: -ms-flexbox;
/* IE10 */
display: flex;
-ms-flex-wrap: wrap;
/* IE10 */
flex-wrap: wrap;
padding: 0 20px;
}
.column {
-ms-flex: 25%;
/* IE10 */
flex: 25%;
max-width: 25%;
padding: 10px;
}
.column img {
margin-top: 20px;
vertical-align: middle;
}
#overlay:hover {
overflow: hidden;
top: 0;
left: 0;
opacity: 0.7;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
order: 3;
}
.row > .column:first-child{
order: 1;
}
.right-top-col{
order: 2;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
<html>
<body>
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
</div>
<div class="column">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/falls2.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/nature.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mist.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/paris.jpg" id="overlay" style="width:100%">
</div>
<div class="right-top-col column">
<a class="js-leaderboard" href="#"><img src="https://i.imgur.com/C5vLv9p.png" id="overlay" style="width:100%"></a>
<img src="https://www.w3schools.com/w3images/ocean.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/wedding.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/mountainskies.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/rocks.jpg" id="overlay" style="width:100%">
<img src="https://www.w3schools.com/w3images/underwater.jpg" id="overlay" style="width:100%">
</div>
</div>
</div>
</body>
</html>

I am trying to open a modal window with some effect

The openModal() function gets called on the click of a function.
I checked on Google that the transition property doesn't work with the display property in CSS. The other way round is to do it with opacity. But I am unable to call animation from JavaScript for CSS property.
var whm, whs, whd, whc;
function openModal(a) {
whm="myModal"+a;
whs="mySlides"+a;
whd="demo"+a;
whc="caption"+a;
document.getElementById(whm).style.display = "block";
document.getElementById(whm).style.opacity = "1";
// document.getElementById(whm).classList.add('didLoad');
//document.getElementById(whm).className += " didLoad";
document.getElementById(whm).style.webkitTransition = "background 2s";
}
.modal {
display: none;
opacity: 0;
-webkit-transition: opacity 2s;
transition: opacity 2s;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
Whole code
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
opacity: 0;
-webkit-transition: opacity 2s;
transition: opacity 2s;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
.didLoad
{
background-color: black;
transition: background-color 2s;
-webkit-transition: background-color 2s;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>
<body>
<h2 style="text-align:center">Lightbox</h2>
<div class="row">
<div class="column">
<img src="http://placehold.it/1900x1400" style="width:100%" onclick="openModal(1);currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://placehold.it/1900x1400" style="width:100%" onclick="openModal(2);currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://placehold.it/1900x1400" style="width:100%" onclick="openModal(3);currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="http://placehold.it/1900x1400" style="width:100%" onclick="openModal(4);currentSlide(1)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal1" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides1">
<div class="numbertext">1 / 4</div>
<img src="http://placehold.it/720x301" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">2 / 4</div>
<img src="http://placehold.it/720x302" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">3 / 4</div>
<img src="http://placehold.it/720x303" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">4 / 4</div>
<img src="http://placehold.it/720x304" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption1"></p>
</div>
<div class="column">
<img class="demo1 cursor" src="http://placehold.it/1900x1401" style="width:100%; height:100px;" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo1 cursor" src="http://placehold.it/1900x1402" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo1 cursor" src="http://placehold.it/1900x1403" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo1 cursor" src="http://placehold.it/1900x1404" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<div id="myModal2" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides2">
<div class="numbertext">1 / 4</div>
<img src="http://placehold.it/720x201" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">2 / 4</div>
<img src="http://placehold.it/720x202" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">3 / 4</div>
<img src="http://placehold.it/720x203" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">4 / 4</div>
<img src="http://placehold.it/720x204" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption2"></p>
</div>
<div class="column">
<img class="demo2 cursor" src="http://placehold.it/1900x1301" style="width:100%; height:100px;" onclick="currentSlide(1)" alt="bhai">
</div>
<div class="column">
<img class="demo2 cursor" src="http://placehold.it/1900x1302" style="width:100%" onclick="currentSlide(2)" alt="bhai bhai">
</div>
<div class="column">
<img class="demo2 cursor" src="http://placehold.it/1900x1303" style="width:100%" onclick="currentSlide(3)" alt="bhai bhai bhai">
</div>
<div class="column">
<img class="demo2 cursor" src="http://placehold.it/1900x1304" style="width:100%" onclick="currentSlide(4)" alt="fuck off">
</div>
</div>
</div>
<div id="myModal3" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides3">
<div class="numbertext">1 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">2 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">3 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">4 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption3"></p>
</div>
<div class="column">
<img class="demo3 cursor" src="http://placehold.it/1900x1400" style="width:100%; height:100px;" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo3 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo3 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo3 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<div id="myModal4" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides4">
<div class="numbertext">1 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides4">
<div class="numbertext">2 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides4">
<div class="numbertext">3 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<div class="mySlides4">
<div class="numbertext">4 / 4</div>
<img src="http://placehold.it/720x300" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption3"></p>
</div>
<div class="column">
<img class="demo4 cursor" src="http://placehold.it/1900x1400" style="width:100%; height:100px;" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo4 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo4 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo4 cursor" src="http://placehold.it/1900x1400" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
<script>
var whm, whs, whd, whc;
function openModal(a) {
whm="myModal"+a;
whs="mySlides"+a;
whd="demo"+a;
whc="caption"+a;
document.getElementById(whm).style.display = "block";
document.getElementById(whm).style.opacity = "1";
// document.getElementById(whm).classList.add('didLoad');
//document.getElementById(whm).className += " didLoad";
document.getElementById(whm).style.webkitTransition = "background 2s";
}
function closeModal() {
document.getElementById(whm).style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName(whs);
var dots = document.getElementsByClassName(whd);
var captionText = document.getElementById(whc);
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>
Transitions don't work with display but with a new class and CSS animations, you can do some nice things (I only animated the 'show') :
var show = document.getElementById('show');
var hide = document.getElementById('hide');
show.addEventListener("click", function() {
document.getElementById('hello').classList.add("active");
});
hide.addEventListener("click", function() {
document.getElementById('hello').classList.remove("active");
});
#content {
position: relative;
text-align: center;
}
#hello {
position: absolute;
padding: 10px;
background-color: yellow;
text-align: center;
left: 0;
right: 0;
display: none;
opacity: 0;
}
#hello.active {
display: block;
opacity: 1;
animation: fadeIn .4s;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
<div id="content">
<div id="hello">
<p>Hello world !</p>
<button id="hide">Hide</button>
</div>
<button id="show">Show</button>
</div>

Div that doesnt cover its content

I have really strange problem.
I have got webpage, that load from ajax second page into Content Div.
The main problem, is that Content div doesn't care about covering all items in him.
There is Code:
.Main_Loaded {
display: flex;
flex-direction: column;
min-width: 99%;
height: auto;
position: absolute;
bottom: 90px;
background-color: grey;
height: auto;
align-self: center;
justify-content: center;
text-align: center;
vertical-align: middle;
z-index: 2;
animation: Colour_Change_Grey;
animation-iteration-count: 1;
animation-duration: 5s;
transition: all 1s;
border-radius: 15px;
}
.Main_Loaded .Title {
margin-top: 30px;
height: 15%;
}
.Main_Loaded .Title span {
font: Serfi;
font-size: 16px;
animation: Show_up;
animation-iteration-count: 1;
animation-duration: 3s;
}
.Main_Loaded .Content {
margin-bottom: 20px;
height: 80%;
display: flex;
flex-direction: row;
}
.Main_Loaded .Content #Image {
min-height: 700px;
width: 45%;
overflow: hidden;
border: 3px solid black;
animation: Show_up;
animation-duration: 3s;
}
.Main_Loaded .Content #Image img {
animation: Show_up;
animation-duration: 0.5s;
animation-iteration-count: 1;
animation-delay: 2s;
}
.Main_Loaded .Content #Info {
animation: Show_up;
animation-duration: 3s;
border: 3px solid white;
width: 55%;
}
<div class="Main_Loaded">
<div class="Title">
<span>
Nasza oferta
</span>
</div>
<div class="Content">
<div id="Image">
<div class="owl-carousel">
<img class="img" class="owl-lazy" src="img/1.jpg" />
<img class="img" class="owl-lazy" src="img/2.jpg" />
<img class="img" class="owl-lazy" src="img/3.jpg" />
<img class="img" class="owl-lazy" src="img/4.jpg" />
<img class="img" class="owl-lazy" src="img/5.jpg" />
<img class="img" class="owl-lazy" src="img/6.jpg" />
<img class="img" class="owl-lazy" src="img/7.jpg" />
<img class="img" class="owl-lazy" src="img/8.jpg" />
<img class="img" class="owl-lazy" src="img/9.jpg" />
<img class="img" class="owl-lazy" src="img/10.jpg" />
<img class="img" class="owl-lazy" src="img/11.jpg" />
<img class="img" class="owl-lazy" src="img/12.jpg" />
<img class="img" class="owl-lazy" src="img/13.jpg" />
<img class="img" class="owl-lazy" src="img/14.jpg" />
<img class="img" class="owl-lazy" src="img/15.jpg" />
<img class="img" class="owl-lazy" src="img/16.jpg" />
<img class="img" class="owl-lazy" src="img/17.jpg" />
<img class="img" class="owl-lazy" src="img/18.jpg" />
<img class="img" class="owl-lazy" src="img/19.jpg" />
<img class="img" class="owl-lazy" src="img/20.jpg" />
<img class="img" class="owl-lazy" src="img/22.jpg" />
<img class="img" class="owl-lazy" src="img/21.jpg" />
</div>
</div>
<div id="Info">
dfsdfdsfdsdsadasdasfgjdfklgndfgjbdklfjgnhdklfjghklj
</div>
</div>
</div>
And there is page, to see error.[DELETED]
The Problem is JQuery AJAX.
After copy content into one file, and left code as is, the scripts start working :)

Netflix style image continuous carousels with mouse-over with Bootstrap support

Can someone suggest any Twitter Bootstrap supported jquery plugins that can provide Netflix style continuously scrolling image carousel with mouse-over?
I have already explored the carousel provided in Bootstrap JS library but it requires click of button and is not continuously scrolling, but instead just scrolls the full set of images under an item.
Any info of such cool plugins is greatly appreciated
Though not bootstrap/jquery based, but even better (pure css!), I came across one which is a decent place to start at and extend
HTML:
<div class="contain">
<h1>Pure CSS Netflix Video Carousel</h1>
<p>
Inspired by Eli White's article Performant CSS Animations: Netflix Case Study, his example pen, and Matt Taylor's CSS-only version.
</p>
<div class="row">
<div class="row__inner">
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-2.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-3.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-4.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-5.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-6.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-7.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-8.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-9.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-10.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-11.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-12.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-13.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-14.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-15.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-16.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-17.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-18.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-19.jpg" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
Top Gear
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
body,
html {
padding: 0 10px;
margin: 0;
background: #0e0f11;
color: #ecf0f1;
font-family: 'Open Sans', sans-serif;
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
h1,
p {
text-align: center;
}
p {
width: 100%;
max-width: 500px;
margin: auto;
}
a:link,
a:hover,
a:active,
a:visited {
-webkit-transition: color 150ms;
transition: color 150ms;
color: #95a5a6;
text-decoration: none;
}
a:hover {
color: #7f8c8d;
text-decoration: underline;
}
.contain {
width: 100%;
}
.row {
overflow: scroll;
width: 100%;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 70.3125px 0;
padding-bottom: 10px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 140.625px;
margin-right: 10px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 140.625px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0)));
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:after {
margin-top: -25px;
margin-left: -25px;
width: 50px;
height: 50px;
border: 3px solid #ecf0f1;
line-height: 50px;
text-align: center;
border-radius: 100%;
background: rgba(0,0,0,0.5);
z-index: 1;
}
.tile__details:before {
content: '▶';
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
-webkit-transform: translate3d(-62.5px, 0, 0);
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover ~ .tile {
-webkit-transform: translate3d(125px, 0, 0);
transform: translate3d(125px, 0, 0);
}

Categories

Resources