Slick Slider: Get rid of partial/edge images in centerMode - javascript

I'm trying to create a custom slider using the Slick Slider jQuery plugin.
As I wanted to have the middle (active) image bigger than the other ones, I went with the centerMode which does just that. However, by default this mode shows partial images at the left and right edge of the slider.
Does anyone know or have an idea how to get rid of these? Thanks!
[Link to Codepen]
HTML:
<div class="col-md-12"> <!-- Text Navigation --> <div class="row hidden-phone" id="slider-thumbs">
<div class="col-lg-12">
<ul class="thumbnails">
<li class="col-lg-2">
<a class="thumbnail" id="carousel-selector-0">One</a>
</li>
<li class="col-lg-2">
<a class="thumbnail" id="carousel-selector-1">Two</a>
</li>
<li class="col-lg-2">
<a class="thumbnail" id="carousel-selector-2">Three</a>
</li>
<li class="col-lg-2">
<a class="thumbnail" id="carousel-selector-3">Four</a>
</li>
<li class="col-lg-2">
<a class="thumbnail" id="carousel-selector-4">Five</a>
</li>
</ul>
</div> </div>
<div class="row text-center slick-multislider">
<div class="item" data-slide-number="0">
<div>
<img src="http://lorempixel.com/600/350/cats/1 " class="img-responsive ">cat 1
</div>
</div>
<div class="item" data-slide-number="1">
<div>
<img src="http://lorempixel.com/600/350/cats/2 " class="img-responsive ">cat 2
</div>
</div>
<div class="item " data-slide-number="2">
<div>
<img src="http://lorempixel.com/600/350/cats/3 " class="img-responsive ">cat 3
</div>
</div>
<div class="item " data-slide-number="3">
<div>
<img src="http://lorempixel.com/600/350/cats/4 " class="img-responsive ">cat4
</div>
</div>
<div class="item " data-slide-number="4">
<div>
<img src="http://lorempixel.com/600/350/cats/5 " class="img-responsive ">cat5
</div>
</div> </div> </div> <div class="row text-center arrows"> <div class="span4" id="carousel-text"></div>
<div id="slide-content" style="display: none;">
<div id="slide-content-0">
<h2>Slider One</h2>
</div>
<div id="slide-content-1">
<h2>Slider Two</h2>
</div>
<div id="slide-content-2">
<h2>Slider Three</h2>
</div>
<div id="slide-content-3">
<h2>Slider Four</h2>
</div>
<div id="slide-content-4">
<h2>Slider Five</h2>
</div> </div> </div>
</div>
jQuery:
$('.slick-multislider').on('init', function(event, slick) {
$('#carousel-text').html($('#slide-content-0').html());
});
$('.slick-multislider').on('afterChange', function(event, slick, currentSlide) {
$('#carousel-text').html($('#slide-content-' + currentSlide).html());
});
$('.slick-multislider').slick({
slidesToShow: 3,
variableWidth: false,
centerMode: true,
centerPadding: '100px',
dots: false,
arrows: true,
appendArrows: '.arrows'
});
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function() {
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length - 1);
var id = parseInt(id);
$('.slick-multislider').slick('slickGoTo', id, false);
});
CSS:
* {
box-sizing: border-box;
}
.slick-multislider {}
.slick-slider div {
height: 400px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: -1;
}
.slick-slider div.slick-center {
/*background: red;*/
z-index: 100;
}
.slick-slider img {
-webkit-transform: translate3d(0, 20%, 0px);
transform: translate3d(0, 20%, 0px);
}
.slick-slider .slick-center img {
-webkit-transform: scale(1.3, 1.3) translate3d(0, 15%, 20px);
transform: scale(1.3, 1.3) translate3d(0, 15%, 20px);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.arrows {
margin: 20px auto 0 auto;
width: 400px;
}
.span4, h2 {
display: block;
float: left;
width: 200px;
height: 40px;
background: red;
color: white;
}
.slick-prev {
float: left;
}
.slick-next {
float: right;
}
.slick-arrow {
position: relative;
left: 0;
top: 0;
width: 100px;
height: 20px;
background: blue;
margin: 0 0 20px 0;
}
.slick-arrow:hover {
background: blue;
}
ul {
height: 40px;
}
li,
li.active {
list-style-type: none;
text-align: center;
text-indent: 0;
width: 10%;
height: 20px;
background-color: transparent;
border-radius: 0;
padding-bottom: 15px;
}


The solution is very simple, but poorly documented: set your centerPadding to 0.
In your case, your javascript would look like this:
$('.slick-multislider').slick({
slidesToShow: 3,
variableWidth: false,
centerMode: true,
centerPadding: '0',
dots: false,
arrows: true,
appendArrows: '.arrows'
});
Here's an updated fiddle:
http://codepen.io/anon/pen/MKVdPd

Related

Having multiple Owl Carousels on a Shopify page

I'm writing a homepage for my business website. I encountered a problem after inserting a second Owl Carousel. The second slider is showing up fine but first one somehow disappeared. When I removed the second Carousel, the first one came back. I figured it has to do with giving the divs specific IDs or classes but no matter how I tried I can't seem to make them work.
I tried giving them specific class such as
div class="owl-one owl-carousel owl-theme" and div class="owl-two owl-carousel owl-theme"
As well as ids
div id="owl-one" class="owl-carousel owl-theme"
and div id="owl-two" class="owl-carousel owl-theme"
And changed the script to
$('.owl-one .owl-slideImg .owl-theme').owlCarousel({
$('.owl-two .owl-carousel').owlCarousel({
As well as
$('#owl-one .owl-slideImg .owl-theme').owlCarousel({
$('#owl-two .owl-carousel').owlCarousel({
What am I doing wrong? Please help!
Here is the first slider code:
<!DOCTYPE html>
<link rel="stylesheet" href="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/bootstrap-grid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<style>
.owl-slideImg .owl-nav div{
position: absolute !important;
width: 25px !important;
height: 25px !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
top: 40%;
}
.owl-slideImg .owl-prev {
left: -55px;
opacity: .65;
background: url(https://www.panpuri.com/asset/frontend/images/right-chevron.svg) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 20px 20px !important;
transform: rotate(180deg);
color: rgba(0, 0, 0, 0) !important;
transition: .33s all ease-out;
}
.owl-slideImg .owl-next {
right: -55px;
opacity: .65;
background: url(https://www.panpuri.com/asset/frontend/images/right-chevron.svg) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 20px 20px !important;
color: rgba(0, 0, 0, 0) !important;
transition: .33s all ease-out;
}
.owl-slideImg .owl-prev:hover{
opacity: 1;
}
.owl-slideImg .owl-next:hover{
opacity: 1;
}
#media only screen and (max-width: 991px) { /* MOBILE */
.owl-slideImg .slide-img{
height: 250px;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 100% auto !important;
}
.owl-slideImg .slide-box-text div{
padding: 40px;
}
.owl-slideImg .box-icon-svg{
display: flex;
justify-content: end;
}
.box-icon-svg img{
max-width: 30px;
}
.container-fluid{
padding-bottom: 20rem;
margin-bottom: 20rem;
}
.owl-slideImg .owl-nav div{
top: 20%;
}
.owl-slideImg .owl-prev {
left: 0 !important;
}
.owl-slideImg .owl-next {
right: 0 !important;
}
}
#media only screen and (min-width: 992px) { /* PC */
.owl-slideImg .slide-box-text{
height:100%;
display: flex;
justify-content: center;
justify-items: center;
align-items: center;
width:100%;
}
.owl-slideImg .slide-img{
height: 350px;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 100% auto !important;
}
.owl-slideImg .slide-box-text div{
width: 60%;
}
.owl-slideImg .box-icon-svg{
position: absolute;
right: 0;
bottom: 0;
display: flex;
margin-right: 40px;
margin-bottom: 20px;
}
.box-icon-svg img{
max-width: 60px !important;
margin-top: -20px;
}
.owl-slideImg .owl-item{
width: 100%;
}
.service-header{
text-align: center;
justify-content: center;
}
.container-fluid{
padding-bottom: 20rem;
margin-bottom: 20rem;
}
}
</style>
<main>
<br>
<br>
<br>
<h2 class="service-header">our service</h2>
<div class="col p-5">
<div class="row justify-content-center">
<div class="col-xl-8 col-lg-10 col-12 owl-slideImg ">
<div class="owl-carousel owl-theme">
<div class="owl-item">
<div class="row">
<div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Installation_0702da65-4ad7-42df-9ea6-bca10d7c541a.jpg);"> </div>
<div class="col-xl-6 col-12">
<div class="slide-box-text">
<div>
Given our versatility and neat craftsmanship in stone installation, we have been providing our service to various leading construction and estate companies in Thailand.
</div>
</div>
<div class="box-icon-svg">
<h3 class="mr-3">installation</h3>
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Installicon.svg?v=1646822679" alt="">
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="row">
<div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Supply.jpg);"> </div>
<div class="col-xl-6 col-12">
<div class="slide-box-text">
<div>
With connections and credible sources from both domestic and oversea quarries, we can supply great quality stones that meet your needs and specifications.
</div>
</div>
<div class="box-icon-svg">
<h3 class="mr-3">supply</h3>
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Supplyicon.svg?v=1646822694" alt="">
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="row">
<div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Restore.jpg);"> </div>
<div class="col-xl-6 col-12">
<div class="slide-box-text">
<div>
We let our designers draft up a digital rendered image beforehand for any customisation and specifications such as landscaping and counter tops.
</div>
</div>
<div class="box-icon-svg">
<h3 class="mr-3">design</h3>
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Designicon.svg?v=1646822671" alt="">
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="row">
<div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Design.jpg);"> </div>
<div class="col-xl-6 col-12">
<div class="slide-box-text">
<div>
With high quality machines, we can provide any finishing and resurfacing process including polishing and honing.
</div>
</div>
<div class="box-icon-svg">
<h3 class="mr-3">restore</h3>
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Restoreicon.svg?v=1646822686" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<br>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".owl-slideImg .owl-theme").owlCarousel({
center: false,
loop: true,
autoplay: true,
autoplayTimeout: 50000,
nav: true,
dots: true,
items: 1,
margin: 40
});
});
</script>
And this is the second slider code:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<br>
<div class="logoslider">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo5.jpg" alt="The Ritz Carlton">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo2.jpg" alt="Phulaybay">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo6.jpg" alt="Silpakorn">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo3.jpg" alt="Property Perfect">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo1.jpg" alt="Thames Valley">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo4.jpg" alt="The Mall Group">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo7.jpg" alt="Pirom At Vineyard">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo8.jpg" alt="NYE Estate">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo13.jpg" alt="Balcony Thailand">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo10.jpg" alt="Harbor Laemchabang">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo12.jpg" alt="Belle Rama 9">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo9.jpg" alt="Major Development">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo11.jpg" alt="Gazebo Garden">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo15.jpg" alt="360 Pano">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo14.jpg" alt="Anantarakiri">
</div>
</div>
</div>
<br>
<br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$('.owl-carousel').owlCarousel({
loop: true,
autoplay: true,
nav: false,
dots: false,
margin: 40,
autoplayTimeout: 1500,
responsive:{
0:{
items:4
},
600:{
items:8
},
1000:{
items:8
}
}
})
</script>
</body>
<style>
.logoslider{
display: flex;
width: 80%;
justify-content: center;
justify-items: center;
align-items: center;
margin-left: auto;
margin-right: auto;
}
</style>

Try like this
Owl Carousel One
var owl_carousel_one = $('.owl-carousel-one');
owl_carousel_one.owlCarousel({
loop: true,
margin: 30,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
smartSpeed: 1000,
responsive: {
0: {
items: 4
},
600: {
items: 8
},
1000: {
items: 8
}
}
});
Owl Carousel Two
var owl_carousel_two = $('.owl-carousel-two');
owl_carousel_two.owlCarousel({
loop: true,
margin: 30,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
smartSpeed: 1000,
responsive: {
0: {
items: 4
},
600: {
items: 8
},
1000: {
items: 8
}
}
});
Just use these unique classes (.owl-carousel-one, .owl-carousel-two, and so on...) for each owl carousel HTML element. No need for any ID.

Display flex is messing around with my items

I have a container that has a list of items, each item has an image and some information.
I made a slide function using JavaScript and I got into a little problem, because I'm using translateX, I want the items to be displayed inline.
I made some research and found that I must use display: flex when making a sliding image, and after that, the items are not showing correctly.
If I remove the flex and I put translateY (instead of X) the slide is working (from up/down) but I want from left-right.
Can someone help me?
This is the code that is not work (with display: flex and translateX)
var count = 1;
var next = document.querySelector('button.next');
var items = document.querySelectorAll('div.item');
var size = items[0].clientWidth;
next.addEventListener("click", function(e)
{
if(count == 2) {
return;
}
count++;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + ((-size * count)) + 'px)';
});
var prev = document.querySelector('button.prev');
prev.addEventListener("click", function(e)
{
if(count == 1) {
return;
}
count--;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + ((-size * count)) + 'px)';
});
.content {
margin-left: 50px;
}
.container {
width: 100%;
height: 600px;
}
.main {
display: flex;
width: 100%;
}
.container-slide {
width: 100%;
overflow: hidden;
position: relative;
}
.image {
width: 100%;
min-height: 600px;
max-height: 600px;
background-clip: padding-box;
float: left;
background-size: cover;
background-position: center center;
position: relative;
}
.info {
position: absolute;
bottom: 0;
left: 0;
width: 70%;
color: white;
background: green;
padding: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.buttons-info {
margin-left: 30px;
}
button.prev, button.next {
margin-top: 50px;
}
.show-list-pages {
position: absolute;
bottom: 20px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
<div class="content">
<div class="container container-slide">
<div class="main">
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://assets.hongkiat.com/uploads/minimalist-dekstop-wallpapers/4k/original/14.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 1</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
This is the other code without display: flex and translateX (is working) but the next item is not showing (because is not on inline, is under the first item)
var count = 1;
var next = document.querySelector('button.next');
var items = document.querySelectorAll('div.item');
var size = items[0].clientWidth;
next.addEventListener("click", function(e)
{
if(count == 2) {
return;
}
count++;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + ((-size * count)) + 'px)';
});
var prev = document.querySelector('button.prev');
prev.addEventListener("click", function(e)
{
if(count == 1) {
return;
}
count--;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + ((-size * count)) + 'px)';
});
.content {
margin-left: 50px;
}
.container {
width: 100%;
height: 600px;
}
.main {
/*display: flex;*/
width: 100%;
}
.container-slide {
width: 100%;
overflow: hidden;
position: relative;
}
.image {
width: 100%;
min-height: 600px;
max-height: 600px;
background-clip: padding-box;
float: left;
background-size: cover;
background-position: center center;
position: relative;
}
.info {
position: absolute;
bottom: 0;
left: 0;
width: 70%;
color: white;
background: green;
padding: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.buttons-info {
margin-left: 30px;
}
button.prev, button.next {
margin-top: 50px;
}
.show-list-pages {
position: absolute;
bottom: 20px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
<div class="content">
<div class="container container-slide">
<div class="main">
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://assets.hongkiat.com/uploads/minimalist-dekstop-wallpapers/4k/original/14.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 1</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
This is the code without display: flex and translateY instead of X, is working from up-down, but I want from left-right
var count = 1;
var next = document.querySelector('button.next');
var items = document.querySelectorAll('div.item');
var size = items[0].clientWidth;
next.addEventListener("click", function(e)
{
if(count == 2) {
return;
}
count++;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateY(' + ((-size * count)) + 'px)';
});
var prev = document.querySelector('button.prev');
prev.addEventListener("click", function(e)
{
if(count == 1) {
return;
}
count--;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateY(' + ((-size * count)) + 'px)';
});
.content {
margin-left: 50px;
}
.container {
width: 100%;
height: 600px;
}
.main {
/*display: flex;*/
width: 100%;
}
.container-slide {
width: 100%;
overflow: hidden;
position: relative;
}
.image {
width: 100%;
min-height: 600px;
max-height: 600px;
background-clip: padding-box;
float: left;
background-size: cover;
background-position: center center;
position: relative;
}
.info {
position: absolute;
bottom: 0;
left: 0;
width: 70%;
color: white;
background: green;
padding: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.buttons-info {
margin-left: 30px;
}
button.prev, button.next {
margin-top: 50px;
}
.show-list-pages {
position: absolute;
bottom: 20px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
<div class="content">
<div class="container container-slide">
<div class="main">
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://assets.hongkiat.com/uploads/minimalist-dekstop-wallpapers/4k/original/14.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 1</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
EDIT: I solved this issues, I just added min-width: 100% to the .item.

If you are looking for a carousel.
this is what I changed in CSS.
.main {
display: flex;
width: 200%;
}
.item{
width:100%;
}
this is what I changed in JS.
//in next -50% it shifts half way through .main
document.querySelector('div.main').style.transform = 'translateX(-50%)';
// in prev 0% it goes back to start
document.querySelector('div.main').style.transform = 'translateX(0%)';
var count = 1;
var next = document.querySelector('button.next');
var items = document.querySelectorAll('div.item');
var size = items[0].clientWidth;
next.addEventListener("click", function(e)
{
if(count == 2) {
return;
}
count++;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(-50%)';
});
var prev = document.querySelector('button.prev');
prev.addEventListener("click", function(e)
{
if(count == 1) {
return;
}
count--;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform ='translateX(-0%)';
});
.content {
margin-left: 50px;
}
.container {
width: 100%;
height: 600px;
}
.main {
display: flex;
width: 200%;
}
.container-slide {
width: 100%;
overflow: hidden;
position: relative;
}
.image {
width: 100%;
min-height: 600px;
max-height: 600px;
background-clip: padding-box;
float: left;
background-size: cover;
background-position: center center;
position: relative;
}
.info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
color: white;
background: green;
padding: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.item{
width:100%;
}
.buttons-info {
margin-left: 30px;
}
button.prev, button.next {
margin-top: 50px;
}
.show-list-pages {
position: absolute;
bottom: 20px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
<div class="content">
<div class="container container-slide">
<div class="main">
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://assets.hongkiat.com/uploads/minimalist-dekstop-wallpapers/4k/original/14.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 1</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>2</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
this is not the optimal solution as I tried to keep that original code.
this won't work if you add more than 2 images.

If you would like to change the entire code then here is the solution.
source MEDIUM carousel from scratch in vanilla JS
codepen.io carousel
!(function(d){
var itemClassName = "carousel__photo";
items = d.getElementsByClassName(itemClassName),
totalItems = items.length,
slide = 0,
moving = true;
// Set classes
function setInitialClasses() {
// Targets the previous, current, and next items
// This assumes there are at least three items.
items[totalItems - 1].classList.add("prev");
items[0].classList.add("active");
items[1].classList.add("next");
}
// Set event listeners
function setEventListeners() {
var next = d.getElementsByClassName('carousel__button--next')[0],
prev = d.getElementsByClassName('carousel__button--prev')[0];
next.addEventListener('click', moveNext);
prev.addEventListener('click', movePrev);
}
// Next navigation handler
function moveNext() {
// Check if moving
if (!moving) {
// If it's the last slide, reset to 0, else +1
if (slide === (totalItems - 1)) {
slide = 0;
} else {
slide++;
}
// Move carousel to updated slide
moveCarouselTo(slide);
}
}
// Previous navigation handler
function movePrev() {
// Check if moving
if (!moving) {
// If it's the first slide, set as the last slide, else -1
if (slide === 0) {
slide = (totalItems - 1);
} else {
slide--;
}
// Move carousel to updated slide
moveCarouselTo(slide);
}
}
function disableInteraction() {
// Set 'moving' to true for the same duration as our transition.
// (0.5s = 500ms)
moving = true;
// setTimeout runs its function once after the given time
setTimeout(function(){
moving = false
}, 500);
}
function moveCarouselTo(slide) {
// Check if carousel is moving, if not, allow interaction
if(!moving) {
// temporarily disable interactivity
disableInteraction();
// Update the "old" adjacent slides with "new" ones
var newPrevious = slide - 1,
newNext = slide + 1,
oldPrevious = slide - 2,
oldNext = slide + 2;
// Test if carousel has more than three items
if ((totalItems - 1) > 3) {
// Checks and updates if the new slides are out of bounds
if (newPrevious <= 0) {
oldPrevious = (totalItems - 1);
} else if (newNext >= (totalItems - 1)){
oldNext = 0;
}
// Checks and updates if slide is at the beginning/end
if (slide === 0) {
newPrevious = (totalItems - 1);
oldPrevious = (totalItems - 2);
oldNext = (slide + 1);
} else if (slide === (totalItems -1)) {
newPrevious = (slide - 1);
newNext = 0;
oldNext = 1;
}
// Now we've worked out where we are and where we're going,
// by adding/removing classes we'll trigger the transitions.
// Reset old next/prev elements to default classes
items[oldPrevious].className = itemClassName;
items[oldNext].className = itemClassName;
// Add new classes
items[newPrevious].className = itemClassName + " prev";
items[slide].className = itemClassName + " active";
items[newNext].className = itemClassName + " next";
}
}
}
function initCarousel() {
setInitialClasses();
setEventListeners();
// Set moving to false so that the carousel becomes interactive
moving = false;
}
initCarousel();
}(document));
.carousel-wrapper {
overflow: hidden;
width: 100%;
}
.carousel-wrapper * {
box-sizing: border-box;
}
.carousel {
transform-style: preserve-3d;
}
.carousel__photo {
opacity: 0;
position: absolute;
top:0;
width: 100%;
height:60vw;
max-height:90vh;
margin: auto;
padding: 1rem 4rem;
z-index: 100;
transition: transform .5s, opacity .5s, z-index .5s;
}
.carousel__photo.initial,
.carousel__photo.active {
opacity: 1;
position: relative;
z-index: 900;
}
.carousel__photo.prev,
.carousel__photo.next {
z-index: 800;
}
.carousel__photo.prev {
transform: translateX(-100%); /* Move 'prev' item to the left */
}
.carousel__photo.next {
transform: translateX(100%); /* Move 'next' item to the right */
}
/* buttons */
.carousel__button--prev,
.carousel__button--next {
position: absolute;
top:50%;
width: 3rem;
height: 3rem;
background-color: #FFF;
transform: translateY(-50%);
border-radius: 50%;
cursor: pointer;
z-index: 1001; /* Sit on top of everything */
border: 1px solid black;
}
.carousel__button--prev {
left:0;
}
.carousel__button--next {
right:0;
}
.carousel__button--prev::after,
.carousel__button--next::after {
content: " ";
position: absolute;
width: 10px;
height: 10px;
top: 50%;
left: 54%;
border-right: 2px solid black;
border-bottom: 2px solid black;
transform: translate(-50%, -50%) rotate(135deg);
}
.carousel__button--next::after {
left: 47%;
transform: translate(-50%, -50%) rotate(-45deg);
}
<div class="carousel-wrapper">
<div class="carousel">
<img class="carousel__photo initial" src="https://i.imgur.com/sKV54PO.jpeg">
<img class="carousel__photo" src="https://i.imgur.com/dZH9gh8.jpeg">
<img class="carousel__photo" src="https://i.imgur.com/TBgEy0n.jpeg">
<img class="carousel__photo" src="https://i.imgur.com/1PeQdB4.jpeg">
<img class="carousel__photo" src="https://i.imgur.com/ox8Cp47.jpeg">
<div class="carousel__button--next"></div>
<div class="carousel__button--prev"></div>
</div>
</div>

I created a variable translateAmount that starts at 0 and tracks where the carousel is at, and then it translates by the current amount. That way you can always translate it the right amount, your count variable keeps track of the number of pictures.
I also put a width 100% on the .item and width 200% on the .main div. I needed this because with the display: flex it tends to put everything in the screen.
Take a look:
HTML/JS
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="content">
<div class="container container-slide">
<div class="main">
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://i.redd.it/7nk7p8gl90371.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 2</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="image" style="background-image: url('https://assets.hongkiat.com/uploads/minimalist-dekstop-wallpapers/4k/original/14.jpg')">
<div class="info">
<div class="buttons-info">
<div class="show-main-text">
<span>title item 1</span>
</div>
</div>
<div class="buttons-item">
<a href="#">
<button><span>button 1</span></button>
</a>
</div>
</div>
<div class="show-list-pages">
<div class="show-current-page">
<span>1</span>
</div>
<div class="show-count-pages">
<span>/ 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
<script>
var count = 1;
var next = document.querySelector('button.next');
var items = document.querySelectorAll('div.item');
var size = items[0].clientWidth;
let translateAmount = 0;
next.addEventListener("click", function(e)
{
if(count == 3) {
return;
}
count++;
translateAmount -= size;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + translateAmount + 'px)';
});
var prev = document.querySelector('button.prev');
prev.addEventListener("click", function(e)
{
if(count == 1) {
return;
}
count--;
translateAmount += size;
document.querySelector('div.main').style.transition = 'transform 1.0s ease-in-out';
document.querySelector('div.main').style.transform = 'translateX(' + translateAmount + 'px)';
});
</script>
</body>
</html>
CSS
.content {
/* margin-left: 50px; */
border: 0px solid red;
width: 100vw;
overflow: hidden;
}
.container {
width: 100%;
height: 600px;
}
.main {
display: flex;
width: fit-content;
}
.item {
width: 100vw;
}
.container-slide {
width: 100%;
/* height: 50%; */
/* overflow: hidden; */
/* position: relative; */
}
.image {
width: 100%;
min-height: 600px;
max-height: 600px;
background-clip: padding-box;
/* float: left; */
background-size: cover;
background-position: center center;
position: relative;
}
.info {
position: absolute;
bottom: 0;
left: 0;
width: 70%;
color: white;
background: green;
padding: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.buttons-info {
margin-left: 30px;
}
button.prev, button.next {
margin-top: 50px;
}
.show-list-pages {
position: absolute;
bottom: 20px;
right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}

isotope with lightGallery filtering with multiple galleries

I am currently working on a portfolio for an artist. I am using Masonry with Isotope to filter for specific kinds of paintigs. When the items are being clicked, it opens lightGallery: http://sachinchoolur.github.io/lightGallery/
Everything works fine so far, the problem is the following:
What I want to achieve is that, if you filter for nature paintings for example, only the nature paintings will be shown and if you click on one of the items it opens the gallery. But the problem is, that at the moment ALL images of ALL categories are been shown in the gallery of nature. So if you click through them, you also get images of the category 'people' for example.
I guess the aim there is to give the different categories different 'galleries'. But if the filter 'show all' is clicked, the user should also be able to click through all the images of all categories, so that the gallery is not ending when the category of the item being clicked 'ends'.
As Im not that good with javascript, I hope you may be able to help me a little bit and that you understand my problem ..
The Code
HTML MARKUP
<div class="categories">
<button data-filter="*">Alle</button>
<button data-filter=".ship">Schiff</button>
<button data-filter=".copop">CoPop</button>
<button data-filter=".grey_bg">grey bg</button>
</div>
<div class="grid" id="lightgallery">
<a class="grid__item copop" href="app/assets/img/co-pop.jpg">
<img class="grid__item__img" src="app/assets/img/co-pop.jpg">
</a>
<a class="grid__item ship" href="app/assets/img/ship.jpg">
<img class="grid__item__img" src="app/assets/img/ship.jpg">
</a>
<a class="grid__item copop" href="app/assets/img/co-pop.jpg">
<img class="grid__item__img" src="app/assets/img/co-pop.jpg">
</a>
<a class="grid__item ship" href="app/assets/img/ship.jpg">
<img class="grid__item__img" src="app/assets/img/ship.jpg">
</a>
<a class="grid__item copop" href="app/assets/img/co-pop.jpg">
<img class="grid__item__img" src="app/assets/img/co-pop.jpg">
</a>
<a class="grid__item ship" href="app/assets/img/ship.jpg">
<img class="grid__item__img" src="app/assets/img/ship.jpg">
</a>
</div>
</div>
JS initialize lightgallery
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
</script>
JS isotope
(function($) {
$('#wrap').imagesLoaded(function() {
$('.categories').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
var $grid = $('.grid').isotope({
itemSelector: '.grid__item',
percentPosition: true,
masonry: {
columnWidth: '.grid__item'
}
})
});
So I guess I need to create several galleries and say in the code that only the items of that activated data-filter gallery will be shown when clicked. But maybe that would also work without creating extra multiple galleries? Because then the problem would maybe be, that when all items are active, only the ones in that specific gallery of the selected item will be shown in the lightGallery.
Thank you for your help in advance!

kindly check this pen to get what you need
$(document).ready(function() {
var $gallery = $('#gallery');
var $boxes = $('.revGallery-anchor');
$boxes.hide();
$gallery.imagesLoaded( {background: true}, function() {
$boxes.fadeIn();
$gallery.isotope({
// options
sortBy : 'original-order',
layoutMode: 'fitRows',
itemSelector: '.revGallery-anchor',
stagger: 30,
});
});
$('button').on( 'click', function() {
var filterValue = $(this).attr('data-filter');
$('#gallery').isotope({ filter: filterValue });
$gallery.data('lightGallery').destroy(true);
$gallery.lightGallery({
selector: filterValue.replace('*','')
});
});
});
$(document).ready(function() {
$("#gallery").lightGallery({
});
});
//button active mode
$('.button').click(function(){
$('.button').removeClass('is-checked');
$(this).addClass('is-checked');
});
//CSS Gram Filters on Mouse enter
$("#gallery a .nak-gallery-poster").addClass("inkwell");
$("#gallery a").on({
mouseenter : function() {
$(this).find(".nak-gallery-poster").removeClass("inkwell").addClass("walden");
},
mouseleave : function() {
$(this).find(".nak-gallery-poster").removeClass("walden").addClass("inkwell");
}
});
.revGallery-anchor, .gal-overlay, .nak-gallery-poster{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.revGallery-anchor{
overflow: hidden;
position: relative;
width: calc(100% / 5);
display: block;
float: left;
border: 5px solid #e9e9e9;
}
.gal-overlay{
display: block;
width: 100%;
height: 100%;
background: rgba(27,27,27, 0.6);
position: absolute;
top: 0;
left: 0;
transition: background .4s ease;
-webkit-transition: background .4s ease;
}
.revGallery-anchor:hover .gal-overlay{
background: rgba(27,27,27, 0);
}
.nak-gallery {
display: block;
width: 100%;
position: relative;
margin-top: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.nak-gallery-poster{
padding-bottom:100%;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transition: all .4s ease;
-webkit-transition: all .4s ease;
}
.revGallery-anchor:hover .nak-gallery-poster{
transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
}
.img-responsive{
display:none;
}
.button{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
width: 200px;
height: 48px;
border: 1px solid rgba(0,169,157,1);
background-color: rgba(0,169,157,1);
border-radius: 2px;
color: #fff;
letter-spacing: 2px;
}
.button:hover {
background-color: #363636;
text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
color: #fff;
}
.button:active,
.button.is-checked {
background-color: #28F;
}
.button.is-checked {
color: white;
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}
.button:active {
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
.revGallery-anchor-width1{
width: 40%
}
.revGallery-anchor-width2{
width: 30%
}
.revGallery-anchor-width3{
width: 20%
}
.nak-gallery-height1{
padding-bottom: 400px
}
.nak-gallery-height2{
padding-bottom: 300px
}
.nak-gallery-height3{
padding-bottom: 200px
}
.preloader{
display: none;
}
.preloaderStyle{
background: red;
width: 100%;
height: 100px;
}
<button type="button" class="button is-checked" data-filter="">ALL</button>
<button type="button" class="button" data-filter=".design">DESIGN</button>
<button type="button" class="button" data-filter=".branding">BRANDING</button>
<div class="nak-gallery nlg1" id="gallery">
<a href="http://unsplash.com/photos/GYNxcQvBNzA/download" class="revGallery-anchor design">
<img class="img-responsive" src="http://unsplash.com/photos/GYNxcQvBNzA/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/GYNxcQvBNzA/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
<a href="https://www.youtube.com/watch?v=Io0fBr1XBUA" class="revGallery-anchor branding">
<img class="img-responsive" src="http://unsplash.com/photos/ssAcdlJRsI4/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/ssAcdlJRsI4/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
<a href="http://unsplash.com/photos/EKIyHUrUHWU/download" class="revGallery-anchor design">
<img class="img-responsive" src="http://unsplash.com/photos/EKIyHUrUHWU/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/EKIyHUrUHWU/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
<a href="http://unsplash.com/photos/CFi7_hCXecU/download" class="revGallery-anchor branding">
<img class="img-responsive" src="http://unsplash.com/photos/CFi7_hCXecU/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/CFi7_hCXecU/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
<a href="http://unsplash.com/photos/cFplR9ZGnAk/download" class="revGallery-anchor design">
<img class="img-responsive" src="http://unsplash.com/photos/cFplR9ZGnAk/download">
<div style="overflow:hidden">
<div class="nak-gallery-poster" style="background-image:url('http://unsplash.com/photos/cFplR9ZGnAk/download');background-size:cover;background-repeat:no-repeat;background-position:center center;display: block;width: 100%;height: 0;"></div>
</div>
<div class="gal-overlay">
<div class="photo"></div>
</div>
</a>
</div>
https://codepen.io/kannan3024/pen/YWoQgq

jQuery Flip: Why is only my text turning and not .card?

I'm using the jQuery Flip Plugin. I'm trying to have a couple of cards on top of each other and when the user clicks on a card, it should turn and show the backside. But now only the text is flipping and not the card behind the text. I managed to have it wokring before, but I had to make classes for front and back.
$(function() {
$(".card").flip({
axis: "y",
reverse: "false",
trigger: "click",
speed: 700,
});
});
.card {
position: absolute;
width: 400px;
height: 248px;
margin: 2px;
background-color: #F3ECE2;
border: 5px blue solid;
padding: 10px;
border-radius: 25px;
}
#card-1 {
left: 0px;
top: 0px;
z-index: 1;
}
#card-2 {
left: 10px;
top: -238px;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js"></script>
<div class="card" id="card-1">
<div>
Front1
</div>
<div>
Back1
</div>
</div>
<div class="card" id="card-2">
<div>
Front2
</div>
<div>
Back2"
</div>
</div>

From my understanding of the website, you need to add front and back classes to the corresponding div's, as shown:
$(function() {
$(".card").flip({
axis: "y",
reverse: "false",
trigger: "click",
speed: 700,
});
});
.card{
width:200px;
height:100px;
position:relative;
}
.front,
.back {
background-color: #F3ECE2;
border: 5px blue solid;
padding: 10px;
border-radius: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js"></script>
<div class="card" id="card-1">
<div class="front">
Front1
</div>
<div class="back">
Back1
</div>
</div>
<div class="card" id="card-2">
<div class="front">
Front2
</div>
<div class="back">
Back2
</div>
</div>

Logging an attribute from CSS Modal

My problem is that when attempting to log an attribute from an image, when there are multiple images on the page, I am only able to log the first attribute.
Here's a fiddle.
http://jsfiddle.net/fauverism/b9kwT/4/
CSS
#page1, #page2, #page3, #page4 {
display: inline-block;
}
.active-page {
border: 4px groove seagreen;
}
.inactive-page-unlocked {
border: 4px ridge papayawhip;
}
.modalbg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
background: rgba(0, 0, 0, 0);
z-index: 1000;
transition: all 0.2s ease-out;
pointer-events: none;
}
.modalbg .dialog {
display: inline-flex;
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
margin: auto;
background-clip: contain;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.modalbg:target {
opacity: 1;
pointer-events: auto;
background: rgba(0, 0, 0, 0.6);
transition: all 0.2s ease-out;
}
HTML
<div class="main-content">
<div id="page1" class="active-page">
<a class="magnify" href="#zoomWindow100100.GIF">
<img id="100100.GIF-img" name="100100.GIF" src="http://placekitten.com/100/100">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow100100.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/100/100)"></div>
</div>
</a>
</div>
<div id="page2" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow120120.GIF">
<img id="120120.GIF-img" name="120120.GIF" src="http://placekitten.com/120/120">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow120120.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/120/120)"></div>
</div>
</a>
</div>
<div id="page3" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow140140.GIF">
<img id="140140.GIF-img" name="140140.GIF" src="http://placekitten.com/140/140">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow140140.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/140/140)"></div>
</div>
</a>
</div>
<div id="page4" class="inactive-page-unlocked">
<a class="magnify" href="#zoomWindow160160.GIF">
<img id="160160.GIF-img" name="160160.GIF" src="http://placekitten.com/160/160">
</a>
<a href="#close" class="modal-container">
<div class="modalbg" id="zoomWindow160160.GIF">
<div class="dialog" style="background-image: url(http://placekitten.com/160/160)"></div>
</div>
</a>
</div>
JavaScript
function openZoomWindow() {
$('.magnify').on('click', function() {
var nameVal = $('img').attr('id');
console.log("show_inline_exhibit","name="+nameVal);
});
}
function closeZoomWindow() {
$('.modal-container').on('click', function() {
var nameVal = $('.modalbg').attr('id');
console.log("show_inline_exhibit","id="+nameVal);
});
}
openZoomWindow();
closeZoomWindow();
Some details...
I've tried using this in various ways to no avail. I've tried using .each() .children(). No dice. I tried using onclick to instantiate the functions.
I don't have to log the id attribute. Logging the name will work just fine.
Thanks so much for reading this and thanks in advance for helping out if you're submitting code. This has had me stumped.

You need to select the element you're clicking on, so find the img inside the anchor:
var nameVal = $(this).find('img').attr('id');

Categories

Resources