Slides flicker for 2nd slide with CSS transitions in swiper slider

Slides flicker for 2nd slide with CSS transitions in swiper slider - javascript

I have created a centered mode slider(each slide having an image only) with some transition effect when the slide changes, but the slide flickers when it goes from the first to the second slide as well as from the last slide to the first slide.
$(document).ready(function () {
var mySwiper = new Swiper(".swiper-container", {
observer: true,
observeParents: true,
slidesPerView: 3,
loopedSlides: 50,
centeredSlides: true,
loop: true,
watchSlidesVisibility: true,
speed: 1000,
navigation: {
nextEl: ".next-image",
prevEl: ".previous-image"
},
pagination: {
el: ".gallery-pagination",
clickable: true
}
});
mySwiper.init();
});
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
p {
color: #000;
}
.swiper-container {
position: relative;
width: 80%;
}
.swiper-slide {
transition: all 1000ms linear;
transform: scale(0.75);
}
.swiper-slide-active {
transform: scale(1);
}
.image-container {
width: auto;
height: 350px;
border-radius: 9px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 9px;
}
.gallery-pagination {
display: flex;
justify-content: center;
margin-top: 15px;
}
.next-image {
position: absolute;
right: 0;
top: 40%;
cursor: pointer;
}
.previous-image {
position: absolute;
left: 0;
top: 40%;
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/css/swiper.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 1 -->
<div class="swiper-slide">
<div class="image-container">
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg">
</div>
</div>
<!-- 2 -->
<div class="swiper-slide">
<div class="image-container">
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg">
</div>
</div>
<!-- 3 -->
<div class="swiper-slide">
<div class="image-container">
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg">
</div>
</div>
<!-- 4 -->
<div class="swiper-slide">
<div class="image-container">
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg">
</div>
</div>
</div>
<div class="navigation-pagination-wrapper">
<!-- Previous Navigation -->
<div class="previous-image">
<p>Prev</p>
</div>
<!-- Pagination -->
<div class="gallery-pagination"></div>
<!-- Next Navigation -->
<div class="next-image">
<p>Next</p>
</div>
</div>
</div>
https://codepen.io/suru235/pen/oNwdRzb
Have been researching possible fixes for this but cannot figure out what's wrong.
Any help will be much appreciated.
Thanks!

Related

Swiper js - How can i change the background color of the selected slide

what i'm trying to do is, change the background color of the selected slide when the link is visited. For example if outdoor link is visited on the new page i would like that slide background to be highlighted so user can understand which section they are in.
<div class="swiper mySwiperAnimationCollection home-page-animation-collection-div">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="https://arditicollection.com/collections/outdoor-spaces-furniture" >
<img src="https://cdn.shopify.com/s/files/1/0098/8318/9314/files/outdoor-collection.png?v=1672413080"
alt="Arditi Collection® OUTDOORS">
</a>
<p class="collectionTitleP">OUTDOORS</p>
</div>
<div class="swiper-slide">
<a href="https://arditicollection.com/collections/dining-tables" >
<img src="https://cdn.shopify.com/s/files/1/0098/8318/9314/files/Dining_Tables_Border.png?v=1670939498"
alt="Arditi Collection® DINING TABLES">
</a>
<p class="collectionTitleP">DINING TABLES</p>
</div>
<div class="swiper-slide">
<a href="https://arditicollection.com/collections/dining-chairs" >
<img src="https://cdn.shopify.com/s/files/1/0098/8318/9314/files/Dining_Chairs_Border.png?v=1670939510"
alt="Arditi Collection® DINING CHAIRS">
</a>
<p class="collectionTitleP">DINING CHAIRS</p>
</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiperAnimationCollection", {
slidesPerView: 10.5,
spaceBetween: 5,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 3000,
},
breakpoints: {
320: {
slidesPerView: 3.5,
spaceBetween: 5
},
768: {
slidesPerView: 5.5,
spaceBetween: 5
},
1024: {
slidesPerView: 10.5,
spaceBetween: 5
}
}
});
</script>

The easiest way is by the slide Active Class (API docs):
.swiper-slide.swiper-slide-active{
background: red;
}
Snippet:
var swiper = new Swiper(".swiper", {
slidesPerView: 3,
loop: true,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
.swiper-slide.swiper-slide-active{
background: red;
}
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
[scroll]{
min-height: 100vh;
background: gray;
}
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css" rel="stylesheet"/>
<div class="swiper mySwiper">
<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>

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.

Preventing SwiperJS from swiping past the last slide

UPDATED INFO:
I noticed the swiper-wrapper has a width of 4816px and each of the four slides have widths of 1174px:
<div class="swiper-wrapper" style="width: 4816px; transform: translate3d(0px, 0px, 0px);">
<div class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 1174px; margin-right: 30px;">
<div class="card-content">
<div class="card-header">
<span>Heading</span>
</div>
I've researched for hours, but am struggling with figuring out how to prevent the swiper from scrolling beyond the last slide. The swiper is set up with four slides that all have a fixed width (not responsive). When the viewport width is less than the width of the swiper container, the SwiperJS is activated. However, it allows the user to swipe far beyond the last (rightmost) slide.
JavaScript
const swiper = new Swiper('.swiper-container', {
observer: true,
observeParents: true,
spaceBetween: 30,
allowSlideNext: false,
freeMode: true,
resistanceRatio: 0,
watchSlidesVisibility: true,
watchSlidesProgress: true,
breakpoints: {
1200: {
allowSlideNext: true,
resistanceRatio: 0,
},
},
});
HTML
The swiper markup is typical:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
Slider 1
</div>
<div class="swiper-slide">
Slider 2
</div>
<div class="swiper-slide">
Slider 3
</div>
<div class="swiper-slide">
Slider 4
</div>
</div>
</div>
CSS
.swiper-container {
max-width: 1220px !important;
}
.swiper-container-product-cards {
margin: 0 auto;
max-width: 1250px;
position: relative;
overflow: hidden;
list-style: none;
padding: 0 5px;
z-index: 1;
}
.swiper-slide {
text-align: center;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 0;
border-radius: 0;
height: 578px;
width: 287px !important;
justify-content: space-around;
}

Swiper slider: how to make images smaller but still cover the whole window?

I'm using Swiper to create a slider that takes up the whole window, minus a few pixels for a bar-- no problem there.
(https://i.imgur.com/2MIJOvs.jpg)
However, as you can see, the image that I put in for the slide (https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260) is really enlarged.
How do I make the image show a little more of the width so it doesn't look so enlarged/low quality?
I tried messing with some of the width/height settings in the style/CSS, but either nothing changes or the whole container/wrapper gets messed up.
CSS: (in the html head in a style tag)
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
width: 100%;
}
.swiper-slide img{
min-width:100%;
}
Javascript:
<!-- Swiper JS -->
<script src="swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
spaceBetween: 0,
centeredSlides: true,
autoplay: {
delay: 8000,
disableOnInteraction: false,
},
loop:true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
HTML:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style= "background-image:url
("https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");"></div>
<div class="swiper-slide" style= "background-image:url
("https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");"></div>
<div class="swiper-slide" style= "background-image:url
("https://images.pexels.com/photos/733475/pexels-photo-733475.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");"></div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>

Here is the little update about fullscreen swiper slider .
var galleryTop = new Swiper('.gallery-top', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 10,
});
html,
body {
position: relative;
height: 100%;
}
body {
background: #000;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #fff;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-top {
height: 100%;
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.0/css/swiper.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.0/js/swiper.js"></script>
<!-- Swiper -->
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>

Flickity - Problem with multiple carousels

I have a problem with multiple Flickity obj on the page. I can easly generate Flickity with slides, but there is a problem with the next ones.
Here's is the code:
I'm trying to put flickity in a bootstrap tabpanel (4 panel, each has his own Flickity).
var featuredFlkty = new Flickity('.carousel-featured', {
cellAlign: 'left',
contain: true,
draggable: true,
groupCells: 1,
pageDots: false,
lazyLoad: true
});
var topSellerFlkty = new Flickity('.carousel-top-rated', {
cellAlign: 'left',
contain: true,
draggable: true,
groupCells: 1,
pageDots: false,
lazyLoad: true
});
.carousel-section {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 85px;
background-color: $carousel-bg-color;
border-top: $gallery-border;
padding: 7.5px 0;
.main-carousel {
max-width: 100%;
height: 100%;
padding: 0 40px;
.carousel-cell {
width: 66px;
height: 100%;
#extend %center-flex-display;
background-color: $product-slider-bg-color;
display: inline-flex;
margin: 0 5px;
padding: 5px;
cursor: pointer;
img {
max-width: 100%;
height: auto;
}
&.is-selected {
opacity: 1;
}
&:not(.is-selected) {
opacity: 0.3;
}
}
}
.flickity-button {
background: $text-color;
padding: 0;
}
.flickity-button:hover {
#extend %bg-hover-animation;
}
.flickity-prev-next-button {
width: 30px;
height: 100%;
border-radius: 0;
}
/* icon color */
.flickity-button-icon {
fill: white;
}
/* position outside */
.flickity-prev-next-button.previous {
left: 5px;
}
.flickity-prev-next-button.next {
right: 5px;
}
}
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="top-rated">
<div class="tabpanel-content">
<section class="carousel-section">
<div class="main-carousel carousel-top-rated">
<div class="carousel-cell is-selected" id="carousel-top-rated-cell-1">
<img src="images/rocker-recliner.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-top-rated-cell-2">
<img src="images/black-chair.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-top-rated-cell-3">
<img src="images/Bed.png" alt="..." />
</div>
</div>
</section>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="featured">
<div class="tabpanel-content">
<section class="carousel-section">
<div class="main-carousel carousel-featured">
<div class="carousel-cell" id="carousel-featured-1">
<img src="images/rocker-recliner.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-featured-2">
<img src="images/black-chair.png" alt="..." />
</div>
<div class="carousel-cell" id="carousel-featured-3">
<img src="images/Bed.png" alt="..." />
</div>
</div>
</section>
</div>
</div>
</div>
The styling is just great. Everything works on the 1st Flickity, but on the 2nd, there are no cells, just arrows and height=0 of the viewport.

Ok, I have found the solution :)
Flickity - resize option

Fort the ones still looking for a detailed solution to this problem, here's the code I'm using which works fine on multiple galleries in the same page:
const galleries = document.querySelectorAll('.block-gallery');
galleries.forEach(gallery=> {
new Flickity(gallery, {
contain: true,
setGallerySize: true,
wrapAround: true,
imagesLoaded: true
});
});

Develop Reference

JavaScript is the programming language of the Web.

Slides flicker for 2nd slide with CSS transitions in swiper slider - javascript

Related

Swiper js - How can i change the background color of the selected slide

Having multiple Owl Carousels on a Shopify page

Preventing SwiperJS from swiping past the last slide

Swiper slider: how to make images smaller but still cover the whole window?

Flickity - Problem with multiple carousels

Categories

Resources