I have a carousel, using owlCarousel, and I'm trying to make the elements in the carousel to expand on hover. The way it's implemented, is it's simply displayed: none by default, then on hover, it's displayed to block. Nothing fancy.
It's taken out of the flow by an absolute positioning, this way the carousel will not expand on element hover.
The problem is, when the element get's hovered, the details, expanded element doesn't show. I tried giving it a high z-index, but it doesn't seem to fix the problem. Here's the code:
CodePen FIle
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
body {
background-color: teal;
}
.owl-carousel {
background-color: orange;
}
.owl-carousel .item:hover .details {
display: block;
}
.owl-carousel .item-inner-wrapper {
position: relative;
}
.owl-carousel h4 {
background-color: yellow;
height: 100px;
}
.owl-carousel .details {
background-color: pink;
height: 300px;
position: absolute;
top: 100%;
bottom: 0;
right: 0;
left: 0;
display: none;
z-index: 20;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="item-inner-wrapper">
<h4>1</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>2</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>3</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>4</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>5</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>6</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>7</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>8</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>9</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>10</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>11</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>12</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
See if this will work for you:
Set .owl-carousel .item to your content height + detail height (I used 200px)
Set margin-top of .owl-carousel.owl-theme .owl-nav to -(detail height) + 10px (it was originally 10px)
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
body {
background-color: teal;
}
.owl-carousel {
background-color: orange;
}
.owl-carousel .item {
height: 200px;
}
.owl-carousel .item:hover .details {
display: block;
}
.owl-carousel .item-inner-wrapper {
position: relative;
}
.owl-carousel h4 {
background-color: yellow;
height: 100px;
}
.owl-carousel .details {
background-color: pink;
height: 100px;
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
}
.owl-carousel.owl-theme .owl-nav {
margin-top: -90px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="item-inner-wrapper">
<h4>1</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>2</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>3</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>4</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>5</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>6</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>7</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>8</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>9</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>10</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>11</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>12</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
You can try not giving a top value, and instead a height of auto to .details
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
body {
background-color: teal;
}
.owl-carousel {
background-color: orange;
}
.owl-carousel .item:hover .details {
display: block;
}
.owl-carousel .item-inner-wrapper {
position: relative;
}
.owl-carousel h4 {
background-color: yellow;
height: 100px;
}
.owl-carousel .details {
background-color: pink;
position: absolute;
bottom: 0;
right: 0;
left: 0;
display: none;
height: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme">
<div class="item">
<div class="item-inner-wrapper">
<h4>1</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>2</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>3</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>4</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>5</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>6</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>7</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>8</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>9</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>10</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>11</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
<div class="item">
<div class="item-inner-wrapper">
<h4>12</h4>
<div class="details">
This is some crazy cool details that you will have to know about
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
Related
On my portfolio website, I have a full-width column of projects, where Ii wish that upon clicking the title the project display /.content slidetoggles downwards. Upon clicking any other project the former active project slides up and closes, whereas the new project displays. What is thee best way of targetting individual projects on click?
I have tried several things, from assigning a parent to the Title-Line-01, to straight-forward toggle jQuery, to assigning a different code to every single project I've read. through several articles here on Stack Overflow. But I still have not achieved the result I want. In the code below upon clicking any title - every projects displays.
$(document).ready(function(){
$(".content").hide();
$(".Title-line-01").click(function(){
$(this).find('.content').toggle();
});
});
* {box-sizing: border-box}
.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6, .mySlides7, .mySlides8, .mySlides9, .mySlides10,
img {vertical-align: middle;}
#font-face {
font-family: 'lirmaregular';
src: url('lirma-webfont.woff2') format('woff2'),
url('lirma-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Information line in the top */
.Headline{
display: flex;
flex-direction: row;
flex-direction: wrap;
font-family:'Helvetica Neue';
}
.Headline_1{
flex:1;
Align: center;
}
.Headline_2{
flex:1;
text-align: center;
}
.Headline_3{
flex:1;
text-align: center;
}
.Headline_4{
flex:1;
position: center;
text-align: right;
}
/* Project and year */
.Title-line{
display: flex;
flex-direction: row
}
.Title-line-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
.Title-line-02{
flex:1;
}
.Title-line-03{
flex:1;
}
.Title-line-04{
flex:1;
font-family:'lirmaregular';
text-align: right;
font-size: 25px;
}
/* Specific projectnames */
.ProjectName-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}
.content{
display: flex;
flex-direction: row;
flex-direction: wrap;
}
/* Specific contents */
.content-01{
display: flex;
flex-direction: row;
flex-direction: wrap;
}
.Flexbox_1{
flex:1;
font-family:'Helvetica Neue';
font-size: 20px;
}
.Flexbox_2{
flex:1;
}
.Flexbox_3{
flex:1;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="Headline">
<div class="Headline_1">
Carina Thornval
</div>
<div class="Headline_2">
mail#cthornval.com
</div>
<div class="Headline_3">
+4571580488
</div>
<div class="Headline_4">
Curriculum vitae available upon request
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Region H</p>
</class>
<div class="Title-line-02">
</class>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2021</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
School Project <br>
Strategic design proposal
<br> <br>
The Health and innovation unit of the Capital Region of
<br> <br>
<br> <br>
<a href="link"> Click here
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides1">
<img src="Images/01_REG H/Instagram - landscape copy.mov" type="video/mp4" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CIFF</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
School Project
<br>
Strategic design
<br> <br>
We were presented with the challenge of rethinking CIFF´s business model as the organisation was facing mounting challenges,
as they were prohibited from throwing their annual fashion fair at Bella Center, because of the outbreak of the coronavirus.
Therefor we proposed a new format for their trade fair: A digital platform, where brands and buyers can engage online through payingf a monthly subscription.
Moreover brands are invited to rent a physical "stage”/pavillion from where they can livestream content,
through for example throwing events or having a showroom. The content produced will then reciprocally be distributed on the online platform.
The stage is a modular and mobile architectural entity,
which can be placed all over the country and where the interior can be adapted to suit the needs of the brand renting the stage.
<br> <br>
This project was a collaboration with Fie Eleonora Mortensen, Gustavo Garcia og Laura Winter-Poulsen.
<br> <br>
<a href="">
Images and video
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_01 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_02 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_03 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_04 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_05 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_06 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Sofia Bordoni</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Webpage design and development
</p>
<br>
<br>
<a href="">
click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides3">
<img src="Images/03_Sofia Bordoni/SofiaBord.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Lirma Type</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Typedesign
</p>
<br>
<br>
<a href="">
Click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides4">
<img src="Images/04_Lirma/type_new copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 3)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Wer Baut Der Stadt</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Wer_baut copy.png" style="width:100%">
</div>
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Poster_Wer_baut.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 4)">❮</a>
<a class="next" onclick="plusSlides(1, 4)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CAFX</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Identity Design for Copenhagen Architecture Festival
<br>
2018
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_red_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_green_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_blue_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_7-kopi.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_8-kopi.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 5)">❮</a>
<a class="next" onclick="plusSlides(1, 5)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Contagious Tales</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Graduation project, editorial design.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_01 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_02 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 6)">❮</a>
<a class="next" onclick="plusSlides(1, 6)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>FOAM X HYDRA</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Design of exhibition cahier in connection to the exhibition FOAM X HYDRA
<p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_01.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_02.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_3.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_04.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_05.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 7)">❮</a>
<a class="next" onclick="plusSlides(1, 7)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Money Publication</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_6 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_1 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_3 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_4 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_5 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 8)">❮</a>
<a class="next" onclick="plusSlides(1, 8)">❯</a>
</div>
</div>
</div>
</div>
<div class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>What is the newsarticle?</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides10">
<img src="Images/10_Newsarticle/Newsletter_1 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_2 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 9)">❮</a>
<a class="next" onclick="plusSlides(1, 9)">❯</a>
</div>
</div>
</div>
</div>
<script src="Slideshows.js"></script>
<script src="Toggle.js"></script>
</body>
</html>
Would it be a bad idea to set id's for your elements?
Set id's for the class "content" divs, and set onclick event for the class "Project" divs.
Class "content" display is initially set to "none".
Of course, add a little code for the onclick event.
In time: in your code there's a few divs closed with </class>. I fixed that.
/* This code closes the project when you click on it,
cause it tracks the outter div (class "Project")
var iShown = 0;
function Show_Content(iContent) {
if (iShown > 0) {
document.getElementById("content" + iShown).style.display = "none";
}
if (iContent !== iShown) {
document.getElementById("content" + iContent).style.display = "block";
iShown = iContent;
} else {
iShown = 0;
}
}
*/
/*This code only closes a project when you open a different one*/
var iShown = 0;
function Show_Content(iContent) {
if (iShown == 0) {
document.getElementById("content" + iContent).style.display = "block";
} else if (iContent !== iShown) {
document.getElementById("content" + iShown).style.display = "none";
document.getElementById("content" + iContent).style.display = "block";
}
iShown = iContent;
}
* {box-sizing: border-box}
.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6, .mySlides7, .mySlides8, .mySlides9, .mySlides10,
img {vertical-align: middle;}
#font-face {
font-family: 'lirmaregular';
src: url('lirma-webfont.woff2') format('woff2'),
url('lirma-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Information line in the top */
.Headline{
display: flex;
flex-direction: row;
flex-direction: wrap;
font-family:'Helvetica Neue';
}
.Headline_1{
flex:1;
Align: center;
}
.Headline_2{
flex:1;
text-align: center;
}
.Headline_3{
flex:1;
text-align: center;
}
.Headline_4{
flex:1;
position: center;
text-align: right;
}
/* Project and year */
.Title-line{
display: flex;
flex-direction: row
}
.Title-line-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
.Title-line-02{
flex:1;
}
.Title-line-03{
flex:1;
}
.Title-line-04{
flex:1;
font-family:'lirmaregular';
text-align: right;
font-size: 25px;
}
/* Specific projectnames */
.ProjectName-01{
flex:1;
font-family:'lirmaregular';
font-size: 25px;
}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}
.content{
display: none;
flex-direction: row;
flex-direction: wrap;
}
/* Specific contents */
.content-01{
display: flex;
flex-direction: row;
flex-direction: wrap;
}
.Flexbox_1{
flex:1;
font-family:'Helvetica Neue';
font-size: 20px;
}
.Flexbox_2{
flex:1;
}
.Flexbox_3{
flex:1;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="Headline">
<div class="Headline_1">
Carina Thornval
</div>
<div class="Headline_2">
mail#cthornval.com
</div>
<div class="Headline_3">
+4571580488
</div>
<div class="Headline_4">
Curriculum vitae available upon request
</div>
</div>
<div onclick="Show_Content(1)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Region H</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2021</p>
</div>
</div>
<div id="content1" class="content">
<div class=Flexbox_1>
<p>
School Project <br>
Strategic design proposal
<br> <br>
The Health and innovation unit of the Capital Region of
<br> <br>
<br> <br>
<a href="link"> Click here
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides1">
<img src="Images/01_REG H/Instagram - landscape copy.mov" type="video/mp4" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(2)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CIFF</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div id="content2" class="content">
<div class=Flexbox_1>
<p>
School Project
<br>
Strategic design
<br> <br>
We were presented with the challenge of rethinking CIFF´s business model as the organisation was facing mounting challenges,
as they were prohibited from throwing their annual fashion fair at Bella Center, because of the outbreak of the coronavirus.
Therefor we proposed a new format for their trade fair: A digital platform, where brands and buyers can engage online through payingf a monthly subscription.
Moreover brands are invited to rent a physical "stage”/pavillion from where they can livestream content,
through for example throwing events or having a showroom. The content produced will then reciprocally be distributed on the online platform.
The stage is a modular and mobile architectural entity,
which can be placed all over the country and where the interior can be adapted to suit the needs of the brand renting the stage.
<br> <br>
This project was a collaboration with Fie Eleonora Mortensen, Gustavo Garcia og Laura Winter-Poulsen.
<br> <br>
<a href="">
Images and video
</a>
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_01 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_02 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_03 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_04 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_05 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_06 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<div class="mySlides2">
<img src="Images/02_CIFF/PSD_Archiitecture_07 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(3)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Sofia Bordoni</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div id="content3" class="content">
<div class=Flexbox_1>
<p>
Webpage design and development
</p>
<br>
<br>
<a href="">
click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides3">
<img src="Images/03_Sofia Bordoni/SofiaBord.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(4)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Lirma Type</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2020</p>
</div>
</div>
<div id="content4" class="content">
<div class=Flexbox_1>
<p>
Typedesign
</p>
<br>
<br>
<a href="">
Click here
</a>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides4">
<img src="Images/04_Lirma/type_new copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 3)">❮</a>
<a class="next" onclick="plusSlides(1, 3)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(5)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Wer Baut Der Stadt</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div id="content5" class="content">
<div class=Flexbox_1>
<p>
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Wer_baut copy.png" style="width:100%">
</div>
<div class="mySlides5">
<img src="Images/05_WER BAUT 2018/Poster_Wer_baut.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 4)">❮</a>
<a class="next" onclick="plusSlides(1, 4)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(6)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>CAFX</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2018</p>
</div>
</div>
<div id="content6" class="content">
<div class=Flexbox_1>
<p>
Identity Design for Copenhagen Architecture Festival
<br>
2018
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_red_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_green_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/Wer_baut_blue_poster.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_7-kopi.png" style="width:100%">
</div>
<div class="mySlides6">
<img src="Images/06_CAFX/IMG_0546 (1)_Cafx_8-kopi.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 5)">❮</a>
<a class="next" onclick="plusSlides(1, 5)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(7)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Contagious Tales</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div id="content7" class="content">
<div class=Flexbox_1>
<p>
Graduation project, editorial design.
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_01 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_02 copy.png" style="width:100%">
</div>
<div class="mySlides7">
<img src="Images/07_Contagious Tales/Contagious_tales_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 6)">❮</a>
<a class="next" onclick="plusSlides(1, 6)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(8)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>FOAM X HYDRA</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div id="content8" class="content">
<div class=Flexbox_1>
<p>
Design of exhibition cahier in connection to the exhibition FOAM X HYDRA
<p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_01.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_02.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_3.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_04.png" style="width:100%">
</div>
<div class="mySlides8">
<img src="Images/08_FOAM/FoamXHydra_05.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 7)">❮</a>
<a class="next" onclick="plusSlides(1, 7)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(9)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>Money Publication</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div id="content9" class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_6 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_1 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_3 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_4 copy.png" style="width:100%">
</div>
<div class="mySlides9">
<img src="Images/09_Money Publication/_97A0746-kopi 2_5 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 8)">❮</a>
<a class="next" onclick="plusSlides(1, 8)">❯</a>
</div>
</div>
</div>
</div>
<div onclick="Show_Content(10)" class="Project">
<div class="Title-line">
<div class="Title-line-01">
<p>What is the newsarticle?</p>
</div>
<div class="Title-line-02">
</div>
<div class="Title-line-03">
</div>
<div class="Title-line-04">
<p>2017</p>
</div>
</div>
<div id="content10" class="content">
<div class=Flexbox_1>
<p>
Publication design with text by Christopher Deutschmann and Paul Larfague
</p>
</div>
<div class=Flexbox_2></div>
<div class=Flexbox_3>
<div class="slideshow-container">
<div class="mySlides10">
<img src="Images/10_Newsarticle/Newsletter_1 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_2 copy.png" style="width:100%">
</div>
<div class="mySlides10">
<img src="Images/10_Newsarticle/newsletter_3 copy.png" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 9)">❮</a>
<a class="next" onclick="plusSlides(1, 9)">❯</a>
</div>
</div>
</div>
</div>
<script src="Slideshows.js"></script>
<script src="Toggle.js"></script>
</body>
</html>
I need to make cards in same heigth.
I don't mean the card them self, I mean the containers in the cards.
My code is looking like this
.card-text {
border: 1px solid lightgrey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
<div class="card-group">
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="card-title"> bla bla </div>
<div class="card-text"> bla<br><br>bla </div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="card-title"> bla bla </div>
<div class="card-text"> bla bla </div>
</div>
</div>
</div>
</div>
Has anybody an solution, how to make the card-text equal height?
.card-text {
border: 1px solid lightgrey;
}
.card {
height: 100%
}
.card-body {
display: flex;
flex-flow: column;
}
.card-text {
flex-grow: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
<div class="card-group">
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="card-title"> bla bla </div>
<div class="card-text"> bla<br><br>bla </div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="card-title"> bla bla </div>
<div class="card-text"> bla bla </div>
</div>
</div>
</div>
</div>
You can use flexbox and the property align-items for that.
See this
.card-group {
display: flex;
align-items: stretch;
}
.card {
height: 100%;
border: 1px solid black
}
https://codepen.io/moisesnandres/pen/dqVzGE
Why dont use .card-deck instead of .card-group?
Like: http://getbootstrap.com/docs/4.1/components/card/#card-decks
It is made for having differend cards, all with the same hight.
They will also expand the sourrounding .row element.
I have a 3 x 4 cards, it's a memory game. So to able to play, you need to guess 2 matches.
$('.card').click(function() {
$('.front').toggle();
$('.back').toggle();
});
.card .back {
display: none;
}
.card {
margin: 8px;
}
.card .front {
background-color: blue;
}
.back,
.front {
color: white;
width: 100px;
height: 150px;
}
.card .back {
background-color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>
Based from the snippet, if I click a one card, all of the cards flipped, which is wrong.
Now my problem is, how do I fix this through jquery?
What you're doing wrong is that you're targeting every single element with the class front and back, because of your selectors (.front and .back).
To fix this, you need to tell jQuery that you're targeting only the elements within the element the user just clicked, and for that you use the find function. This makes sure that jQuery checks just the elements in the one you target in and not every single element in the document.
So, where you wrote:
$('.card').click(function(){
$('.front').toggle();
$('.back').toggle();
});
You need to change it to
$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
Simple as that.
$('.card').click(function() {
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
.card .back {
display: none;
}
.card {
margin: 8px;
}
.card .front {
background-color: blue;
}
.back,
.front {
color: white;
width: 100px;
height: 150px;
}
.card .back {
background-color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>
$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
That's it
You need to use this to select only some elements with this class. Try this $(this).find(".front").toggle().
Use this:
$('.card').click(function(){
$(this).find('.front').toggle();
$(this).find('.back').toggle();
});
You selected with jQuery all the .front and all .backclasses, you should use that :
$('.card').click(function(){
var $this = $(this);
$this.find('.front').toggle();
$this.find('.back').toggle();
});
When you do
$('.card').click(function() {
$('.front').toggle();
$('.back').toggle();
});
You attach a click listener to all elements with class card. Inside, you toggle all elements with class front and back. You need to be toggling just the front and back that are inside the clicked card. $(this).find(".front").toggle(); does just that.
Simply Read Here
$('.front , .back' , this).toggle();
$('.card').click(function(){
$('.front , .back' , this).toggle();
});
.card .back{
display:none;
}
.card {
margin:8px;
}
.card .front{
background-color: blue;
}
.back, .front{
color:white;
width:100px;
height:150px;
}
.card .back{
background-color:red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="dog">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card" id="cat">
<div class="front">
image here
</div>
<div class="back">
back card
</div>
</div>
</div>
</div>
I'm working on a project available on JSFiddle. As you can notice, there are 6 items displayed and I would like to make a carousel to display 3 items per slide. After researching this issue, I find this awesome project on Codepen.
Each item of my project is represented by the following code:
<div class="wrapper">
<img src="https://photos-2.dropbox.com/t/2/AACS3GcxUnMu4DpsfC5pF-zF55I8WHf1blL4AvkQULu1Gw/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHsgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
while the item on Codepen is represented by this one:
<div class="item active">
<div class="col-xs-4">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
</div>
Whenever I try to remove the item's code in Codepen and place my item's code from JSFiddle, the slider stops working.
Please let me know how to solve this problem.
Is this what you wanted? Please check fiddle, you will understand, why it wasn't working. You may have missed some libraries and CSS.
$('#theCarousel').carousel({
interval: false
})
$('.multi-item-carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
.multi-item-carousel{
.carousel-inner{
> .item{
transition: .6s ease-in-out all;
}
.active{
&.left{
left:-33%;
}
&.right{
left:33%;
}
}
.next{
left: 33%;
}
.prev{
left: -33%;
}
}
.carouse-control{
&.left, &.right{
background-image: none;
}
}
#media all and (transform-3d), (-webkit-transform-3d) {
&{
.carousel-inner {
> .item{
transition: .6s ease-in-out all;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-perspective: none;
-webkit-transform: none!important;
transform: none!important;
}
}
}
}
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4 wrapper">
<img src="http://placehold.it/300/f44336/000000" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/e91e63/000000" class="img-responsive">
<div class="overlay">
<h5 class="header">A Movie in the Park: Kung Fu Panda</h5>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/9c27b0/000000" class="img-responsive">
<h5 class="header">Batman Return</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/673ab7/000000" class="img-responsive">
<h5 class="header">Deadpool</h5>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/4caf50/000000" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-4">
<img src="http://placehold.it/300/8bc34a/000000" class="img-responsive">
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
Read the carousel documentation and notice the format of each item (specifically the addition of .item and .active).
This wrapper around each image is making it so that 3 elements are displayed per row:
<div class="col-xs-4">
...
</div>
(in comparison, using .col-xs-12 would indicate 1 image per displayed row, and .col-xs-6 would indicate 2 images per displayed row)
I have a page where there should be 2 rows, each containing two rectangular divs with content (image, h3 and paragraph). When clicking on the div, it has to flip in order to show its back content.
All the work is done with Bootstrap and the script is taken from
https://nnattawat.github.io/flip/.
The matter is simple yet impossible for me: those two rows stay on top of one another. All I need is for them to stay on different rows and be responsive.
This is my HTML:
<div class="container grid-container">
<div class="row">
<div class="card-grid col-md-6">
<div class="front">
<img src="images/1.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
<div class="card-grid col-md-6">
<div class="front">
<img src="images/2.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
</div>
<div class="row">
<div class="card-grid col-md-6">
<div class="front">
<img src="images/3.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
<div class="card-grid col-md-6">
<div class="front">
<img src="images/4.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
</div>
</div>
This is my CSS:
.card-grid{
perspective: 500px;
position:relative;
transform-style:preserve-3d;
}
.grid-container>.row>.card-grid>.front{
height:100%;
width:100%;
backface-visibility: hidden;
transform-style: preserve-3d;
position:absolute;
z-index:1;
transition:all 0.5s ease-out;
transform:rotateY(0deg);
}
.grid-container>.row>.card-grid>.back{
transform:rotateY(-180deg);
height:100%;
width:100%;
backface-visibility:hidden;
transform-style:preserve-3d;
position:absolute;
z-index:0;
transition:all 0.5s ease-out;
}
About CSS: I tried to make classes .front and .back less specific, then I tried to override Bootstrap's CSS file by making them more specific. No change.
And my main JS script is this:
$(function(){
$(".card-grid").flip({
trigger:"click"
});
});
I think below code helps you
Fiddle: https://jsfiddle.net/nadimsajib/bhx8fqvm/
HTML:
<div class="grid">
<div class="row">
<div id="card" class="card col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="front">
<img src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
<div style="height:500px;">
</div>
<div class="card col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="front">
<img src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" class="img-responsive"/>
<h3>Front text</h3>
<p> --- </p>
</div>
<div class="back">
<h2>Back text</h2>
</div>
</div>
</div>
</div>
JS:
$(function($) {
$(".card").flip();
});