For my Swiper design, I need a new set of controls on each slide, so the controls visually slide away with the slide content itself. Normally, this is no problem.
But as soon as I add multiple swipers on one page and init them using an each function, none of the controls work anymore. Does anyone know how I can have multiple swipers with multiple sets of controls on one page?
Here is my code so far:
$('.swiper-container').each(function() {
var next = $(this).find('.swiper-next');
var prev = $(this).find('.swiper-prev');
var swiper = new Swiper($(this)[0], {
navigation: {
nextEl: next,
prevEl: prev,
},
});
});
* {margin: 0; padding: 0; box-sizing: border-box;}
.swiper-container {
margin-bottom: 2em;
}
.swiper-slide {
background: rgba(0,0,0,.1);
height: 10em;
padding: 1em;
border-right: 2px solid red;
}
.swiper-controls {
display: flex;
}
.swiper-controls > div {
background: rgba(0,0,0,.2);
border: 1px solid white;
cursor: pointer;
}
<!-- embed css -->
<link href="https://unpkg.com/swiper#8/swiper-bundle.min.css" rel="stylesheet" />
<!-- swiper #01 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- slide #01-01 -->
<div class="swiper-slide">
<p>slide #01-01</p>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
<!-- slide #01-02 -->
<div class="swiper-slide">
<p>slide #01-02</p>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
<!-- slide #01-03 -->
<div class="swiper-slide">
<p>slide #01-03</p>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
</div>
</div>
<!-- swiper #02 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- slide #02-01 -->
<div class="swiper-slide">
<p>slide #02-01</p>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
<!-- slide #02-02 -->
<div class="swiper-slide">
<p>slide #02-02</p>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
<!-- slide #02-03 -->
<div class="swiper-slide">
<p>slide #02-03</p>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
</div>
</div>
<!-- embed js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>
1. For next and previous arrow
You can't have multiple swiper-controls, one in each swiper-slide. You can have only one swiper-controls for each group of slides. As you can read on the official doc, prevEl and nextEl can accept only null | CSSSelector | HTMLElement.
The trick is use CSS to place that one swiper-controls in a way that look like it’s in each one:
document.querySelectorAll(".swiper-container").forEach(function (s) {
let next = s.querySelector(".swiper-next");
let prev = s.querySelector(".swiper-prev");
new Swiper(s, {
navigation: {
nextEl: next,
prevEl: prev
}
});
});
* {margin: 0; padding: 0; box-sizing: border-box;}
.swiper-container {
margin-bottom: 2em;
}
.swiper-slide {
background: rgba(0,0,0,.1);
height: 10em;
padding: 1em;
border-right: 2px solid red;
}
.swiper-controls {
display: flex;
}
.swiper-controls > div {
background: rgba(0,0,0,.2);
border: 1px solid white;
cursor: pointer;
}
<!-- embed css -->
<link href="https://unpkg.com/swiper#8/swiper-bundle.min.css" rel="stylesheet" />
<!-- swiper #01 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- slide #01-01 -->
<div class="swiper-slide">
<p>slide #01-01</p>
</div>
<!-- slide #01-02 -->
<div class="swiper-slide">
<p>slide #01-02</p>
</div>
<!-- slide #01-03 -->
<div class="swiper-slide">
<p>slide #01-03</p>
</div>
</div>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
<!-- swiper #02 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- slide #02-01 -->
<div class="swiper-slide">
<p>slide #02-01</p>
</div>
<!-- slide #02-02 -->
<div class="swiper-slide">
<p>slide #02-02</p>
</div>
<!-- slide #02-03 -->
<div class="swiper-slide">
<p>slide #02-03</p>
</div>
</div>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
<!-- embed js -->
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>
2. For pagination bullets
However, you can have multiple paginations, those bullet points, even if it's weird because on the doc, el has the same type as nextEl and prevEl:
document.querySelectorAll(".swiper-container").forEach(function (s) {
let next = s.querySelector(".swiper-next");
let prev = s.querySelector(".swiper-prev");
new Swiper(s, {
navigation: {
nextEl: next,
prevEl: prev
},
pagination: {
el: ".swiper-pagination",
clickable: true
}
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.swiper-container {
margin-bottom: 2em;
}
.swiper-slide {
background: rgba(0, 0, 0, 0.1);
height: 10em;
padding: 1em;
border-right: 2px solid red;
}
.swiper-controls {
display: flex;
}
.swiper-controls > div {
background: rgba(0, 0, 0, 0.2);
border: 1px solid white;
cursor: pointer;
}
<!-- embed css -->
<link href="https://unpkg.com/swiper#8/swiper-bundle.min.css" rel="stylesheet" />
<!-- swiper #01 -->
<div class="swiper swiper-container">
<div class="swiper-wrapper">
<!-- slide #01-01 -->
<div class="swiper-slide">
<p>slide #01-01</p>
<div class="swiper-pagination"></div>
</div>
<!-- slide #01-02 -->
<div class="swiper-slide">
<p>slide #01-02</p>
<div class="swiper-pagination"></div>
</div>
<!-- slide #01-03 -->
<div class="swiper-slide">
<p>slide #01-03</p>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
<!-- swiper #02 -->
<div class="swiper swiper-container">
<div class="swiper-wrapper">
<!-- slide #02-01 -->
<div class="swiper-slide">
<p>slide #02-01</p>
<div class="swiper-pagination"></div>
</div>
<!-- slide #02-02 -->
<div class="swiper-slide">
<p>slide #02-02</p>
<div class="swiper-pagination"></div>
</div>
<!-- slide #02-03 -->
<div class="swiper-slide">
<p>slide #02-03</p>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="swiper-controls">
<div class="swiper-prev">← previous</div>
<div class="swiper-next">next →</div>
</div>
</div>
<!-- embed js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>
Related
I am working on a knowledge bank on a single HTML page.
The idea is that I have 8 pop-up modals, each modal will have it own steps.
The steps will be created with tabs and I want to add next/previous buttons to each tab on each modal.
Right now, I have 8 pop-up modals. I have added the tabs with buttons on all tabs in all modals. I am struggling with the following issue: When I open the first modal and click next/previous, it works but it works on all modals. So in the first modal, I click next 10 times, then I close the first modal and I end up in modal 3 on step 4.. What I want is for each modal/tab to have its own next and previous modal, instead of one global previous/next button that works on all tabs and only works in one modal.
Also, sometimes the modal pop ups don't work.. I have to click multiple times before it opens and sometimes it opens at once..
I am stuck on this problem for a few days now. I think it has something to do with the JS. Can someone help me? I would really appreciate it.. I have looked everywhere on the internet for the solution, but there isn't any..
Here is the code:
// Pop Ups JS
// Get the button that opens the modal
var btn = document.querySelectorAll("button.modal-button");
// All page modals
var modals = document.querySelectorAll('.modal');
// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function(e) {
e.preventDefault();
modal = document.querySelector(e.target.getAttribute("href"));
modal.style.display = "block";
}
}
// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
}
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
}
}
}
// Tabs JS
let currentSection = 0;
let sections = document.querySelectorAll(".section");
let sectionButtons = document.querySelectorAll(".nav > li");
let nextButton = document.querySelector(".next");
let previousButton = document.querySelector(".previous");
for (let i = 0; i < sectionButtons.length; i++) {
sectionButtons[i].addEventListener("click", function() {
sections[currentSection].classList.remove("active");
sectionButtons[currentSection].classList.remove("active");
sections[currentSection = i].classList.add("active");
sectionButtons[currentSection].classList.add("active");
if (i === 0) {
if (previousButton.className.split(" ").indexOf("disable") < 0) {
previousButton.classList.add("disable");
}
} else {
if (previousButton.className.split(" ").indexOf("disable") >= 0) {
previousButton.classList.remove("disable");
}
}
if (i === sectionButtons.length - 1) {
if (nextButton.className.split(" ").indexOf("disable") < 0) {
nextButton.classList.add("disable");
}
} else {
if (nextButton.className.split(" ").indexOf("disable") >= 0) {
nextButton.classList.remove("disable");
}
}
});
}
nextButton.addEventListener("click", function() {
if (currentSection < sectionButtons.length - 1) {
sectionButtons[currentSection + 1].click();
}
});
previousButton.addEventListener("click", function() {
if (currentSection > 0) {
sectionButtons[currentSection - 1].click();
}
});
/*==================== MODAL CSS ====================*/
body {
font-family: Arial, Helvetica, sans-serif;
}
.button {
background-color: transparent;
border: 1px solid transparent;
cursor: pointer;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: fixed;
bottom: 0;
background-color: #3b6e88;
width: 100%;
height: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 75px;
font-weight: 100;
margin-top: 12px;
margin-right: 27px;
;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #3b6e88;
color: white;
}
.modal-body {
padding: 2px 16px;
background-color: #3b6e88;
color: white;
}
.modal-footer {
padding: 2px 16px;
background-color: #3b6e88;
color: white;
}
/* Add Animation
#-webkit-keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
#keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
#-webkit-keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
#keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}*/
/*================= TAB CSS=============== */
.section {
display: none;
}
.section.active {
display: block;
}
.invisible {
display: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
ul li {
background: #ccc;
padding: 8px 15px;
margin-left: 6px;
border-radius: 5px;
cursor: pointer;
opacity: .5;
color: #3b6e88;
font-size: 17px;
}
ul li.active {
opacity: 1 !important;
}
.next,
.previous {
padding: 15px 10px;
border-radius: 6px;
background: deepskyblue;
color: white;
border: 0;
outline: none;
cursor: pointer;
width: 100px;
}
.next.disable,
.previous.disable {
opacity: .5;
}
<!-- MODAL BUTTONS -->
<section>
<div>
<div>
<!-- Modal 1 -->
<button href="#myModal1" class="modal-button">
<p>Modal 1</p>
</button>
<!-- Modal 2 -->
<button href="#myModal2" class="modal-button">
<p>Modal 2</p>
</button>
<!-- Modal 3 -->
<button href="#myModal3" class="modal-button">
<p>Modal 3</p>
</button>
<!-- Modal 4 -->
<button href="#myModal4" class="modal-button">
<p>Modal 4</p>
</button>
<!-- Modal 5 -->
<button href="#myModal5" class="modal-button">
<p>Modal 5</p>
</button>
<!-- Modal 6 -->
<button href="#myModal6" class="modal-button">
<p>Modal 6</p>
</button>
<!-- Modal 7 -->
<button href="#myModal7" class="modal-button">
<p>Modal 7</p>
</button>
<!-- Modal 8 -->
<button href="#myModal8" class="modal-button">
<p>Modal 8</p>
</button>
</div>
</div>
</section>
<!-- MODALS POP UPS HTML -->
<!-- Modal 1 -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<ul class="nav">
<li class="active" data-cont="r1">Step 1: Test</li>
<li data-cont="r2">Step 2: Test</li>
<li data-cont="r3">Step 3: Test</li>
</ul>
<!-- Prev/Next Buttons -->
<button class="previous disable" data-id="previous">Previous</button>
<button class="next" data-id="next">Next</button>
<!-- Close Modal -->
<span class="close">×</span>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p> Modal 1</p>
<!-- Step 1-->
<section data-id="r1" class="section section-one active">
<p>Section 1 </p>
</section>
<!-- Step 2 -->
<section data-id="r2" class="section section-two">
<h2>Section 2</h2>
</section>
<!-- Step 3 -->
<section data-id="r3" class="section section-three">
<h2>Section 3</h2>
</section>
</div>
</div>
</div>
<!-- Modal 2 -->
<div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<ul class="nav">
<li class="active" data-cont="r1">Step 1: Test</li>
<li data-cont="r2">Step 2: Test</li>
<li data-cont="r3">Step 3: Test</li>
</ul>
<!-- Prev/Next Buttons -->
<button class="previous disable" data-id="previous">Previous</button>
<button class="next" data-id="next">Next</button>
<!-- Close Modal -->
<span class="close">×</span>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p> Modal 2</p>
<!-- Step 1-->
<section data-id="r1" class="section section-one active">
<p>Section 1 </p>
</section>
<!-- Step 2 -->
<section data-id="r2" class="section section-two">
<h2>Section 2</h2>
</section>
<!-- Step 3 -->
<section data-id="r3" class="section section-three">
<h2>Section 3</h2>
</section>
</div>
</div>
</div>
<!-- Modal 3 -->
<div id="myModal3" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<ul class="nav">
<li class="active" data-cont="r1">Step 1: Test</li>
<li data-cont="r2">Step 2: Test</li>
<li data-cont="r3">Step 3: Test</li>
</ul>
<!-- Prev/Next Buttons -->
<button class="previous disable" data-id="previous">Previous</button>
<button class="next" data-id="next">Next</button>
<!-- Close Modal -->
<span class="close">×</span>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p> Modal 3</p>
<!-- Step 1-->
<section data-id="r1" class="section section-one active">
<p>Section 1 </p>
</section>
<!-- Step 2 -->
<section data-id="r2" class="section section-two">
<h2>Section 2</h2>
</section>
<!-- Step 3 -->
<section data-id="r3" class="section section-three">
<h2>Section 3</h2>
</section>
</div>
</div>
</div>
<!-- Modal 4 -->
<div id="myModal4" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<ul class="nav">
<li class="active" data-cont="r1">Step 1: Test</li>
<li data-cont="r2">Step 2: Test</li>
<li data-cont="r3">Step 3: Test</li>
</ul>
<!-- Prev/Next Buttons -->
<button class="previous disable" data-id="previous">Previous</button>
<button class="next" data-id="next">Next</button>
<!-- Close Modal -->
<span class="close">×</span>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p> Modal 4</p>
<!-- Step 1-->
<section data-id="r1" class="section section-one active">
<p>Section 1 </p>
</section>
<!-- Step 2 -->
<section data-id="r2" class="section section-two">
<h2>Section 2</h2>
</section>
<!-- Step 3 -->
<section data-id="r3" class="section section-three">
<h2>Section 3</h2>
</section>
</div>
</div>
</div>
<!-- Modal 5 -->
<div id="myModal5" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<ul class="nav">
<li class="active" data-cont="r1">Step 1: Test</li>
<li data-cont="r2">Step 2: Test</li>
<li data-cont="r3">Step 3: Test</li>
</ul>
<!-- Prev/Next Buttons -->
<button class="previous disable" data-id="previous">Previous</button>
<button class="next" data-id="next">Next</button>
<!-- Close Modal -->
<span class="close">×</span>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p> Modal 5</p>
<!-- Step 1-->
<section data-id="r1" class="section section-one active">
<p>Section 1 </p>
</section>
<!-- Step 2 -->
<section data-id="r2" class="section section-two">
<h2>Section 2</h2>
</section>
<!-- Step 3 -->
<section data-id="r3" class="section section-three">
<h2>Section 3</h2>
</section>
</div>
</div>
</div>
<!-- Modal 6 -->
<div id="myModal6" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<ul class="nav">
<li class="active" data-cont="r1">Step 1: Test</li>
<li data-cont="r2">Step 2: Test</li>
<li data-cont="r3">Step 3: Test</li>
</ul>
<!-- Prev/Next Buttons -->
<button class="previous disable" data-id="previous">Previous</button>
<button class="next" data-id="next">Next</button>
<!-- Close Modal -->
<span class="close">×</span>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p> Modal 6</p>
<!-- Step 1-->
<section data-id="r1" class="section section-one active">
<p>Section 1 </p>
</section>
<!-- Step 2 -->
<section data-id="r2" class="section section-two">
<h2>Section 2</h2>
</section>
<!-- Step 3 -->
<section data-id="r3" class="section section-three">
<h2>Section 3</h2>
</section>
</div>
</div>
</div>
<!-- Modal 7 -->
<div id="myModal7" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<ul class="nav">
<li class="active" data-cont="r1">Step 1: Test</li>
<li data-cont="r2">Step 2: Test</li>
<li data-cont="r3">Step 3: Test</li>
</ul>
<!-- Prev/Next Buttons -->
<button class="previous disable" data-id="previous">Previous</button>
<button class="next" data-id="next">Next</button>
<!-- Close Modal -->
<span class="close">×</span>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p> Modal 7</p>
<!-- Step 1-->
<section data-id="r1" class="section section-one active">
<p>Section 1 </p>
</section>
<!-- Step 2 -->
<section data-id="r2" class="section section-two">
<h2>Section 2</h2>
</section>
<!-- Step 3 -->
<section data-id="r3" class="section section-three">
<h2>Section 3</h2>
</section>
</div>
</div>
</div>
<!-- Modal 8 -->
<div id="myModal8" class="modal">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<ul class="nav">
<li class="active" data-cont="r1">Step 1: Test</li>
<li data-cont="r2">Step 2: Test</li>
<li data-cont="r3">Step 3: Test</li>
</ul>
<!-- Prev/Next Buttons -->
<button class="previous disable" data-id="previous">Previous</button>
<button class="next" data-id="next">Next</button>
<!-- Close Modal -->
<span class="close">×</span>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p> Modal 8</p>
<!-- Step 1-->
<section data-id="r1" class="section section-one active">
<p>Section 1 </p>
</section>
<!-- Step 2 -->
<section data-id="r2" class="section section-two">
<h2>Section 2</h2>
</section>
<!-- Step 3 -->
<section data-id="r3" class="section section-three">
<h2>Section 3</h2>
</section>
</div>
</div>
</div>
Can you try something like this? Code is not tested, but the concept is next:
On open modal trigger remove all 'active' classes, then add active on first tab:
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function(e) {
e.preventDefault();
modal = document.querySelector(e.target.getAttribute("href"));
modal.style.display = "block";
// Remove all active tabs
var elems = document.querySelectorAll("#" + e.target.id + ">li.active");
[].forEach.call(elems, function(el) {
el.classList.remove("active");
});
// Add active on first element
elems[0].classList.add('active')
}
}
I am making a simple memory game in jQuery. I have eight img tags and the 'imgs' array with eight pictures (they double). I want every img have a unique src from the 'imgs' array (so that every img element has its' match). Can anyone help me so that the images don't repeat? I know it could be done in pure JS but I need jQuery... Thank you very much for your time :)
$(document).ready(() => {
const imgs = ['https://img.icons8.com/color/100/000000/smurf.png',
'https://img.icons8.com/color/96/000000/cookie-monster.png',
'https://img.icons8.com/color/96/000000/chewbacca.png',
'https://img.icons8.com/color/96/000000/avatar.png',
'https://img.icons8.com/color/100/000000/smurf.png',
'https://img.icons8.com/color/96/000000/cookie-monster.png',
'https://img.icons8.com/color/96/000000/chewbacca.png',
'https://img.icons8.com/color/96/000000/avatar.png'];
$('.card').flip();
$('img').each((i, item) => {
$(item).attr('src', function() {
const imgsCopy = imgs.slice();
const src = imgsCopy.splice(Math.floor(Math.random() * imgsCopy.length), 1)
return src
})
})
});
body {
margin: 0 auto;
text-align: center;
}
#game-container {
padding: 3% 10%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}
.card {
width: 200px;
height: 200px;
margin: 20px 20px;
}
.front {
background-color: lightblue;
}
.back {
background-color: lightskyblue;
box-sizing: border-box;
padding: 25% 20%;
}
<!DOCTYPE html>
<html>
<head>
<title>Memory Game</title>
<link rel="stylesheet" type="text/css" href="memory.css" />
</head>
<body>
<div id="game-container">
<!--CARD 1-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 1-->
<!--CARD 2-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 2-->
<!--CARD 3-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 3-->
<!--CARD 4-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 4-->
<!--CARD 5-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 5-->
<!--CARD 6-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 6-->
<!--CARD 7-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 7-->
<!--CARD 8-->
<div class="card">
<div class="front">
</div>
<div class="back">
<img src="">
</div>
</div>
<!--THE END OF CARD 8-->
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<script src="memory.js"></script>
</body>
</html>
OK, I made a slight mistake! I took out the const imgsCopy = imgs.slice(); out of the jQuery 'each' statement and it works fine! :) Thx again for your time!
$(document).ready(() => {
$('.card').flip();
const imgs = ['https://img.icons8.com/color/100/000000/smurf.png',
'https://img.icons8.com/color/96/000000/cookie-monster.png',
'https://img.icons8.com/color/96/000000/chewbacca.png',
'https://img.icons8.com/color/96/000000/avatar.png',
'https://img.icons8.com/color/100/000000/smurf.png',
'https://img.icons8.com/color/96/000000/cookie-monster.png',
'https://img.icons8.com/color/96/000000/chewbacca.png',
'https://img.icons8.com/color/96/000000/avatar.png'];
const imgsCopy = imgs.slice();
$('img').each((i, item) => {
$(item).attr('src', function() {
const src = imgsCopy.splice(Math.floor(Math.random() * imgsCopy.length), 1)
return src
})
})
});
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 try to build a responsive one page using bootstrap that scrolls horizontally and every mouse scroll will switch to next page, best way i found so far to achieve this is to use carousel. The problem is that my carousel skips "pages". is there any way to restrict mouse scroll event to move only 100vw per scroll? or any other creative ideas how to approach this kind of build?
Any help will be much appreciated.Thanks in advance
This what i have so far:
https://codepen.io/xxannxx/pen/mxJWae
Html:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="aquamarine">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="blue"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="pink">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="purple"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="yellow">
</div><!--article end-->
</div><!--column end-->
<div class="col-lg-6">
<div class="orange"></div>
</div><!--column end-->
</div><!--row two end-->
</div><!--container two end-->
<div class="carousel-caption">
CAPTION - information about the image
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
Css:
.aquamarine {
width: 50vw;
height: 100vh;
background-color: aquamarine;
}
.blue {
width: 50vw;
height: 100vh;
background-color:skyblue;
}
.pink {
width: 50vw;
height: 100vh;
background-color:lightpink;
}
.purple {
width: 50vw;
height: 100vh;
background-color:plum;
}
.yellow {
width: 50vw;
height: 100vh;
background-color:yellow;
}
.orange {
width: 50vw;
height: 100vh;
background-color:orange;
}
.right.carousel-control, .left.carousel-control {
display: none;
}
.carousel-indicators li {
visibility: hidden;
}
JS:
$('#myCarousel').carousel({
interval: false
});
$('#myCarousel').bind('mousewheel', function(e)
{
if(event.wheelDelta>0) {
$(this).carousel('next');
}else if(event.wheelDelta<0){
$(this).carousel('prev');
}
}
);
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>