Swiper Slider Vertical + Multiple columns thumb gallery auto swiping issue

Swiper Slider Vertical + Multiple columns thumb gallery auto swiping issue - javascript

I am trying to create a vertical thumb gallery that controls a main gallery. The issue I'm having is that when some of the thumbs are clicked, the thumb gallery automatically slides. Is there a way to disable that sliding, and make it so that all sliding only occurs when the nav buttons are clicked?
I'm also running into a spacing issue in the thumb gallery, which is evident when viewing the fiddle/snippet below. I need a 6px gap. Also, the thumbs in the second column are being cut off. I don't understand, because I set a width of 166px for the gallery (2 80px media items + 6px gap = 166px).
https://jsfiddle.net/guqsayj3/
let galleryThumbs = new Swiper('.prod-gallery .gallery-thumbs', {
spaceBetween: 6,
slidesPerGroup: 1,
slidesPerView: 5,
slidesPerColumn: 2,
//slideToClickedSlide: true,
//allowTouchMove: false,
//freeMode: true,
//watchSlidesVisibility: true,
//watchSlidesProgress: true,
direction: 'vertical',
noSwiping: false,
navigation: {
nextEl: '.gallery-thumbs-wrap .next',
prevEl: '.gallery-thumbs-wrap .prev',
},
//controller: {
//control: galleryTop,
//},
});
let galleryTop = new Swiper('.prod-gallery .gallery-main', {
spaceBetween: 10,
thumbs: {
swiper: galleryThumbs
}
});
//galleryThumbs.controller.control = galleryTop;
.prod-gallery {
display: grid;
grid-template-columns: 166px minmax(20px, 76px) 300px;
align-items: center;
}
.prod-gallery .gallery-thumbs {
height: 530px;
}
.prod-gallery .gallery-thumbs .swiper-slide {
cursor: pointer;
width: 80px;
opacity: 0.4;
}
.prod-gallery .gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
.prod-gallery .gallery-thumbs .media {
width: 80px;
height: 100px;
background: grey;
display: flex;
align-items: center;
justify-content: center;
}
.prod-gallery .gallery-main {
width: 100%;
grid-column-start: 3;
}
.prod-gallery .gallery-main .media {
width: 300px;
height: 300px;
background: grey;
display: flex;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
height: auto;
}
<script src="https://unpkg.com/swiper#6.3.4/swiper-bundle.js"></script>
<link href="https://unpkg.com/swiper#6.3.4/swiper-bundle.css" rel="stylesheet"/>
<div class="prod-gallery">
<div class="gallery-thumbs-wrap swiper-no-swiping">
<!-- Nav -->
<div class="nav-btn prev">
<img src="https://via.placeholder.com/30x30">
</div>
<div class="nav-btn next">
<img src="https://via.placeholder.com/30x30">
</div>
<!-- Slider -->
<div class="gallery-thumbs swiper-container">
<div class="swiper-wrapper" style="height: 742px; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
<div class="swiper-slide">
<div class="media">1</div>
</div>
<div class="swiper-slide">
<div class="media">2</div>
</div>
<div class="swiper-slide">
<div class="media">3</div>
</div>
<div class="swiper-slide">
<div class="media">4</div>
</div>
<div class="swiper-slide">
<div class="media">5</div>
</div>
<div class="swiper-slide">
<div class="media">6</div>
</div>
<div class="swiper-slide">
<div class="media">7</div>
</div>
<div class="swiper-slide">
<div class="media">8</div>
</div>
<div class="swiper-slide">
<div class="media">9</div>
</div>
<div class="swiper-slide">
<div class="media">10</div>
</div>
<div class="swiper-slide">
<div class="media">11</div>
</div>
<div class="swiper-slide">
<div class="media">12</div>
</div>
<div class="swiper-slide">
<div class="media">13</div>
</div>
</div>
</div>
</div>
<div class="gallery-main swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="media">1</div>
</div>
<div class="swiper-slide">
<div class="media">2</div>
</div>
<div class="swiper-slide">
<div class="media">3</div>
</div>
<div class="swiper-slide">
<div class="media">4</div>
</div>
<div class="swiper-slide">
<div class="media">5</div>
</div>
<div class="swiper-slide">
<div class="media">6</div>
</div>
<div class="swiper-slide">
<div class="media">7</div>
</div>
<div class="swiper-slide">
<div class="media">8</div>
</div>
<div class="swiper-slide">
<div class="media">9</div>
</div>
<div class="swiper-slide">
<div class="media">10</div>
</div>
<div class="swiper-slide">
<div class="media">11</div>
</div>
<div class="swiper-slide">
<div class="media">12</div>
</div>
<div class="swiper-slide">
<div class="media">13</div>
</div>
</div>
</div>
</div>

Add slidesPerColumnFill: 'row' and indents between slides will be correct

There are two options here:
Columns follow a vertical direction
DEMO
1..4
2..5
3..6
Need to add slidesPerColumnFill: 'row'
Columns follow a horizontal direction
DEMO
1..2
3..4
5..6
Need to set a property flex-direction: row; for .swiper-container-multirow-column > .swiper-wrapper
.swiper-container-multirow-column > .swiper-wrapper{
flex-direction: row;
}

Related

SwiperJS How to next and previous button not overlap images on slider

I'm trying to recreate the SwiperJS slider from this image, they also used SwiperJS to create this
My current situation can see in the image below, I have a problem with the next and previous buttons that are overlapping slider images, what is a solution for this, how can I shrink this container a little bit so my buttons are visible as the image above
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slider</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
<!-- Demo styles -->
<style>
.page-row {
max-width: 1267px;
margin: 0 auto;
}
figure {
margin: 1.4rem 0 0;
}
.swiper-slide img {
display: block;
max-width: 100%;
max-height: 100%;
height: auto;
margin: auto;
}
.swiper-container .swiper-slide a {
text-decoration: none;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 20px;
height: 3px;
opacity: .2;
border-radius: 20px;
background-color: #127749;
margin: 0 6px;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet-active {
opacity: 1;
}
.swiper-button-next, .swiper-button-prev {
color: #127749;
}
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 21px;
}
.swiper-container .swiper-pagination {
position: relative;
bottom: 0;
margin-top: 3px;
}
.swiper-content__wrapper-img-desktop {
display: none;
}
.swiper-content__wrapper-img-mobile {
display: block;
}
.swiper-container .swiper-slide p {
color: #333;
font-family: Helvetica,sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
margin-top: 10px;
text-transform: uppercase;
}
#media screen and (min-width: 768px) {
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 50px;
}
.swiper-content__wrapper-img-desktop {
display: block;
}
.swiper-content__wrapper-img-mobile {
display: none;
}
}
#media screen and (min-width: 410px) {
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 25px;
}
}
</style>
</head>
<body>
<div class="page-row">
<!-- Swiper -->
<div class="swiper-container swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-landing-page_550x615_crop_center.jpg?v=1614274913" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-landing-page_portrait_ae2f3a41-5cde-4dce-9174-61a5731a2df3_550x615_crop_center.jpg?v=1619775977" alt="">
</div>
<p>Rolex at David Rosas</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-rolex-collection_550x615_crop_center.jpg?v=1614275003" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-rolex-collection_portrait_550x615_crop_center.jpg?v=1619775994" alt="">
</div>
<p>Rolex Collection</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-new-2022-watches_550x615_crop_center.jpg?v=1648639177" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-new-2022-watches_portrait_550x615_crop_center.jpg?v=1648639227" alt="">
</div>
<p>New Watches 2022</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep_exploring_our_rolex_showrooms_landscape_06_550x615_crop_center.jpg?v=1624904926" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep_exploring_our_rolex_showrooms_portrait_06_550x615_crop_center.jpg?v=1624904992" alt="">
</div>
<p>Our History</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Showroom-Keep-Exploring-landscape_550x615_crop_center.jpg?v=1624902278" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Showroom-Keep-Exploring-portrait_550x615_crop_center.jpg?v=1624902292" alt="">
</div>
<p>Our Showrooms 2022</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-servicing-your-rolex_550x615_crop_center.jpg?v=1614772380" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/KEEP-E_3_550x615_crop_center.jpg?v=1619776214" alt="">
</div>
<p>Servicing Your Rolex</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Contact-Us-Keep-Exploring-landscape_550x615_crop_center.jpg?v=1624900776" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Contact-Us-Keep-Exploring-portrait_550x615_crop_center.jpg?v=1624900783" alt="">
</div>
<p>Contact Us</p>
</a>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></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(".mySwiper", {
slidesPerView: 2,
spaceBetween: 30,
effect: "slide",
scrollbar: false,
loop: false,
breakpointsInverse: true,
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 2,
loop: false
},
1024: {
slidesPerView: 3,
slidesPerGroup: 3,
slidesPerGroup: 1
}
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>

I found the solution to the problem was positioning of .swiper-container and .page-row here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slider</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
<style>
.page-row {
max-width: 1267px;
margin: 0 auto;
position: relative;
}
figure {
margin: 1.4rem 0 0;
}
.swiper-content__wrapper-img-desktop,
.swiper-content__wrapper-img-mobile {
position: relative;
width: 100%;
height: 100%;
}
.swiper-content__wrapper-img-desktop img,
.swiper-content__wrapper-img-mobile img {
max-width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.page-row .swiper-container {
position: unset;
margin: 0 45px;
}
.swiper-container .swiper-slide a {
text-decoration: none;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 20px;
height: 3px;
opacity: .2;
border-radius: 20px;
background-color: #127749;
margin: 0 6px;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet-active {
opacity: 1;
}
.swiper-button-next, .swiper-button-prev {
color: #127749;
}
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 21px;
}
.swiper-container .swiper-pagination {
position: relative;
bottom: 0;
margin-top: 3px;
}
.swiper-content__wrapper-img-desktop {
display: none;
}
.swiper-content__wrapper-img-mobile {
display: block;
}
.swiper-container .swiper-slide p {
color: #333;
font-family: Helvetica,sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
margin-top: 10px;
text-transform: uppercase;
}
#media screen and (min-width: 768px) {
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 50px;
}
.swiper-content__wrapper-img-desktop {
display: block;
}
.swiper-content__wrapper-img-mobile {
display: none;
}
}
#media screen and (min-width: 410px) {
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 25px;
}
}
</style>
</head>
<body>
<div class="page-row">
<!-- Swiper -->
<div class="swiper-container swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-landing-page_550x615_crop_center.jpg?v=1614274913" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-landing-page_portrait_ae2f3a41-5cde-4dce-9174-61a5731a2df3_550x615_crop_center.jpg?v=1619775977" alt="">
</div>
<p>Rolex at David Rosas</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-rolex-collection_550x615_crop_center.jpg?v=1614275003" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-rolex-collection_portrait_550x615_crop_center.jpg?v=1619775994" alt="">
</div>
<p>Rolex Collection</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-new-2022-watches_550x615_crop_center.jpg?v=1648639177" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-new-2022-watches_portrait_550x615_crop_center.jpg?v=1648639227" alt="">
</div>
<p>New Watches 2022</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep_exploring_our_rolex_showrooms_landscape_06_550x615_crop_center.jpg?v=1624904926" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep_exploring_our_rolex_showrooms_portrait_06_550x615_crop_center.jpg?v=1624904992" alt="">
</div>
<p>Our History</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Showroom-Keep-Exploring-landscape_550x615_crop_center.jpg?v=1624902278" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Showroom-Keep-Exploring-portrait_550x615_crop_center.jpg?v=1624902292" alt="">
</div>
<p>Our Showrooms 2022</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-servicing-your-rolex_550x615_crop_center.jpg?v=1614772380" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/KEEP-E_3_550x615_crop_center.jpg?v=1619776214" alt="">
</div>
<p>Servicing Your Rolex</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Contact-Us-Keep-Exploring-landscape_550x615_crop_center.jpg?v=1624900776" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Contact-Us-Keep-Exploring-portrait_550x615_crop_center.jpg?v=1624900783" alt="">
</div>
<p>Contact Us</p>
</a>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></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(".mySwiper", {
slidesPerView: 2,
spaceBetween: 30,
effect: "slide",
scrollbar: false,
loop: false,
breakpointsInverse: true,
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 2,
loop: false
},
1024: {
slidesPerView: 3,
slidesPerGroup: 3,
slidesPerGroup: 1
}
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>

I've tried inserting SwiperJS but it is not working?

I'm trying to create a swiper feature for a landing page using three different photos that transition by swiping with the next and prev button. Everything seems to be ok except the swiper is not working. This is my first time using Swiperjs API, I've inserted the CDN and I've used .on() jquery method to initialize the swipe feature. What newbie mistake am I making?
swiper.on('slideChangeTransitionStart', function (){
anime({
targets: '.serial',
scale: [2,1],
opacity: [0, 1],
easing:'easeInOutExpo',
})
anime({
targets: '.info h1',
translateX: [120,0],
opacity: [0,1],
easing: 'easeInOutExpo',
delay: 500,
})
})
let swiper = new Swiper('.swiper',{
loop:true,
speed:800,
effect: 'fade',
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
.swiper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1100px;
height: 535px;
background-color: red;
}
.swiper-slide {
position: relative;
width: 100%;
height: 100%;
}
.slide-content img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slide-content .content {
position: absolute;
top: 22vh;
left: 35vh;
Z-index: 2;
display: flex;
}
<div class="home-content">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-content">
<img src="/Images/daniel-lloyd-blunk-fernandez-HO25fYtAb8Y-unsplash.jpg">
<div class="content">
<span class="serial">01</span>
<div class="info">
<h1> Architectural<br>Design</h1>
Explore Projects
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="slide-content">
<img src="/Images/zhanjiang-chen-DPfCTqmzqqc-unsplash.jpg">
<div class="content">
<span class="serial">02</span>
<div class="info">
<h1> Structural<br>Design</h1>
Explore Projects
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="slide-content">
<img src="/Images/veerle-contant-z1YilPeZGAg-unsplash.jpg">
<div class="content">
<span class="serial">03</span>
<div class="info">
<h1> Exterior<br>Design</h1>
Explore Projects
</div>
</div>
</div>
</div>
</div>
</div>
<div class="short-note">
<div class="design">
<h1 class="interior"><span>01</span>Interior Design</h1>
<h1 class="interior"><span>02</span>Planning Design</h1>
</div>
<div class="award">
<h1 class="year">Experts since 1989</h1>
<p class="details">Award Winning Architecture Firm Based In Nairobi</p>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.js"></script>
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>

Finding the index of a owl carousel depending on where the user is at on the carousel

as mentioned above, is there a way to obtain the index of the carousel?
I want to change the text (indicated in the red arrow) based on the position of where the user is (blue arrow). I

You can use carousel events as per the document. Please try the below code.
var owl;
$(document).ready(function(){
owl = $(".owl-carousel").owlCarousel({
autoplay: false,
autoplaySpeed: 300,
loop: false,
navSpeed: 300,
items: 1,
margin: 2
});
owl.on('changed.owl.carousel', function(e) {
$('#continue-btn').html('Continue ' + e.item.index);
});
});
body {
margin: 0;
padding: 0;
}
.owl-carousel .item {
height: 120px;
background: #4DC7A0;
padding: 1rem;
list-style: none;
margin: 10px;
text-align: center;
color: white;
font-size: 20px;
line-height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script>
<div class="owl-carousel">
<div class="item"> slide1 </div>
<div class="item"> slide2 </div>
<div class="item"> slide3 </div>
<div class="item"> slide4 </div>
<div class="item"> slide5 </div>
<div class="item"> slide6 </div>
<div class="item"> slide7 </div>
<div class="item"> slide8 </div>
<div class="item"> slide9 </div>
</div>
<button id="continue-btn">
Continue
</button>

why my owl carousel items are sorted vertical not horizontal?

i want to ask, i have a problem in my owl carousel.
I want to make a center drag slider with the owl carousel, when I've made the code, the items are vertical not horizontal. what's wrong? I've also included a
Codepen
Is the owl carousel not automatic like the slick carousel? If you know, please help me. I need your help, because this is my first time using the owl carousel
HTML
<div class="slider-news">
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
<div class="item">
<div class="card secondary-card">
<div class="card-img-top">
<div class="d-flex" id="tags">
<div class="tags yellow">Article</div>
<div class="tags yellow">IT Services</div>
</div>
</div>
<div class="card-body">
<div class="title">
<h2>
3 Tantangan Umum ketika Melakukan IT Outsourcing
</h2>
</div>
</div>
</div>
</div>
</div>
SCSS
.card{
border: none;
border-radius: 20px;
&.secondary-card{
border-radius: 10px;
overflow: hidden;
box-shadow: 0px 13px 26px rgba(0,0,0,0.07);
.card-img-top{
height: 250px;
position: relative;
background-color:#c1c1c1;
#tags{
position: absolute;
top: 20px;
left: 20px;
.tags{
&:nth-child(1){
margin-right: 10px;
}
}
}
}
.card-body{
padding: 40px 30px;
.title{
h2{
position: relative;
font-size: 20px;
line-height: 27px;
&::before{
content: '';
position: absolute;
left: 0;
bottom: -10px;
height:4px;
width:23px;
background-color: red;
}
}
}
}
}
}
.tags{
display: flex;
justify-content: center;
align-items: center;
padding: 5px 8px;
color: #fff;
font-size: 13px;
&.yellow{
background-color: yellow;
}
}
JS
$(document).ready(function() {
$('.slider-news').owlCarousel({
center: true,
items: 4,
loop: false,
margin: 10,
nav:false,
dots:false,
// responsive: {
// 600: {
// items: 4
// }
// }
});
});

Hello instead of using the class .slider-news try using the owl-carousel on your mark up and javascript. I think it has some default styling on the libary. I worked on this library before and I used owl carousel. If you want custom style you can use a secondary class on owl carousel.
This is the the link on the codepen I edited.

How to maintain image aspect ratio in modal using flexbox?

I have an image gallery in my modal, which is styled using flexbox. The problem is that some pictures which are too large horizontally flow over and make the flexbox stretch, so the item next to it is messed up, eventhough the flex weights are set in css.
<div class="slideshow-container">
<div class="mySlides fade" style="display: block;">
<div class="numbertext">1 / 16</div>
<img src="./img/normal/image.jpg" class="galimg" style="height: 331px;">
<div class="text">Image description</div>
</div>
....
</div>
I want each image to maintain its aspect ratio. Some are landscape, some are portrait. So I thought I'd try the following:
var maxHeight = $('#modal-gallery').height()-39; // need 39px for the gallery navigation.
var maxWidth = $('#modal-gallery').width();
var ratio = maxHeight/maxWidth;
$('.galimg').each(function(i){
if ($(this).height()/$(this).width() > ratio){
$(this).width(maxWidth);
} else {
$(this).height(maxHeight);
}
});
CSS:
#modal-gallery { // this is the div surrounding the gallery
flex: 6;
display: flex;
margin-right: auto;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.slideshow-container {
display: flex;
position: relative;
margin: 0;
}
I know the problem is probably somewhere in my JS, as I tried logging the width and height and often got 0. The html is generated dynamically through JS. I tried adding an onImgLoad function, but didn't get any result.

There is no need to do a js thing. Just fix your css. Add some styles and HTML elements. The following is the most common way to show different size images in many websites (Please also expand the snippet to see how it behaves).
#modal-gallery { // this is the div surrounding the gallery
flex: 6;
display: flex;
margin-right: auto;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.slideshow-container {
display: flex;
position: relative;
margin: 0;
}
.mySlides{
display:block
}
.slide-image{
display:inline-block;
width:220px;
text-align:center;
vertical-align:top;
margin-bottom: 20px;
}
.img-container{
display:block;
width:200px;
}
.img-container .img{
display:table-cell;
vertical-align:middle;
text-align:center;
}
.img-container img{
max-height:200px;
max-width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="slide-image">
<div class="numbertext">1 / 16</div>
<div class="img-container">
<div class="img">
<img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" class="galimg" />
</div>
</div>
<div class="text">Image description</div>
</div>
<div class="slide-image">
<div class="numbertext">1 / 16</div>
<div class="img-container">
<div class="img">
<img src="http://i.imgur.com/RRUe0Mo.png" class="galimg" />
</div>
</div>
<div class="text">Image description</div>
</div>
<div class="slide-image">
<div class="numbertext">1 / 16</div>
<div class="img-container">
<div class="img">
<img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" class="galimg" />
</div>
</div>
<div class="text">Image description</div>
</div>
<div class="slide-image">
<div class="numbertext">1 / 16</div>
<div class="img-container">
<div class="img">
<img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" class="galimg" />
</div>
</div>
<div class="text">Image description</div>
</div>
<div class="slide-image">
<div class="numbertext">1 / 16</div>
<div class="img-container">
<div class="img">
<img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" class="galimg" />
</div>
</div>
<div class="text">Image description</div>
</div>
<div class="slide-image">
<div class="numbertext">1 / 16</div>
<div class="img-container">
<div class="img">
<img src="http://i.imgur.com/RRUe0Mo.png" class="galimg" />
</div>
</div>
<div class="text">Image description</div>
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Swiper Slider Vertical + Multiple columns thumb gallery auto swiping issue - javascript

Add slidesPerColumnFill: 'row' and indents between slides will be correct

Related

SwiperJS How to next and previous button not overlap images on slider

I've tried inserting SwiperJS but it is not working?

Finding the index of a owl carousel depending on where the user is at on the carousel

why my owl carousel items are sorted vertical not horizontal?

How to maintain image aspect ratio in modal using flexbox?

Categories

Resources