I'm struggling with changing swiper slide carousel in cover flow.
This is what I got for now.
var mySwiper = new Swiper('.swiper-container-aboutus', {
// Optional parameters
effect: 'coverflow',
loop: true,
centeredSlides: true,
slidesPerView: 3,
initialSlide: 0,
keyboardControl: true,
mousewheelControl: true,
lazyLoading: true,
preventClicks: false,
preventClicksPropagation: false,
lazyLoadingInPrevNext: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
coverflow: {
rotate: 0,
stretch: 0,
depth: 250,
modifier: 1,
slideShadows: false,
}
})
.swiper-container-aboutus {
height: 500px;
}
.swiper-slide{
background-color: rgb(255, 0, 0);
width: 490px;
z-index: 1;
transition-duration: 0ms;
display: inline-block;
overflow: hidden;
height: 490px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" />
<div class="row swiper-container-aboutus">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
It functions but I would like to change carousel to look like this:
I have tried by adding this piece of code:
.swiper-slide{
background-color: rgb(255, 0, 0);
width: 490px;
z-index: 1;
transition-duration: 0ms;
display: inline-block;
overflow: hidden;
height: 490px;
transform: rotate(45deg) !important;
}
I added transform: rotate(45deg) !important; to transform the slides in diamond shape and they were transformed, but with that I have lost builtin swiper.js translate3d() function.
Is that possible with Swiper.js to edit slides it that way and still have cover flow working as it should?
Any other tips are greatly welcomed.
EDIT
When I put
loop:true;
centeredSlides: true,
slidesPerView: 3,
initialSlide: 2,
My cover flow starts from left side and not from middle like I would like.
Why is that? On photo you can see it, and when I click for next one it shifts to right side.
Is it possible to start centered? I though that this centeredSlides: true will do it.
var mySwiper = new Swiper('.swiper-container-aboutus', {
// Optional parameters
effect: 'coverflow',
loop: true,
centeredSlides: true,
slidesPerView: 3,
initialSlide: 0,
keyboardControl: true,
mousewheelControl: true,
lazyLoading: true,
preventClicks: false,
preventClicksPropagation: false,
lazyLoadingInPrevNext: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
coverflow: {
rotate: 0,
stretch: 0,
depth: 250,
modifier: 1,
slideShadows: false,
}
})
.swiper-container-aboutus {
height: 200px;
}
.swiper-slide {
width: 60px;
z-index: 1;
transition-duration: 0ms;
display: inline-block;
height: 60px;
}
.slide-content {
background-color: rgb(255, 0, 0);
height: 100%;
border: 1px solid;
transform: rotate(45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" />
<div class="row swiper-container-aboutus">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-content">
Slide 1
</div>
</div>
<div class="swiper-slide">
<div class="slide-content">
Slide 2
</div>
</div>
<div class="swiper-slide">
<div class="slide-content">
Slide 3
</div>
</div>
<div class="swiper-slide">
<div class="slide-content">
Slide 4
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
Related
The page has a Swiper slider. The swiper-slide contains an image width: 660px and height: 600px. Their location: two slides in the center and on the sides of the halves of the slides.
How can I put them in such an arrangement and size so that the pictures are not compressed. Below is the layout diagram and code.
const swiper = new Swiper(".main-slider", {
loop: true,
centeredSlides: true,
spaceBetween: 30,
});
.main-slider .swiper-slide img {
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05);
border-radius: 40px;
height: 600px;
width: 100%;
}
.main-slider .swiper-slide {
width: 100% !important;
max-width: 673px !important;
}
<div class="slider-container swiper main-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/slider-1.png" alt="">
</div>
<div class="swiper-slide"><img src="./img/slider-2.png" alt=""></div>
<div class="swiper-slide"><img src="./img/slider-3.png" alt=""></div>
<div class="swiper-slide"><img src="./img/slider-4.png" alt=""></div>
</div>
</div>
Add slidesPerView: 2
const swiper = new Swiper(".main-slider", {
loop: true,
centeredSlides: true,
spaceBetween: 30,
slidesPerView: 2,
});
I need gifs to be animated always. When the page loads, the gif animates for the first second, and then stops. In order for it to start, I have to press the left mouse button.
When I remove the cursor from the image, it becomes inactive again.
What can be done to make gifs animated? What are the ways to solve this problem.
var swiper = new Swiper('.swiper-container', {
effect: 'cube',
grabCursor: true,
slidesPerView: 'auto',
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 50,
shadowScale: 0.3,
centerSlidesBounds: true,
},
direction: 'horizontal',
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
});
.main {
position: absolute;
//padding: 16px;
//margin-top:60px;
width: 50%;
}
.swiper-button-prev{
left: 2%;
}
.swiper-button-next{
left: 92%;
}
.swiper-pagination-bullets.swiper-pagination-horizontal {
width: 100%;
bottom: -25%;
position: relative;
}
.left-element {
background: silver;
display: inline-block;
position: absolute;
left: 100%;
width: 80%;
margin-top: 0;
}
h1.left-element {
width: 80%;
height: 90%
}
img{
width: 100%;
height: 100%;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Gif</title>
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="main">
<h1 class="left-element">12345</h1>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://i.stack.imgur.com/SBv4T.gif">
</div>
<div class="swiper-slide">
<img src="http://i.stack.imgur.com/SBv4T.gif">
</div>
<div class="swiper-slide">
<img src="http://i.stack.imgur.com/SBv4T.gif">
</div>
<div class="swiper-slide">
<img src="http://i.stack.imgur.com/SBv4T.gif">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</body>
</html>
i use slide swiper to display 12 product.
as you can see in the code the slide displayed in one row
so i wanna make it two rows and each row display two products so
as a result, one slide show 4 products by using 2 rows.
but here is problem, i use site which manage site
in there i can bring the products img and information using some specific code
like this ->
so now my coding look like second coding.
so i have to make some script to make 1row in each slide to 2 rows
any help will be so appreciated ! thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!-- Demo styles -->
<style>
body,
html {
padding: 0;
margin: 0;
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.swiper-slide img {
display: block;
width: 100%;
}
#media only screen and (min-width: 769px) {
.swiper-slide:first-child {
transition: transform 100ms;
}
.swiper-slide:first-child img {
transition: box-shadow 500ms;
}
.swiper-slide.swiper-slide-active:first-child {
transform: translateX(50%);
z-index: 2;
}
.swiper-slide.swiper-slide-active:first-child img {
box-shadow: 0px 32px 80px rgba(0, 0, 0, 0.35);
}
.swiper-slide:nth-child(2) {
transition: transform 100ms;
}
.swiper-slide.swiper-slide-next:nth-child(2) {
transform: translateX(55%);
z-index: 1;
}
.swiper-container[dir=rtl] .swiper-slide.swiper-slide-active:first-child {
transform: translateX(-50%);
}
.swiper-container[dir=rtl] .swiper-slide.swiper-slide-next:nth-child(2) {
transform: translateX(-55%);
}
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-001.jpg"></div>
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-002.jpg"></div>
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-003.jpg"></div>
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-004.jpg"></div>
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-005.jpg"></div>
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-006.jpg"></div>
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-007.jpg"></div>
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-008.jpg"></div>
<div class="swiper-slide"><img src="//cdn.magloft.com/github/swipehttps://swiperjs.com/demos/images/page-009.jpg"></div>
</div>
<div class="swiper-scrollbar"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
centeredSlides: false,
slidesPerGroupSkip: 1,
grabCursor: true,
keyboard: { enabled: true },
breakpoints: { 769: { slidesPerView: 2, slidesPerGroup: 2 } },
scrollbar: { el: '.swiper-scrollbar' },
navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
pagination: { el: '.swiper-pagination', clickable: true }
});
</script>
</body>
</html>
<div class="swiper-containertwo">
<div class="swiper-wrapper" style="margin-bottom:15px !important;">
<!--/loop_recmd_product(12)/-->
<div class="swiper-slide">
<div>
<a href="<!--/recmd_product#link/-->" class="SMS_Viewlink">
<dt class="thumb"><img src="<!--/recmd_product#mobile_image/-->" class="img" alt="" /></dt>
</a>
</div>
<div class="item-price-wrap">
<!--/if_recmd_product#is_soldout/-->
<div class="item-title">sold out<strike><!--/recmd_product#name(200)/--></strike></div>
<!--/else/-->
<div class="item-title"><!--/recmd_product#name(200)/--></div>
<!--/if_recmd_product#price_consumer(+1)/-->
<span class="item-price"><strike><!--/number/recmd_product#price_consumer/--><span class="won">$</span></strike></span>
<!--/end_if/-->
<!--/if_recmd_product#is_term_discount/-->
<span class="item-price"><strike><!--/number/recmd_product#price_sell/--><span class="won">$</span></strike></span>
<span class="item-price"><!--/number/recmd_product#price_discount/--><span class="won">$</span></span>
<!--/else/-->
<span class="item-price"><!--/if_recmd_product#price_replace/--><font class="item-price"><!--/recmd_product#price_replace/--><!--/else/--><!--/number/recmd_product#price_sell/--><span class="won">$</span><!--/end_if/--></font></span>
<!--/end_if/-->
<!--/end_if/-->
</div>
<!--/if_recmd_product#subname/-->
<div class="etc-info">
<div class="size"><!--/recmd_product#subname(150)/--></div>
<div class="review"><div class="name crema-product-reviews-count" data-product-code="<!--/recmd_product#uid/-->" data-format="리뷰 {{{count}}}" data-hide-if-zero="1"></div></div>
</div>
<!--/else/-->
<div class="review"><div class="name crema-product-reviews-count" data-product-code="<!--/recmd_product#uid/-->" data-format="리뷰 {{{count}}}" data-hide-if-zero="1"></div></div>
<!--/end_if/-->
<div class="icon-tags">
<!--/if_recmd_product#discount_icon/-->
<span style="padding-right:5px;"><img src="<!--/recmd_product#discount_icon/-->"></span>
<!--/end_if/-->
<!--/if_recmd_product#icons/-->
<!--/recmd_product#icons/-->
<!--/end_if/-->
</div>
</div>
<!--/end_loop/-->
</div>
<div class="swiper-scrollbartwo"></div>
</div>
<!-- Swiper JS -->
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-containertwo', {
slidesPerView: 4,
spaceBetween: 10,
slidesPerGroupSkip: 1,
centeredSlides: false,
grabCursor: true,
rows: 2,
breakpoints: { 769: { slidesPerView: 4, slidesPerGroup: 4,rows: 2 } },
scrollbar: { el: '.swiper-scrollbartwo' },
});
</script>
adding
slidesPerView: 2,
slidesPerColumn: 2,
slidesPerGroup:3,
this in script
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>
I have two slick sliders working well. Problem with the same navigation: When I slide the first and second slide, the second slide will slide by 2 (like 1:2), at the same time the first slide will slide by one.
I have tried with asNavFor but it has not split the slider1 and slider2 with the same navigation. Can anyone help me to achieve this? Solution will be marked sure.
$('.slider1').slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1,
rows: 1,
swipeToSlide: true,
asNavFor: '.slider2'
});
$('.slider2').slick({
dots: false,
infinite: false,
speed: 500,
slidesToShow: 2,
slidesToScroll: 2,
arrows: true,
asNavFor: '.slider1'
});
.slick-slide {
background: #3a8999;
color: white;
padding: 40px 0;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
}
.slick-prev:before,
.slick-next:before {
color: black !important;
}
.slick-dots {
bottom: -30px;
}
.slick-slide:nth-child(odd) {
background: #e84a69;
}
.slick-prev {
position: relative;
top: 45px !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
<section class="slider slider1">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
<div>slide6</div>
</section>
</div>
<div class="col-sm-6 col-md-6">
<section class="slider slider2">
<div>slide1</div>
<div>slide2</div>
<div>slide3</div>
<div>slide4</div>
<div>slide5</div>
<div>slide6</div>
</section>
</div>
</div>
</div>