I am trying to use two owl carousels on my page but I can't.
Gif: https://gyazo.com/51620bc2fa6183bdcaab511632e1eb57
The first one is working perfectly (the one in the top on the gif)
but the second one (the one below on the gif) is not working. It is set to show 4 images instead of the 2 I set. I don't know what to do
This one is working well:
<body>
<!-- MENU-->
<section>
<div class="owl-carousel owl-theme">
<div class="item">
<img src="img/image1.jpg">
</div>
<div class="item">
<img src="img/image2.jpg">
</div>
<div class="item">
<img src="img/image3.jpg">
</div>
<div class="item">
<img src="img/image4.jpg">
</div>
<div class="item">
<img src="img/image5.jpg">
</div>
<div class="item">
<img src="img/image6.jpg">
</div>
<div class="item">
<img src="img/image7.jpg">
</div>
<div class="item">
<img src="img/image8.jpg">
</div>
<div class="item">
<img src="img/image9.jpg">
</div>
</div>
<!--script MENU-->
<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>
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
loop:true,
responsive: {
0 : {
items : 1
},
600 : {
items : 2
},
1200 : {
items : 4
}
},
autoplay: true,
autoplayTimeout: 1500
});
})
</script>
</section>
But this one is not working well:
<header>
<div class="owl-carousel owl-theme">
<div class="item"><img src="/img/Group 1.jpg" alt="slide1" /></div>
<div class="item"><img src="/img/Group 2.jpg" alt="slide1" /></div>
</div>
<script>
$('.owl-carousel').owlCarousel({
loop:true,
margin:0,
nav:true,
dots:true,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
})
</script>
<!--Script HEADER-->
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
</header>
Href Menu:
<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" />
Href Header:
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
Css(header):
*{ margin:0; padding:0; box-sizing:border-box}
body {
background-color: #fff;
}
.item img{ height:450px; width:100%; object-fit:cover}
.owl-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 9999;
width: 100%;
}
.owl-nav button {
background: #fff !important;
width: 50px;
height: 50px;
display: block
}
.owl-nav button.owl-next {
float: right;
}
.owl-nav button.owl-prev {
float: left;
}
.owl-dots {
position: absolute;
bottom: 5%;
left: 0;
right: 0;
}
Both scripts with which you run the carousel are looking for a block with a class ".owl-carousel" and find them both. So, we have conflict. Both carousels initialized by every script snippets, but with diferent options.
You must be better - add diferent ID to every carousel and inintialize them separately (individually):
<div id="carousel-1" class="owl-carousel owl-theme">
...
</div>
<div id="carousel-2" class="owl-carousel owl-theme">
...
</div>
<script>
$("#carousel-1").owlCarousel({
items: 4,
...
});
</script>
<script>
$("#carousel-2").owlCarousel({
items: 2,
...
});
</script>
Related
I'm trying to achieve an automatic resizing of different brand logos for a company website I'm designing, inside an Own Carousel. The idea is for each logo to be of reasonable size.
Most of the logos are in SVG formats, available at https://wetransfer.com/downloads/44eb123d186e30519edc2d025dafd03420200110231646/112373 (for a week) : as you would see, they have a wide range of height / width ratio, so using a fixed-width and enforcing the correct ratio made some of them (the CNRS and CEA logos) too high.
The goal (taken from a random site):
The goal
What I got:
What I got
My code (HTML, then CSS based on Bootstrap 4, then the JS snippet that uses owl-carousel):
<div class="site-section">
<div class="container">
<div class="row justify-content-center text-center mb-5">
<div class="col-md-5">
<h2 class="section-heading">Ils nous ont fait confiance</h2>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col">
<div class="owl-carousel clients-carousel">
<img src="./img/clients/airbus-group.svg" class="client-logo limit-width" />
<img src="./img/clients/safran-group.png" class="client-logo limit-width" />
<img src="./img/clients/cnrs-fr.svg" class="client-logo limit-height" />
<img src="./img/clients/cea-fr.svg" class="client-logo limit-height" />
<img src="./img/clients/bic.svg" class="client-logo limit-width" />
<img src="./img/clients/edf.svg" class="client-logo limit-width" />
<img src="./img/clients/horiba.svg" class="client-logo limit-width" />
<img src="./img/clients/jenoptec-group.svg" class="client-logo limit-width" />
<img src="./img/clients/otis.svg" class="client-logo limit-width" />
<img src="./img/clients/thales.svg" class="client-logo limit-width" />
</div>
</div>
</div>
</div>
</div>
.clients-carousel .owl-stage-outer, .clients-carousel .owl-stage, .clients-carousel .owl-item {
display: flex;
}
.clients-carousel .owl-item {
margin-left: 1rem;
margin-right: 1rem;
}
.clients-carousel .owl-item img.client-logo {
width: 15em;
height: auto;
}
var siteOwlCarousel = function() {
$('.clients-carousel').owlCarousel({
center: true,
items: 3,
loop: true,
margin: 0,
autoplay: true,
smartSpeed: 1000,
nav:false,
dots:false,
autoWidth:true,
responsive: {
// breakpoint from 0 up
0 : {
items: 3
},
// breakpoint from 576 up
576 : {
items: 3
},
// breakpoint from 768 up
768 : {
items: 4,
center: false
},
992 : {
items: 4,
center: false
},
1200 : {
items: 4,
center: false
}
}
});
};
siteOwlCarousel();
Would somebody have an idea that relies on Flexbox?
Thanks in advance!
choumat
Change .owl-wrapper display property and owl-item display, float, vertical-align properties and set to max- width & height size.
I hope below snippet will help you lot.
var siteOwlCarousel = function() {
$('.clients-carousel').owlCarousel({
center: true,
items: 3,
loop: true,
margin: 10,
autoplay: true,
smartSpeed: 1000,
nav: false,
dots: false,
autoWidth: true,
responsive: {
0 : {
items: 2
},
576 : {
items: 3
},
768 : {
items: 4
},
992 : {
items: 4
},
1200 : {
items: 4
}
}
});
};
siteOwlCarousel();
.owl-carousel .owl-wrapper {
display: table!important;
}
.owl-carousel .owl-item {
display: table-cell!important;
float: none!important;
vertical-align: middle!important;
}
.clients-carousel .owl-item .item{
text-align: center!important;
padding: 15px 30px!important;
}
.clients-carousel .owl-item img{
max-width: 180px!important;
max-height: 50px!important;
display: inline-block!important;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="site-section">
<div class="container">
<div class="row justify-content-center text-center mb-5">
<div class="col-md-5">
<h2 class="section-heading">Ils nous ont fait confiance</h2>
</div>
</div>
<div class="row justify-content-center text-center">
<div class="col">
<div class="owl-carousel clients-carousel">
<div class="item"><img src="./img/clients/airbus-group.svg"></div>
<div class="item"><img src="./img/clients/safran-group.png"></div>
<div class="item"><img src="./img/clients/cnrs-fr.svg"></div>
<div class="item"><img src="./img/clients/cea-fr.svg"></div>
<div class="item"><img src="./img/clients/bic.svg"></div>
<div class="item"><img src="./img/clients/edf.svg"></div>
<div class="item"><img src="./img/clients/horiba.svg"></div>
<div class="item"><img src="./img/clients/jenoptec-group.svg"></div>
<div class="item"><img src="./img/clients/otis.svg"></div>
<div class="item"><img src="./img/clients/thales.svg"></div>
</div>
</div>
</div>
</div>
</div>
I'm trying to achieve this using Bootstrap 4.
(source: imgh.us)
As seen on the image I need 2 columns both having same height, no matter what is the resolution of the pictures inside. The left one is having one big picture and the right one 2 small ones with some gap aligned perfectly to the big one.
Any help would be really appreciated!
My code so far:
HTML:
<div class="row">
<div class="col-lg-6">
<div class="imagebox">
<img class="img-fluid" src="https://placehold.it/1000x1000" alt="">
</div>
</div>
<div class="col-lg-6">
<div class="imagebox">
<img class="img-fluid" src="https://placehold.it/400x600" alt="">
</div>
<div class="spacer30"></div>
<div class="imagebox">
<img class="img-fluid" src="https://placehold.it/400x600" alt="">
</div>
</div>
</div>
CSS:
.imagebox{
overflow: hidden;
width: 100%;
height: auto;
}
.spacer30{
height:30px;
}
It should be something like this.
(Run code snippet and open in full page)
$(document).ready(function() {
var loImage = $('#myHeightImage'),
loSideImages = $('#sideImages');
// http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached
loImage.on("load", function() {
loSideImages.height(loImage.height());
});
window.onresize = function(event) {
loSideImages.height(loImage.height());
};
});
div.col-md-6 div {
height: 50%;
background-position: center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<div class="container">
<div class="row">
<img src="http://lorempixel.com/1280/720/people" id="myHeightImage" class="col-md-6"/>
<div id="sideImages" class="col-md-6">
<div style="background-image: url(http://lorempixel.com/1280/720/animals)"></div>
<div style="background-image: url(http://lorempixel.com/1280/720/nature)"></div>
</div>
</div>
</div>
well #Quanta is correct, gave you a perfect example , if you want to add gap between right images you can add margin-bottom:1px to your right-top image, might help you, check out this snippet
$(document).ready(function() {
var loImage = $('#myHeightImage'),
loSideImages = $('#sideImages');
// http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached
loImage.on("load", function() {
loSideImages.height(loImage.height());
});
window.onresize = function(event) {
loSideImages.height(loImage.height());
};
});
div.col-md-6 div {
height: 50%;
background-position: center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<div class="container">
<div class="row">
<img src="http://lorempixel.com/1280/720/people" id="myHeightImage" class="col-md-6"/>
<div id="sideImages" class="col-md-6">
<div style="background-image: url(http://lorempixel.com/1280/720/animals);
margin-bottom: 1px;"></div>
<div style="background-image: url(http://lorempixel.com/1280/720/nature)"></div>
</div>
</div>
</div>
I'm trying to add text on hover over an image inside a row and col-md-3. I want it to change opacity to set ideal while displaying text in centered inside the image.
I have the opacity hover down but I'm struggling with the data-hover class and I have no clue where to place the text I want inside HTML and CSS
I've included a fiddle here with all the work I have accomplished thus far: https://jsfiddle.net/a8u05mw1/
HTML:
<div class="container-fluid">
<div id="wrapper">
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg>
</div>
<div class="col-md-3">
<img class="img-responsive" src=https://www.roys.co.uk/media/wysiwyg/FASHION/MENSWEAR-AW16-JOULES-COAT.jpg>
</div>
<div class="col-md-3">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/b1/5e/38/b15e38cd4864c85a52897d906a88710c.jpg>
</div>
<div class="col-md-3">
<img class="img-responsive" src=https://static1.squarespace.com/static/56b6a4bd07eaa0d2d0eddb7f/58678682bebafb6e8b0a4e2a/5867868b893fc0dff9edd97d/1483179664063/Andrew+Belliot-011.jpg?format=500w>
</div>
</div>
</div
</div>
CSS:
#wrapper img {
width: 100%;
transition-duration: 0.8s;
}
.col-md-3 {
padding: 0;
}
#wrapper img:hover {
opacity: 0.8;
transition-duration: 0.8s;
}
Answer 1: Without Bootstrap
jsfiddle answer 1
<div class="container-fluid">
<div id="wrapper">
<div class="row">
<div class="col-md-3">
<div class="img-container">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg style="width:100%;">
<div class="img-hover-text centered">Your text here</div>
</div>
</div>
<div class="col-md-3">
<div class="img-container">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/b1/5e/38/b15e38cd4864c85a52897d906a88710c.jpg>
<div class="img-hover-text centered">Your text here</div>
</div>
</div>
<div class="col-md-3">
<div class="img-container">
<img class="img-responsive" src=https://static1.squarespace.com/static/56b6a4bd07eaa0d2d0eddb7f/58678682bebafb6e8b0a4e2a/5867868b893fc0dff9edd97d/1483179664063/Andrew+Belliot-011.jpg?format=500w>
<div class="img-hover-text centered">Your text here</div>
</div>
</div>
</div>
</div>
</div>
Note: I removed the image which is no more available.
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* original example from question */
.img-responsive:hover + .img-hover-text {
display: block;
}
.img-hover-text:hover {
/* needed for the text to stay visible
when the cursor it just over it.
*/
display: block;
}
.img-hover-text {
display: none;
color: white;
font-size: 20px;
}
Answer 2: With Bootstrap
jsfiddle answer 2
I made a new example inspired with your code, but using tooltips from Booststrap / Popper.js. I used the bootstrap starter template to quickstart the use of Boostrap.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div class="img-container">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg style="width:100%;" data-toggle="tooltip" data-placement="auto" title="This is a Tooltip">
<div class="img-hover-text centered">Your text here</div>
</div>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
body {
padding: 20px;
}
.img-container {
position: relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-responsive:hover + .img-hover-text {
display: block;
}
.img-hover-text:hover {
/* needed for the text to stay visible
when the cursor it just over it.
*/
display: block;
}
.img-hover-text {
display: none;
color: white;
font-size: 20px;
}
// Enable tooltip everywhere
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Explaining Answer 1:
You want two things:
First, center some text over an image.
Then, apply a hover effect on the text so that it only appears when the cursor is hovering the image.
You can get a cool tutorial on how to center text over an image here | w3school.
<div class="container">
<img src="https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg" alt="Snow" style="width:100%;">
<div class="centered">Centered</div>
</div>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This will give you the following picture:
Warning: Don't be like me. Don't waste your time on a <p>. Use a <div> for the text directly.
<div class="container">
<img src="https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg" alt="Snow" style="width:100%;">
<p class="centered">Not Centered</p>
</div>
Otherwise you will see this:
Ok, now we have our centered text. Time to make it disappear. Let's go back to your code and modify it.
<div class="col-md-3">
<div class="img-container">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg style="width:100%;">
<div class="img-hover-text centered">Your text here</div>
</div>
.img-responsive:hover + .img-hover-text {
display: block;
}
.img-hover-text {
display: none;
color: white;
font-size: 20px;
}
However, if we stop there, something will be wrong. When we hover the cursor right on top of the text area, the text disappear! To correct that, add a last css rule:
/* needed for the text to stay visible
when the cursor it just over it. */
.img-hover-text:hover {
display: block;
}
Explaining answer 2
The idea is not to do the stuff we made by hand, by using a library: namely Popper.js which fortunately is used by Boostrap. We include the tooltip with data-toggle="tooltip" data-placement="auto" title="This is a Tooltip" inside the element we want to display the tooltip on hover. Here inside <img>.
To make is works, we also need to import the necessary library. Don't forget the <script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> at the end, just before closing </body> flag.
Done!
Long story short for those looking for a Boostrap answer.
Add a tooltip in the flag you want.
<img src=... data-toggle="tooltip" data-placement="auto" title="This is a Tooltip">
// Enable tooltip everywhere
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Don't forget to add Popper.js which is needed for the tooltip.
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
I try to use flickity to have a good looking lazy loading image carousel. It works great on chrome and safari but the slide doesn't size correctly to the image in firefox.
Please try the following link with firefox and another browser to get the idea: imagescroll
Does anyone knows how to fix the issue with firefox without losing the ability to have variable slide widths? Thank you very much!
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/flickity#2.0/dist/flickity.css" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<style>
* {box-sizing: border-box;}
body { margin: 0; padding: 0;}
.imgc {
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
.carousel img {
display: block;
height: 100%;
opacity: 0;
transition: opacity 0.7s;
}
.carousel img.flickity-lazyloaded {
opacity: 1;
}
</style>
<script src="https://unpkg.com/flickity#2.0/dist/flickity.pkgd.min.js"></script>
</head>
<body>
<!-- Flickity HTML init -->
<div class="carousel" data-flickity='{ "imagesLoaded": true, "percentPosition": false, "wrapAround":true,"draggable": true, "pageDots": false, "prevNextButtons": false,"setGallerySize": false,"lazyLoad":true,"lazyLoad": 1}'>
<div class="imgc" style="background-image: url('static/room/image1_small.jpg')">
<img src="static/room/image1_small.jpg" data-flickity-lazyload="static/room/comp/image1.jpg" alt="orange tree" />
</div>
<div class="imgc" style="background-image: url('static/room/image2_small.jpg')">
<img src="static/room/image2_small.jpg" data-flickity-lazyload="static/room/comp/image2.jpg" alt="submerged" />
</div>
<div class="imgc" style="background-image: url('static/room/image3_small.jpg')">
<img src="static/room/image3_small.jpg" data-flickity-lazyload="static/room/comp/image3.jpg" alt="look-out" />
</div>
<div class="imgc" style="background-image: url('static/room/image4_small.jpg')">
<img src="static/room/image4_small.jpg" data-flickity-lazyload="static/room/comp/image4.jpg" alt="One World Trade" />
</div>
<div class="imgc" style="background-image: url('static/room/image5_small.jpg')">
<img src="static/room/image5_small.jpg" data-flickity-lazyload="static/room/comp/image5.jpg" alt="drizzle" />
</div>
<div class="imgc" style="background-image: url('static/room/image6_small.jpg')">
<img src="static/room/image6_small.jpg" data-flickity-lazyload="static/room/comp/image6.jpg" alt="cat nose" />
</div>
</div>
</body>
</html>
I try to learn Polymer and until now, I think I am in a good way. However, I found a framework which has the same Google Material Design and I am trying to implement on of their tutorials to Polymer code.
The framework is: http://materializecss.com/ and the component I try to implement is the Card reveal
I have the code of how it should be on materializecss
<div class="col l4 m4 s1">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="responsive-img" src="/static/images/myimage.png">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Training Estimation <i class="mdi-navigation-more-vert right"></i></span>
<p>This is a link</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title <i class="mdi-navigation-close right"></i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
However, I don't know how to start and rewrite the same feature on Polymer directly.
Can be done using polymer core-animated-pages.
Demo and the code: https://github.com/DinethH/card-reveal
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-shadow/paper-shadow.html">
<link rel="import" href="../../bower_components/font-roboto/roboto.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../../bower_components/core-animated-pages/transitions/slide-up.html">
<link rel="import" href="../../bower_components/core-animated-pages/transitions/slide-down.html">
<link rel="import" href="../../bower_components/core-animated-pages/transitions/cross-fade.html">
<polymer-element name="card-reveal" center layout>
<template>
<style>
paper-shadow,
core-animated-pages section {
height: 500px;
width: 500px;
}
core-animated-pages section {
overflow: hidden;
}
h3 {
font-weight: 300;
font-size: 26px;
margin: 0;
padding: 0;
padding-bottom: 10px;
}
.card-content,
.card-reveal {
padding: 20px;
background: white;
height: 500px;
}
a {
color: orange;
text-transform: uppercase;
}
</style>
<paper-shadow>
<core-animated-pages transitions="slide-up" selected="{{selected}}">
<section>
<div>
<img src="http://lorempixel.com/500/380/">
<div>
<div class="card-content">
<div layout horizontal>
<div flex>
<h3>{{item.title}}</h3>
</div>
<div>
<paper-icon-button on-tap="{{reveal}}" icon="more-vert"></paper-icon-button>
</div>
</div>
<a>This is a link</a>
</div>
</div>
</div>
</section>
<section>
<div class="card-reveal" slide-up cross-fade>
<div layout horizontal>
<div flex>
<h3>{{item.title}}</h3>
</div>
<div>
<paper-icon-button on-tap="{{reveal}}" icon="close"></paper-icon-button>
</div>
</div>
<div>
{{item.more}}
</div>
</div>
</section>
</core-animated-pages>
</paper-shadow>
</template>
<script>
Polymer({
created: function () {
this.item = {
title: "Card Title",
more: "Here is some more information about this product that is only revealed once clicked on."
};
},
reveal: function () {
if (this.selected == 0) {
this.selected = 1;
} else {
this.selected = 0;
}
}
});
</script>
</polymer-element>