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

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

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>

Related

Slick carousel is broken and some portion of next slide is shown on each slide

I have a slick slider on my website, but I have some issues with it. It looks completely broken (it's not showing the full content that I wanted to show) and the some portion of next slide is shown in each slide, I've made a code snipped, but the code was too big. I also added a picture of the same. So please guys help me out!
<script type="text/javascript">
$('.slider').slick({
dots: true,
infinite: true,
autoplay: true,
autoplayspeed: 3000,
slidesToShow: 1,
adaptiveHeight: true,
arrows: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
</script>
.main-banner {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
padding: 226px 0px 120px 0px;
position: relative;
overflow: hidden;
}
.main-banner:after {
content: '';
background-image: url(../images/slider-left-dec.jpg);
background-repeat: no-repeat;
position: absolute;
left: 0;
top: 60px;
width: 262px;
height: 625px;
z-index: 1;
}
.main-banner:before {
content: '';
background-image: url(../images/slider-right-dec.jpg);
background-repeat: no-repeat;
position: absolute;
right: 0;
top: 60px;
width: 1159px;
height: 797px;
z-index: -1;
}
.main-banner .left-content {
margin-right: 15px;
}
.main-banner .left-content h6 {
text-transform: capitalize;
font-size: 20px;
font-weight: 700;
color: #4da6e7;
margin-bottom: 15px;
text-transform: uppercase;
}
.main-banner .left-content h2 {
z-index: 2;
position: relative;
font-weight: 700;
font-size: 50px;
color: #2a2a2a;
margin-bottom: 20px;
}
.main-banner .left-content p {
margin-bottom: 30px;
margin-right: 45px;
}
.main-banner .right-image {
text-align: right;
position: relative;
z-index: 20;
}
.main-banner .right-image img {
max-width: 593px;
}
<div class="main-banner wow fadeIn" id="top" data-wow-duration="1s" data-wow-delay="0.5s">
<div class="container">
<div class="row slider">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-6 align-self-center">
<div class="left-content show-up header-text wow fadeInLeft" data-wow-duration="1s" data-wow-delay="1s">
<div class="row">
<div class="col-lg-12">
<h6>Graphics Designing</h6>
<h2>Designs to make you stand out.</h2>
<p>We don’t want you to ride a design trend that fades into obscurity and we don’t want you to become irrelevant by never adapting; we aim to place you in a position where your designs will be current, relevant, and suit both you and your customers.</p>
</div>
<div class="col-lg-12">
<div class="border-first-button scroll-to-section">
Get In Touch
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="right-image wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
<img src="assets/images/slider-dec-v3.png" alt="">
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row">
<div class="col-lg-6 align-self-center">
<div class="left-content show-up header-text wow fadeInLeft" data-wow-duration="1s" data-wow-delay="1s">
<div class="row">
<div class="col-lg-12">
<h6>Web Development</h6>
<h2>Online presence of your Business.</h2>
<p>Using the best-in-class technology, We build websites and apps that perform well and works exactly as per your requirements. It’s all about balancing the codes and creativity to offer eminent products.</p>
</div>
<div class="col-lg-12">
<div class="border-first-button scroll-to-section">
Get In Touch
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="right-image wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
<img src="assets/images/slider-dec-v3.png" alt="">
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row">
<div class="col-lg-6 align-self-center">
<div class="left-content show-up header-text wow fadeInLeft" data-wow-duration="1s" data-wow-delay="1s">
<div class="row">
<div class="col-lg-12">
<h6>Game Development</h6>
<h2>Creating the world of refreshment.</h2>
<p>Embracing game development on most popular platforms and reaching the attention of players with a wide variety of preferences is one of our main features. Expertise of our team allows us to cover all gaming platforms and develop an amazing product that matches the customer’s vision and players preferences.</p>
</div>
<div class="col-lg-12">
<div class="border-first-button scroll-to-section">
Get In Touch
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="right-image wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
<img src="assets/images/slider-dec-v3.png" alt="">
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row">
<div class="col-lg-6 align-self-center">
<div class="left-content show-up header-text wow fadeInLeft" data-wow-duration="1s" data-wow-delay="1s">
<div class="row">
<div class="col-lg-12">
<h6>App Development</h6>
<h2>Designs to make you stand out.</h2>
<p>Using solid expertise in mobile apps development, our team will help you create practical and seamless experiences on any device and get the best of mobile technology for your business. With so many ways to build mobile apps, we have expertise in choosing what the best solution is for your mobile app development strategy</p>
</div>
<div class="col-lg-12">
<div class="border-first-button scroll-to-section">
Get In Touch
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="right-image wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
<img src="assets/images/slider-dec-v3.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
this is how it's look

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.

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>

Zoom image on scroll with GSAP scrollTrigger

I built a zoom effect that is triggered with GSAP's ScrollTrigger, it works fine but I want to slowly (scrub) zoom the image on scroll and not animate the zoom on scroll when entering the trigger.
I found a javascript solution in the comments here but I am looking for a GSAP ScrollTrigger solution but it gives a good idea what I'm looking for:
Zoom an image on scroll with javascript
This is what I have so far:
gsap.to( ".scrollimgzoom", {
duration: 3,
scrollTrigger: {
trigger: ".scrollimgzoom",
start: "top 70%",
end: "top 30%",
scrub: true,
toggleClass: "scrollimgzoomin",
markers: {
startColor: "red",
endColor: "red"
}
}
})
.animate {
width:100%;
height:100vh;
}
.scrollimgzoomcontainer {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.scrollimgzoom {
width: 100%;
height: 100%;
transition: all 1s;
}
.scrollimgzoomin {
transform: scale(1.2);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script>
<section class="animate"></section>
<section class="animate three">
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="scrollimgzoomcontainer">
<div class="scrollimgzoom" style="background: url(https://source.unsplash.com/random) no-repeat center center; background-size:cover;"></div>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
</section>
<section class="animate"></section>

Actually the solution is very simple (thanks to Zack in the comments of my initial question) and you can find it here:
gsap.to( ".scrollimgzoom", {
scale: 2,
scrollTrigger: {
trigger: ".scrollimgzoom",
start: "top 80%",
end: "top 10%",
scrub: true,
toggleClass: "scrollimgzoomin",
markers: {
startColor: "red",
endColor: "red"
}
}
})
.animate {
width:100%;
height:100vh;
}
.scrollimgzoomcontainer {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.scrollimgzoom {
width: 100%;
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ScrollTrigger.min.js"></script>
<section class="animate"></section>
<section class="animate three">
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="scrollimgzoomcontainer">
<div class="scrollimgzoom" style="background: url(https://source.unsplash.com/random) no-repeat center center; background-size:cover;"></div>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
</section>
<section class="animate"></section>

Swiper Slider Vertical + Multiple columns thumb gallery auto swiping issue

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;
}

Develop Reference

JavaScript is the programming language of the Web.

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

Related

Slick carousel is broken and some portion of next slide is shown on each slide

Having multiple Owl Carousels on a Shopify page

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

Zoom image on scroll with GSAP scrollTrigger

Swiper Slider Vertical + Multiple columns thumb gallery auto swiping issue

Categories

Resources