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>
Related
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>
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.
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!
I'm creating a slide on a site that uses bootstrap 4 and owl carousel 2. Do I need to put the navigation on the slide, how do this, see my code below:
NOTE: I need to make navigation within a container not to get 100% of the width of the window.
HTML
<section class="slide">
<div class="owl-carousel">
<div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
<div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
</div>
<div class="container">
<div class="nav-container"></div>
</div>
</section>
JS
$('.owl-carousel').owlCarousel({
loop:true,
items:1,
autoplay:true,
autoplayHoverPause:true,
nav:true,
navText:['<div class="nav-slide"><i class="flaticon-arrows-1"></i></div>', '<div class="nav-slide"><i class="flaticon-arrows"></i></div>'],
navContainer:'.nav-container'
})
<section class="slide">
<div class="owl-carousel">
<div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
<div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
</div>
<div class="slide-content">
<div class="container">
<div class="nav-container"></div>
</div>
</div>
</section>
.slide {
position: relative;
}
.slide .slide-content {
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: 0;
right: 0;
z-index: 9999;
}
This will place the navigation in the center of the slide. if you want it at the bottom adjust to suit
I would recommend using flexbox css for this. justify-content: center will align it horizontally, and align-content: center or align-items: center will center it vertically.
Without your css, I'm guessing here a bit, but I put together a quick example to show how the navigation can be set to not to stretch 100% width;
http://jsfiddle.net/8qhfj6u2/
HTML
<div class="owl-carousel">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
</div>
<div class="container">
<div class="nav-container"></div>
</div>
CSS
body{
background: #ccc;
}
.owl-carousel .item {
height: 10rem;
background: #4DC7A0;
padding: 1rem;
}
.container{
height: 300px;
width: 400px;
margin: 0 auto;
background: #000;
display: flex;
align-items: center;
}
.nav-container{
background: #fff;
width: 300px;
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 5px;
}
JavaScript
$(document).ready(function () {
$('.owl-carousel').owlCarousel({
loop:true,
items:1,
autoplay:true,
autoplayHoverPause:true,
nav:true,
navText:['<div class="prev">Previous</div>','<div class="next">Next</div>'],
navContainer:'.nav-container'
})
});
I'm using the jQuery Flip Plugin. I'm trying to have a couple of cards on top of each other and when the user clicks on a card, it should turn and show the backside. But now only the text is flipping and not the card behind the text. I managed to have it wokring before, but I had to make classes for front and back.
$(function() {
$(".card").flip({
axis: "y",
reverse: "false",
trigger: "click",
speed: 700,
});
});
.card {
position: absolute;
width: 400px;
height: 248px;
margin: 2px;
background-color: #F3ECE2;
border: 5px blue solid;
padding: 10px;
border-radius: 25px;
}
#card-1 {
left: 0px;
top: 0px;
z-index: 1;
}
#card-2 {
left: 10px;
top: -238px;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js"></script>
<div class="card" id="card-1">
<div>
Front1
</div>
<div>
Back1
</div>
</div>
<div class="card" id="card-2">
<div>
Front2
</div>
<div>
Back2"
</div>
</div>
From my understanding of the website, you need to add front and back classes to the corresponding div's, as shown:
$(function() {
$(".card").flip({
axis: "y",
reverse: "false",
trigger: "click",
speed: 700,
});
});
.card{
width:200px;
height:100px;
position:relative;
}
.front,
.back {
background-color: #F3ECE2;
border: 5px blue solid;
padding: 10px;
border-radius: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js"></script>
<div class="card" id="card-1">
<div class="front">
Front1
</div>
<div class="back">
Back1
</div>
</div>
<div class="card" id="card-2">
<div class="front">
Front2
</div>
<div class="back">
Back2
</div>
</div>