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>
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 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 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();
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>
I've got slick carousel on my page and working. I'm trying to make the images center though I'm not having much luck. I've looked at other questions and tried their solutions but still no luck.
Class for carousel
<div class="your-class">
<div class="ad1img">
<img src="images/ad1.jpg" /></div>
<div class="ad2img">
<img src="images/ad2.jpg" /></div>
<div class="ad3img">
<img src="images/ad3.jpg" /></div>
</div>
Javascript code
<script type="text/javascript">
$(document).ready(function () {
$('.your-class').slick({
arrows: false,
dots: true,
autoplay: true,
swipe: false
});
});
</script>
CSS
.ad1img {
margin: 0 auto;
}
.ad2img {
margin: 0 auto;
}
.ad3img {
margin: 0 auto;
}
Carousel Example
You may need to set an outer div width and then can center the inner contents:
$(document).ready(function() {
$('.your-class').slick({
arrows: false,
dots: true,
autoplay: true,
swipe: false
});
});
.your-class {
width: 800px;
border: 1px solid black;
}
.img-div {
width: 100%;
}
.img-div img {
margin: 0 auto;
}
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<div class="your-class">
<div class="img-div" id="ad1img">
<img src="https://via.placeholder.com/300x150" />
</div>
<div class="img-div" id="ad2img">
<img src="https://via.placeholder.com/300x150" />
</div>
<div class="img-div" id="ad3img">
<img src="https://via.placeholder.com/300x150" />
</div>
</div>
You have to center you image> See code below
HTML
<div class="your-class">
<div class="adimg ad1img">
<img src="" />
</div>
<div class="adimg ad2img">
<img src="" />
</div>
<div class="adimg ad3img">
<img src="" />
</div>
</div>
CSS
.adimg img{
margin: 0 auto;
}
Use CSS like this:
$(document).ready(function() {
$('.your-class').slick({
arrows: false,
dots: true,
autoplay: true,
swipe: false
});
});
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/><!-- Add the slick-theme.css if you want default styling --><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>.your-class {
width: 20px;
border: 1px solid black;
}
.ad1img {
margin: auto;
width: 50%;
padding: 10px;
}
.ad2img {
margin: auto;
width: 50%;
padding: 10px;
}
.ad3img {
margin: auto;
width: 50%;
padding: 10px;
}
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<div class="your-class">
<div class="img-div" id="ad1img">
<img src="https://via.placeholder.com/300x150" />
</div>
<div class="img-div" id="ad2img">
<img src="https://via.placeholder.com/300x150" />
</div>
<div class="img-div" id="ad3img">
<img src="https://via.placeholder.com/300x150" />
</div>
</div>