Slick.js margins on active slide - javascript

I'm using a Slick slideshow. I applied a scale 2 to the active slide, but when the size of slide changes, the margins on the right and left don't move. How can I fix that?
An example where I found the margins working on active slide: https://codepen.io/jinzagon/pen/KKzaQwz
My code: https://codepen.io/jinzagon/pen/YzqpdLj
HTML
<section class="top_slider">
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=2">
</div>
<div>
<img src="http://placehold.it/288x288?text=3">
</div>
<div>
<img src="http://placehold.it/288x288?text=4">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
</section>
CSS
.slider {
background-color: white;
margin: 100px auto;
height: auto!important;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 80%;
transition: all linear 0.4s;
}
.slick-center img {
transform: scale(2);
transition: all linear 0.4s;
}
JS
$(".top_slider").slick({
dots: true,
infinite: false,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
});
$('html').animate({
scrollTop: $('.top_slider').offset().top
}, 500);

I have mimic it with scaling all the slides with scale of 50% and the active slide with scale of 100%. Also, add inner div with class .slide so we can place transformations on it. That way, we do not interfere with slick calculations.
You can play with the scale values to make it as you wish.
$(".top_slider").slick({
dots: true,
infinite: false,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
});
$('html').animate({
scrollTop: $('.top_slider').offset().top
}, 500);
.slider {
background-color: white;
margin: 100px auto;
height: auto!important;
}
.slide {
transform: scale(.5);
transition: transform linear 0.15s;
}
.slick-center .slide {
transform: scale(1);
}
.slick-list {
overflow: visible;
}
/* This should be included in your reset/normalize file */
img {
max-width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
<section class="top_slider">
<div>
<div class="slide">
<img src="http://placehold.it/288x288?text=1">
</div>
</div>
<div>
<div class="slide">
<img src="http://placehold.it/288x288?text=2">
</div>
</div>
<div>
<div class="slide">
<img src="http://placehold.it/288x288?text=3">
</div>
</div>
<div>
<div class="slide">
<img src="http://placehold.it/288x288?text=4">
</div>
</div>
<div>
<div class="slide">
<img src="http://placehold.it/288x288?text=5">
</div>
</div>
</section>

Related

How to make owl carousal vertical

I'm trying to make the owl carousel vertical as shown below image:
Kindly suggest if anyone knows some other similar control.
$(function() {
// Owl Carousel
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 3,
margin: 10,
rtl: true,
center: true,
loop: true,
nav: true,
animateOut: 'slideOutUp',
animateIn: 'slideInUp'
});
});
.home-demo .item {
background: #ff3f4d;
}
.home-demo h2 {
color: #FFF;
text-align: center;
padding: 5rem 0;
margin: 0;
font-style: italic;
font-weight: 300;
}
.owl-carousel .owl-item.active.center {
margin-top: 0 !important;
position: relative;
z-index: 999;
-webkit-transform: scale(1);
transform: scale(1);
}
.owl-carousel .owl-item {
transform: scale(0.7);
padding: 10px 0px;
transition: all 0.5s;
transform: scale(60%);
}
<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.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="home-demo">
<h3>Carousel</h3>
<div class="owl-carousel owl-theme">
<div class="item">
<h2>Swipe</h2>
</div>
<div class="item">
<h2>Drag</h2>
</div>
<div class="item">
<h2>Responsive</h2>
</div>
<div class="item">
<h2>CSS3</h2>
</div>
<div class="item">
<h2>Fast</h2>
</div>
<div class="item">
<h2>Easy</h2>
</div>
<div class="item">
<h2>Free</h2>
</div>
<div class="item">
<h2>Upgradable</h2>
</div>
<div class="item">
<h2>Tons of options</h2>
</div>
<div class="item">
<h2>Infinity</h2>
</div>
<div class="item">
<h2>Auto Width</h2>
</div>
</div>
</div>
Add owl-carousel slider properties and some css
$(function(){
$('.owl-carousel').owlCarousel({
items: 1,
loop: false,
nav: false,
margin: 0,
autoplay: true,
dots:false
});
$('.owl-carousel').data('owl.carousel').difference = function(first, second) {
return {
x: first.x - second.x + (first.y - second.y),
y: first.y - second.y
};
};
});
.home-demo .item {
background: #ff3f4d;
}
.home-demo h2 {
color: #FFF;
text-align: center;
padding: 5rem 0;
margin: 0;
font-style: italic;
font-weight: 300;
}
.owl-carousel {
display:block
}
.owl-carousel .owl-item.active.center {
margin-top: 0 !important;
position: relative;
z-index: 999;
-webkit-transform: scale(1);
transform: scale(1);
}
.owl-carousel .owl-item {
transform: scale(0.7);
padding: 10px 0px;
transition: all 0.5s;
transform: scale(60%);
}
.owl-carousel-vertical{
transform: rotate3d(0, 0, 1, 90deg);
}
.owl-carousel-vertical .item{
transform: rotate3d(0, 0, 1, -90deg);
}
.owl-nav{ transform: rotate3d(0, 0, 1, 0deg); }
<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.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="home-demo">
<h3>Carousel</h3>
<div class="owl-carousel owl-theme owl-carousel-vertical">
<div class="item">
<h2>Swipe</h2>
</div>
<div class="item">
<h2>Drag</h2>
</div>
<div class="item">
<h2>Responsive</h2>
</div>
<div class="item">
<h2>CSS3</h2>
</div>
<div class="item">
<h2>Fast</h2>
</div>
<div class="item">
<h2>Easy</h2>
</div>
<div class="item">
<h2>Free</h2>
</div>
<div class="item">
<h2>Upgradable</h2>
</div>
<div class="item">
<h2>Tons of options</h2>
</div>
<div class="item">
<h2>Infinity</h2>
</div>
<div class="item">
<h2>Auto Width</h2>
</div>
</div>
</div>
For more reference please visit this link Click..

Picture gallery zoom with java script

So I have a picture gallery and when you click on the picture it zooms in on the picture the problem is this only works well for the pictures at the top... when you scroll down and click on the pictures at the bottom of the page the zoomed in version pops up at the top so I have to scroll up every time.
How can I make it either display the zoomed in version where the page is (so we don't have to scroll up to view it) or make it so it scrolls to the top when it is clicked to be zoomed in then scrolls back down when you click on the picture which will close the zoom view?
here is the html:
<center>
<div class="gallery">
<div class="img-w">
<img src="gallery/m1.jpg" />
</div>
<div class="img-w">
<img src="gallery/m2.jpg" />
</div>
<div class="img-w">
<img src="gallery/m3.jpg" />
</div>
<div class="img-w">
<img src="gallery/m4.jpg" />
</div>
<div class="img-w">
<img src="gallery/m5.jpg" />
</div>
<div class="img-w">
<img src="gallery/m6.jpg" />
</div>
<div class="img-w">
<img src="gallery/m7.jpg" />
</div>
<div class="img-w">
<img src="gallery/m8.jpg" />
</div>
<div class="img-w">
<img src="gallery/p1.jpg" />
</div>
<div class="img-w">
<img src="gallery/p2.jpg" />
</div>
<div class="img-w">
<img src="gallery/p3.jpg" />
</div>
<div class="img-w">
<img src="gallery/p4.jpg" />
</div>
<div class="img-w">
<img src="gallery/p5.jpg" />
</div>
<div class="img-w">
<img src="gallery/p6.jpg" />
</div>
<div class="img-w">
<img src="gallery/p7.jpg" />
</div>
<div class="img-w">
<img src="gallery/p8.jpg" />
</div>
<div class="img-w">
<img src="gallery/p9.jpg" />
</div>
<div class="img-w">
<img src="gallery/u1.jpg" />
</div>
<div class="img-w">
<img src="gallery/u2.jpg" />
</div>
<div class="img-w">
<img src="gallery/u3.jpg" />
</div>
<div class="img-w">
<img src="gallery/u4.jpg" />
</div>
<div class="img-w">
<img src="gallery/u5.jpg" />
</div>
<div class="img-w">
<img src="gallery/u6.jpg" />
</div>
<div class="img-w">
<img src="gallery/u7.jpg" />
</div>
<div class="img-w">
<img src="gallery/u8.jpg" />
</div>
</div>
<br>
<div class="center">
<p class="bold ">Page 1 | Page 2
</p>
</div>
Here is the css:
/****Gallery****/
.gallery {
width: 100%;
margin-right: 20px;
margin-left: 20px;
border-radius: 3px;
overflow: hidden;
//position: relative;
}
.img-c {
width: 250px;
height: 250px;
float: left;
position: relative;
overflow: hidden;
}
.img-w {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
cursor: pointer;
transition: transform ease-in-out 300ms;
margin: 5px 5px;
}
.img-w img {
display: none;
}
.img-c {
transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}
.img-c:hover .img-w {
transform: scale(1.08);
transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}
.img-c.active {
width: 100% !important;
height: 100% !important;
position: absolute;
z-index: 2;
//transform: translateX(-50%);
}
.img-c.postactive {
position: absolute;
z-index: 2;
pointer-events: none;
}
.img-c.active.positioned {
left: 0 !important;
top: 0 !important;
transition-delay: 50ms;
}
and here is the script:
<script>
$(function() {
$(".img-w").each(function() {
$(this).wrap("<div class='img-c'></div>")
let imgSrc = $(this).find("img").attr("src");
$(this).css('background-image', 'url(' + imgSrc + ')');
})
$(".img-c").click(function() {
let w = $(this).outerWidth()
let h = $(this).outerHeight()
let x = $(this).offset().left
let y = $(this).offset().top
$(".active").not($(this)).remove()
let copy = $(this).clone();
copy.insertAfter($(this)).height(h).width(w).delay(500).addClass("active")
$(".active").css('top', y - 8);
$(".active").css('left', x - 8);
setTimeout(function() {
copy.addClass("positioned")
}, 0)
})
})
$(document).on("click", ".img-c.active", function() {
let copy = $(this)
copy.removeClass("positioned active").addClass("postactive")
setTimeout(function() {
copy.remove();
}, 500)
})
</script>
I know it has to do with the img-c.active.positioned top: 0 !important line.. if I remove it, it does work better however with some pictures I have to scroll down for or they look cut from the top at first when displayed... maybe there's a way to just go full page zoom no matter where on the page I am?sorry a bit of a newb here lol
Thank you!
The requirement is to get the image filling the screen when clicked, and then 'returning' to the same place when clicked again - without the user having to scroll up or down to see it.
If you change the positioning of your selected image div from absolute to fixed but maintain all your other settings it will position at the top of the viewport, covering the underlying gallery and when clicked will reveal the underlying gallery in the same place the user had it - which is probably what they are expecting.
.img-c.active {
width: 100% !important;
height: 100% !important;
position:fixed; /* changed from absolute */
z-index: 2;
//transform: translateX(-50%);
}
.img-c.postactive {
position:fixed; /* changed from absolute */
z-index: 2;
pointer-events: none;
}
(You can probably get rid of the two !important too since setting width/height 100% will be sufficient.)
Try it in this snippet, selecting full screen and scroll down and click the yellow square as an example. (Colors are used instead of images just for this demo.)
$(function() {
$(".img-w").each(function() {
$(this).wrap("<div class='img-c'></div>")
let imgSrc = $(this).find("img").attr("src");
$(this).css('background-image', 'url(' + imgSrc + ')');
})
$(".img-c").click(function() {
let w = $(this).outerWidth()
let h = $(this).outerHeight()
let x = $(this).offset().left
let y = $(this).offset().top
$(".active").not($(this)).remove()
let copy = $(this).clone();
copy.insertAfter($(this)).height(h).width(w).delay(500).addClass("active")
$(".active").css('top', y - 8);
$(".active").css('left', x - 8);
setTimeout(function() {
copy.addClass("positioned")
}, 0)
})
})
$(document).on("click", ".img-c.active", function() {
let copy = $(this)
copy.removeClass("positioned active").addClass("postactive")
setTimeout(function() {
copy.remove();
}, 500)
})
/****Gallery****/
.gallery {
width: 100%;
margin-right: 20px;
margin-left: 20px;
border-radius: 3px;
overflow: hidden;
//position: relative;
}
.img-c {
width: 250px;
height: 250px;
float: left;
position: relative;
overflow: hidden;
}
.img-w {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
cursor: pointer;
transition: transform ease-in-out 300ms;
margin: 5px 5px;
}
.img-w img {
display: none;
}
.img-c {
transition: width ease 400ms, height ease 350ms, left cubic-bezier(0.4, 0, 0.2, 1) 420ms, top cubic-bezier(0.4, 0, 0.2, 1) 420ms;
}
.img-c:hover .img-w {
transform: scale(1.08);
transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;
}
.img-c.active {
width: 100% !important;
height: 100% !important;
position: absolute;
position:fixed;
z-index: 2;
//transform: translateX(-50%);
}
.img-c.postactive {
position: absolute;
position:fixed;
z-index: 2;
pointer-events: none;
}
.img-c.active.positioned {
left: 0 !important;
top: 0 !important;
transition-delay: 50ms;
}
/* bit of styling added just to use background color instead of imgs for demo only */
.img-w {
background-color:cyan;
}
.img-c {
background-color:magenta;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
<div class="gallery">
<div class="img-w">
<img src="gallery/m1.jpg" />
</div>
<div class="img-w">
<img src="gallery/m2.jpg" />
</div>
<div class="img-w">
<img src="gallery/m3.jpg" />
</div>
<div class="img-w">
<img src="gallery/m4.jpg" />
</div>
<div class="img-w">
<img src="gallery/m5.jpg" />
</div>
<div class="img-w">
<img src="gallery/m6.jpg" />
</div>
<div class="img-w">
<img src="gallery/m7.jpg" />
</div>
<div class="img-w">
<img src="gallery/m8.jpg" />
</div>
<div class="img-w">
<img src="gallery/p1.jpg" />
</div>
<div class="img-w">
<img src="gallery/p2.jpg" />
</div>
<div class="img-w">
<img src="gallery/p3.jpg" />
</div>
<div class="img-w">
<img src="gallery/p4.jpg" />
</div>
<div class="img-w">
<img src="gallery/p5.jpg" />
</div>
<div class="img-w">
<img src="gallery/p6.jpg" />
</div>
<div class="img-w">
<img src="gallery/p7.jpg" />
</div>
<div class="img-w">
<img src="gallery/p8.jpg" />
</div>
<div class="img-w">
<img src="gallery/p9.jpg" />
</div>
<div class="img-w">
<img src="gallery/u1.jpg" />
</div>
<div class="img-w">
<img src="gallery/u2.jpg" />
</div>
<div class="img-w">
<img src="gallery/u3.jpg" />
</div>
<div class="img-w">
<img src="gallery/u4.jpg" />
</div>
<div class="img-w">
<img src="gallery/u5.jpg" />
</div>
<div class="img-w">
<img src="gallery/u6.jpg" />
</div>
<div class="img-w" style="background-color:yellow;"><!-- background color added just for test -->
<img src="gallery/u7.jpg" />
</div>
<div class="img-w">
<img src="gallery/u8.jpg" />
</div>
</div>
<br>
<div class="center">
<p class="bold ">Page 1 | Page 2
</p>
</div>

Why Swiper JS arrows begin to work after I move a slide with a swipe and how can I fix it?

I got swiper-js slider that's opens in a modal window. The arrows doesn't work until I drag(even a slight drag is enough) a photo left of right. After that everything is ok. I've added "observer: true";
"observeParents: true" parameters to the code - that doesn't solve the issue. Need some help!
HTML:
<div id="overlay" class="hidden">
<div class="swiper-container modal-preview-gallery">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/bigger/${fileName}" alt="" />
</div>
<div class="swiper-slide">
<img src="./img/bigger/${fileName}" alt="" />
</div>
<div class="swiper-slide">
<img src="./img/bigger/${fileName}" alt="" />
</div>
</div>
<div class="swiper-button-next overlay-arrow"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
CSS:
#overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
z-index: 99;
background: #607a68c5;
}
.modal-preview-gallery {
width: 1000px;
height: 700px;
overflow-x: hidden;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
.modal-preview-gallery .swiper-wrapper {
width: 100%;
height: 100%;
}
.hidden {
display: none !important;
}
JS:
photo.addEventListener("click", (e) => {
if (e.target.tagName === "IMG") {
modalPreviewSwiper.slideTo(
+e.target.parentElement.dataset.swiperSlideIndex + 1
);
toogleGallery();
};
let modalPreviewSwiper = new Swiper(".modal-preview-gallery", {
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
observer: true,
observeParents: true,
});
modalPreviewSwiper.update();

Slick Carousel can't insert a second slider without turn a broken grid

I'm got some problem implementing Slick within a CSS3 Grid environment. I can't implement more than one slide, without breaking the grid and getting totally broken.
Here's the code that I'm working.
$( document ).ready(function() {
$('#carousel').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 2,
dots: true,
settings: "unslick"
});
});
#main {
display: grid;
grid-template-rows: 10vh auto auto 10vh;
grid-template-areas: "header nav" "carousel carousel" "content content" "form form";
}
.mainCarousel {
grid-area: carousel;
background: gray;
}
.carousel-item {
max-height: 300px;
}
#carousel img {
max-height: auto;
max-width: 100%;
}
<script src="http://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<link href="http://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<article class="mainCarousel">
<div id="carousel" class="carousel-item">
<h1>SLIDE 1</h1>
<h1>SLIDE 2</h1>
<h3>SLIDE 3</h3>
</div>
</article>
I would like to insert two or more slides, without problems.
Check the pictures attached.
Screen 1 without a second slide
Screen 2 with a second slide
This works if you remove grid-area: carousel; from .mainCarousel
$(document).ready(function() {
$('#carousel').slick({
infinite: true,
autoplay: true,
slidesToShow: 2,
slidesToScroll: 2
});
});
#import "http://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css";
#main {
display: grid;
grid-template-rows: 10vh auto auto 10vh;
grid-template-areas: "header nav" "carousel carousel" "content content" "form form";
}
.mainCarousel {
/* grid-area: carousel; */
background: gray;
}
.carousel-item {
max-height: 300px;
}
<div id="main">
<article class="mainCarousel">
<div id="carousel" class="carousel-item">
<div>
<h1>SLIDE 1</h1>
</div>
<div>
<h1>SLIDE 2</h1>
</div>
<div>
<h3>SLIDE 3</h3>
</div>
</div>
</article>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>

How to Flip Div's in Randomly

I have created the application where All divs are Flip Vertically on hover. I wanted to make it random without hover. How should I do that?
.vertical.flip-container {
position: relative;
float: left;
margin-left: 50px;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
transform-origin: 100% 50px;
}
.vertical.flip-container:hover .flipper {
transform: rotateX(-180deg);
}
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper,
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 100px;
height: 100px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: red">
Rushikesh
</div>
<div class="back" style="background:green">
Jogle
</div>
</div>
</div>
Any suggestions would be thankful.
I simplified your markup and CSS quite a bit. Also gave it a more 3D look.
You can use setInterval to flip them hover:
http://jsfiddle.net/7x75466y/5/
var $flippers = $(".flip-container"),
qtFlippers = $flippers.length;
setInterval(function () {
$flippers.eq(Math.floor(Math.random()*qtFlippers)).toggleClass('hover');
}, 1000);
Here is a JSfiddle that selects a random tile, and applies an action to it at every second (using setTimeout). You can perform whatever action you like on the tile. Using jQuery
http://jsfiddle.net/7x75466y/2/
var containers = $(".flip-container")
setInterval(function() {
var target = containers.eq(Math.floor(Math.random() * containers.size()))
target.fadeToggle() //DO WHAT YOU WANT TO THE TARGET
}, 1000)

Categories