We Keep Coding

Why doesn't my accordion toggle when clicking on the heading icons?

Need some assistance with below accordion. When you click on the heading the accordion drops down, which is great and works well. However, when you click on the + / - the accordion doesn't dropdown. Not sure how to fix this and would greatly appreciate if someone to help. Not entirely sure how to amend the before/after so it's clickable.
function initAcc(elem, option){
document.addEventListener('click', function (e) {
if (!e.target.matches(elem+' .a-btn')) return;
else{
if(!e.target.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList, function (e) {
e.classList.remove('active');
});
}
e.target.parentElement.classList.add('active');
}else{
e.target.parentElement.classList.remove('active');
}
}
});
}
initAcc('.accordion.v1', true);
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
.container h2 {
font-weight: 500;
}
.accordion {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.accordion .a-container {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
}
.accordion .a-container .a-btn {
margin: 0;
position: relative;
padding: 15px 30px;
width: 100%;
color: #bdbdbd;
font-weight: 400;
display: block;
font-weight: 500;
background-color: #262626;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
<div class="a-container">
<p class="a-btn">Two <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>

Adding pointer-events:none to your span will work for you like so :-
function initAcc(elem, option){
document.addEventListener('click', function (e) {
if (!e.target.matches(elem+' .a-btn')) return;
else{
if(!e.target.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList, function (e) {
e.classList.remove('active');
});
}
e.target.parentElement.classList.add('active');
}else{
e.target.parentElement.classList.remove('active');
}
}
});
}
initAcc('.accordion.v1', true);
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
.container h2 {
font-weight: 500;
}
.accordion {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.accordion .a-container {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
}
.accordion .a-container .a-btn {
margin: 0;
position: relative;
padding: 15px 30px;
width: 100%;
color: #bdbdbd;
font-weight: 400;
display: block;
font-weight: 500;
background-color: #262626;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
pointer-events:none;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
<div class="a-container">
<p class="a-btn">Two <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>
Explanation - Did this because your e.target needs to match with a specific selector but your e.target will vary based on where you click and it becomes this span when you click on the +/- icons. So I have prevented the pointer-events for that span. I like the closest approach as well by #espascarello.

The target is what you clicked. The + is not the element you are looking for, so you got to see if it is a child. Easiest way is closest.
function initAcc(elem, option){
document.addEventListener('click', function (e) {
const clickedElem = e.target.closest(elem+' .a-btn');
if (!clickedElem) return;
else{
if(!clickedElem.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList, function (e) {
e.classList.remove('active');
});
}
clickedElem.parentElement.classList.add('active');
}else{
clickedElem.parentElement.classList.remove('active');
}
}
});
}
initAcc('.accordion.v1', true);
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
.container h2 {
font-weight: 500;
}
.accordion {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.accordion .a-container {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
}
.accordion .a-container .a-btn {
margin: 0;
position: relative;
padding: 15px 30px;
width: 100%;
color: #bdbdbd;
font-weight: 400;
display: block;
font-weight: 500;
background-color: #262626;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
<div class="a-container">
<p class="a-btn">Two <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>

The second modal with a different ID opens with a different effect - Why?

I've got two different pricing cards:
<div class="card card1" id="open">
<span class=title>Basic</span>
<h1>$99 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Access to AM</li>
<li>Unlimited Households</li>
<li>White-Labeling</li>
</ul>
</div>
<div class="card card2" id="open2">
<span class=title>Pro</span>
<h1>$129 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Cash-Flow Reporting</li>
<li>Beneficiary Visualization</li>
<li>Unlimited TMs</li>
</ul>
</div>
When clicked, each should bring up a different modal:
<div class="modal-container" id="modal_container">
<div class="modal">
<h1>Modal goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close">Close me</button>
</div>
<div class="modal-container" id="modal_container2">
<div class="modal">
<h1>Modal 2 goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close2">Close me</button>
</div>
All of the ID's are unique. With this JS I am able to bring up the first modal but not the second:
const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');
open.addEventListener('click', () => {
modal_container.classList.add('show');
});
close.addEventListener('click', () => {
modal_container.classList.remove('show');
});
I added unique IDs for the second card and modal, but when I pull them into the JS by adding this:
const open2 = document.getElementById('open2');
const modal_container2 = document.getElementById('modal_container2');
const close2 = document.getElementById('close2');
open2.addEventListener('click', () => {
modal_container2.classList.add('show');
});
close2.addEventListener('click', () => {
modal_container2.classList.remove('show');
});
I am not getting the same effect.
Here is the relevant CSS:Added relevant CSS
.modal-container {
background-color: rgba(0,0,0,0.3);
position: fixed;
top:0;
left:0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.modal-container.show {
opacity: 1;
pointer-events: auto;
}

there was some error on your codepen, double body open and close tag, the second modal was inside the first one's container, Ids were duplicated and on the JS side the listeners for the second modal were missing, try this:
const open = document.getElementById('open');
const modal_container = document.getElementById('modal_container');
const close = document.getElementById('close');
const open2 = document.getElementById('open2');
const modal_container2 = document.getElementById('modal_container2');
const close2 = document.getElementById('close2');
open.addEventListener('click', () => {
modal_container.classList.add('show');
});
close.addEventListener('click', () => {
modal_container.classList.remove('show');
});
open2.addEventListener('click', () => {
modal_container2.classList.add('show');
});
close2.addEventListener('click', () => {
modal_container2.classList.remove('show');
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f4efed;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
cursor: crosshair;
}
.card {
background-color: #fff;
border-radius: 10px;
padding: 60px 30px;
text-align: center;
max-width: 450px;
min-width: 275px;
margin: 1em;
transition: .2s ease all;
}
.card:hover {
transform: translateY(-20px);
box-shadow: 0 10px 20px rgba(0,0,0,.3);
cursor: pointer;
}
.card1 {
background-image: linear-gradient(to bottom right, #41464d, #2d3137);
color: white;
}
.card2 {
background-image: linear-gradient(to bottom right, #dbb898, #b98351);
color: white;
}
.card .title {
font-size: .8em;
}
.card1 .title{
font-weight: bold;
background-color: #444950;
border-radius: 10px;
padding: 12px 10px;
}
.card2 .title{
font-weight: bold;
background-color: white;
border-radius: 10px;
padding: 12px 10px;
color: #2d3137;
}
h1 {
margin: 30px 0 30px 0;
}
h4 {
font-weight: 100;
font-size: .75em;
}
h2 {
margin: 25px;
font-size: .8em;
}
ul {
font-size: .75em;
line-height: 1.75em;
list-style: none;
}
.modal-container {
background-color: rgba(0,0,0,0.3);
position: fixed;
top:0;
left:0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
.modal-container.show {
opacity: 1;
pointer-events: auto;
}
.modal {
background-color: white;
border-radius: 10px;
width: 800px;
max-width: 100%;
padding: 30px 50px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
text-align: center;
}
.modal h1 {
margin: .5em;
}
.modal p {
font-size: 14px;
opacity: 0.7;
}
.modal-container button {
background-color: #444950;
color: white;
border: 0;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
font-size: 14px;
padding: 10px 25px;
margin: 15px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pricing Cards</title>
</head>
<body>
<div class="card card1" id="open">
<span class=title>Basic</span>
<h1>$99 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Access to Asset-Map</li>
<li>Unlimited Households</li>
<li>White-Labeling</li>
</ul>
</div>
<div class="card card2" id="open2">
<span class=title>Pro</span>
<h1>$129 USD</h1>
<h4>Lorem ipsum dolor sit amet.</h4>
<h2>YOU GET:</h2>
<ul>
<li>Cash-Flow Reporting</li>
<li>Beneficiary Visualization</li>
<li>Unlimited Target-Maps</li>
</ul>
</div>
<div class="modal-container" id="modal_container">
<div class="modal">
<h1>Modal goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close">Close me</button>
</div>
</div>
<div class="modal-container" id="modal_container2">
<div class="modal">
<h1>Modal 2 goes here</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consectetur repudiandae quia deleniti nulla, suscipit tempora magnam blanditiis ex culpa mollitia quisquam quod? Dolores, sunt dicta adipisci rem consequuntur fugit repudiandae quia deleniti nulla.</p>
<button id="close2">Close me</button>
</div>
</div>
</body>
</html>

HTML5, CSS3, Javascript | Change of item in nav section

Can someone explain or give me an advice how to creat nav section, where you click on some of li item and it will change content (Fashion, Films, TV items on screenshot)? Can I make it without JS? If no, could you please explain the logic of that task (how to create)
Thank you for your attention!
http://jsfiddle.net/4pw568fx/1/

What you are looking for are "Tabs".
Here is an example to achive a Tab functionality in pure CSS:
pure CSS Tabs by CSS-Tricks
Here another great working example of PureCSS Tabs:
#import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);
#import url(https://fonts.googleapis.com/css?family=Raleway:100,400,700);
/* Component Needs */
.pc-tab > input, .pc-tab section > div {
display: none;
}
#tab1:checked ~ section .tab1, #tab2:checked ~ section .tab2, #tab3:checked ~ section .tab3 {
display: block;
}
#tab1:checked ~ nav .tab1, #tab2:checked ~ nav .tab2, #tab3:checked ~ nav .tab3 {
color: red;
}
/* Visual Styles */
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
-webkit-font-smoothing: antialiased;
background: #ecf0f1;
font-family: 'Raleway';
}
h1 {
text-align: center;
font-weight: 100;
font-size: 60px;
color: #e74c3c;
}
.pc-tab {
width: 100%;
max-width: 700px;
margin: 0 auto;
}
.pc-tab ul {
list-style: none;
margin: 0;
padding: 0;
}
.pc-tab ul li label {
font-family: "Raleway";
float: left;
padding: 15px 25px;
border: 1px solid #ddd;
border-bottom: 0;
background: #eee;
color: #444;
}
.pc-tab ul li label:hover {
background: #ddd;
}
.pc-tab ul li label:active {
background: #fff;
}
.pc-tab ul li:not(:last-child) label {
border-right-width: 0;
}
.pc-tab section {
font-family: "Droid Serif";
clear: both;
}
.pc-tab section div {
padding: 20px;
width: 100%;
border: 1px solid #ddd;
background: #fff;
line-height: 1.5em;
letter-spacing: 0.3px;
color: #444;
}
.pc-tab section div h2 {
margin: 0;
font-family: "Raleway";
letter-spacing: 1px;
color: #34495e;
}
#tab1:checked ~ nav .tab1 label, #tab2:checked ~ nav .tab2 label, #tab3:checked ~ nav .tab3 label {
background: white;
color: #111;
position: relative;
}
#tab1:checked ~ nav .tab1 label:after, #tab2:checked ~ nav .tab2 label:after, #tab3:checked ~ nav .tab3 label:after {
content: '';
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #fff;
left: 0;
bottom: -1px;
}
footer {
margin-top: 50px;
font-size: 14px;
color: #ccc;
text-align: center;
}
footer a {
color: #aaa;
text-decoration: none;
}
<h1>PureCSS Tabs</h1>
<div class="pc-tab">
<input checked="checked" id="tab1" type="radio" name="pct" />
<input id="tab2" type="radio" name="pct" />
<input id="tab3" type="radio" name="pct" />
<nav>
<ul>
<li class="tab1">
<label for="tab1">First Tab</label>
</li>
<li class="tab2">
<label for="tab2">Second Tab</label>
</li>
<li class="tab3">
<label for="tab3">Third Tab</label>
</li>
</ul>
</nav>
<section>
<div class="tab1">
<h2>First</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus itaque quidem minus nostrum, voluptatem accusamus aspernatur quia harum ratione, officia laudantium inventore autem doloribus atque labore numquam non. Hic, animi.</p>
</div>
<div class="tab2">
<h2>Second</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum nesciunt ipsum dolore error repellendus officiis aliquid a, vitae reprehenderit, accusantium vero, ad. Obcaecati numquam sapiente cupiditate. Praesentium eaque, quae error!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, maiores.</p>
</div>
<div class="tab3">
<h2>Third</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, nobis culpa rem, vitae earum aliquid.</p>
</div>
</section>
</div>
<footer>
Source: https://codepen.io/renatorib/pen/rlpfj
by rena.to
</footer>

How to make the picture in the background change with the main slider?

There is a usual slider with text information. How to make so that when changing the slide with the text the background picture itself also changes? How to implement this? I use slick-slider. But the text "static text here" with a white background should not change with the slider. It is important. I am interested in this implementation and its possibility in principle.
$('.js-slider').slick({
appendArrows:$('.head-slider .js-arrows'), // Class For Arrows Buttons
prevArrow:'<span class="arrow arrow_prev arrow_lg"></span>',
nextArrow:'<span class="arrow arrow_next arrow_lg"></span>',
autoplay: true,
autoplaySpeed: 2000,
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
}
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
}
.wrap {
height: 100vh;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
}
.head-slider {
max-width: 786px;
width: 100%;
position: relative;
background: rgba(195, 158, 158, 0.7);
margin: auto 0;
}
.head-slider p {
font-size: 20px;
line-height: 28px;
max-height: 165px;
overflow: hidden;
}
.arrows {
position: absolute;
top: 48px;
right: 40px;
z-index: 10;
}
.arrows_main {
top: inherit;
right: 0;
}
.slider-item {
margin: 55px;
min-height: 342px;
max-height: 342px;
overflow: hidden;
}
.arrow {
display: inline-block;
width: 40px;
height: 40px;
position: relative;
cursor: pointer;
}
.arrow:after {
content: "";
display: inline-block;
vertical-align: middle;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 8px;
height: 8px;
border-top: 2px solid #c96217;
border-right: 2px solid #c96217;
transition: transform 0.5s;
}
.arrow_next:after {
transform: rotate(45deg);
}
.arrow_prev:after {
transform: rotate(225deg);
}
.text {
background: #fff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="wrap" style="background-image: url(https://images.unsplash.com/photo-1539567601-bf304c363f16?ixlib=r0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7aee0ae43485302fd9e03461549a1459&auto=format&fit=crop&w=3891&q=80)">
<div class="head-slider">
<div class="arrows arrows_main js-arrows"></div>
<div class="slider js-slider">
<div class="slider-item">
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus soluta inventore nisi tempore! In deleniti nobis, incidunt doloremque quia labore vero odio, accusantium laborum, necessitatibus perspiciatis minima esse itaque! Fuga, dolore animi esse voluptatibus recusandae assumenda sed praesentium eos ex!
</p>
</div>
<div class="slider-item">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe porro qui sint, obcaecati eius excepturi! Cumque accusamus numquam maiores dolorum quaerat suscipit cum placeat praesentium.</p>
</div>
<div class="slider-item">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quasi.</p>
</div>
</div>
</div>
<div class="text">
static text here
</div>
</div>

Good question Dan,
One way to handle this is by placing a "cover" over your slider. Use absolute positioning to place a div over your slider. Then, you can place text in front of the slider, while having the slider rotate images in the background.
I went ahead and added a snippet to make my answer more clear.
https://codepen.io/jacobshenning/pen/qJVMQa
HTML
<div class="container">
<div class="cover">
Cover Text
</div>
<div class="slider">
<div id="ImageOne"></div>
<div id="ImageTwo"></div>
<div id="ImageThree"></div>
</div>
</div>
CSS
.container {
height: 600px;
width: 400px;
}
.cover {
color: white;
position: absolute;
padding: 20px;
font-size: 24px;
z-index: 100;
}
#ImageOne {
background-image: url('http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg');
background-size: cover;
min-height: 300px;
}
#ImageTwo {
background-image: url('http://gbaproducts.com/wp-content/uploads/2017/11/img-placeholder-dark-vertical.jpg');
background-size: cover;
min-height: 300px;
}
#ImageThree {
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHdqxo4BzJeS6EZkWzm9lqnmikKnGUXBsTAm1V55j3IWAfMn2daQ');
background-size: cover;
min-height: 300px;
}
JS
$(document).ready(function(){
$('.slider').slick();
});

Why doesn't this slider work when I insert it on the website?

I've picked a slider from codepen.io to put on my website, and it doesn't work when I embed it... The four slides that should be separated are all together and the buttons don't work... The same happens when I paste the code in JSFiddle... Can anyone help me, please?
Here is the Fiddle: https://jsfiddle.net/swpch979/
And here is the code:
<div class="slider">
<input class="slider__nav" type="radio" name="slider" title="slide1" checked="checked"/>
<input class="slider__nav" type="radio" name="slider" title="slide2"/>
<input class="slider__nav" type="radio" name="slider" title="slide3"/>
<input class="slider__nav" type="radio" name="slider" title="slide4"/>
<div class="slider__inner">
<div class="slider__contents"><i class="slider__image fa fa-codepen"></i>
<h2 class="slider__caption">codepen</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-newspaper-o"></i>
<h2 class="slider__caption">newspaper-o</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-television"></i>
<h2 class="slider__caption">television</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-diamond"></i>
<h2 class="slider__caption">diamond</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
</div>
</div>
<style type="text/css">
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,700);
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
$slider-length: 4;
$radioBtn-size: 12px;
$btn-color: #ccc;
$active-color: #333;
//---------------------------------------------------
*, *:before, *:after { box-sizing: border-box;}
html,body { height: 100%;}
body {
color: #444;
font-family: 'Josefin Sans', sans-serif;
font-size: 1rem;
line-height: 1.5;
}
.slider {
height: 100%;
position: relative;
overflow: hidden;
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
justify-content: center;
&__nav {
width: $radioBtn-size;
height: $radioBtn-size;
margin: 2rem $radioBtn-size;
border-radius: 50%;
z-index: 10;
outline: $radioBtn-size / 2 solid $btn-color;
outline-offset: $radioBtn-size / -2;
box-shadow:
0 0 0 0 $active-color,
0 0 0 0 rgba($active-color,0);
cursor: pointer;
appearance: none;
backface-visibility: hidden;
&:checked {
animation: check 0.5s linear forwards;
#for $i from 0 to $slider-length {
&:nth-of-type(#{$i+1}) {
~ .slider__inner {
transform: translateX((-100% * $i) / $slider-length);
}
}
}
}
}
&__inner {
position: absolute;
top: 0;
left: 0;
width: 100% * $slider-length;
height: 100%;
transition: all 1s ease-out;
display: flex;
flex-flow: row nowrap;
}
&__contents {
height: 100%;
padding: 2rem;
text-align: center;
display: flex;
flex: 1;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
&__image {
font-size: 2.7rem;
}
&__caption {
font-weight: 700;
margin: 2rem 0 1rem;
text-shadow: 0 1px 1px rgba(0,0,0,0.1);
text-transform: uppercase;
}
&__txt {
color: #999;
margin-bottom: 3rem;
max-width: 300px;
}
}
// animation ---------------------------
#keyframes check {
50% {
outline-color: $active-color;
box-shadow:
0 0 0 $radioBtn-size $active-color,
0 0 0 $radioBtn-size*3 rgba($active-color,0.2);
}
100% {
outline-color: $active-color;
box-shadow:
0 0 0 0 $active-color,
0 0 0 0 rgba($active-color,0);
}
}
Thanks,
Tom

It's using scss as a preprocessor. Convert to regular CSS and it'll work.
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,700);
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
color: #444;
font-family: 'Josefin Sans', sans-serif;
font-size: 1rem;
line-height: 1.5;
}
.slider {
height: 100%;
position: relative;
overflow: hidden;
display: flex;
flex-flow: row nowrap;
align-items: flex-end;
justify-content: center;
}
.slider__nav {
width: 12px;
height: 12px;
margin: 2rem 12px;
border-radius: 50%;
z-index: 10;
outline: 6px solid #ccc;
outline-offset: -6px;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
cursor: pointer;
appearance: none;
backface-visibility: hidden;
}
.slider__nav:checked {
animation: check 0.5s linear forwards;
}
.slider__nav:checked:nth-of-type(1)~.slider__inner {
transform: translateX(0%);
}
.slider__nav:checked:nth-of-type(2)~.slider__inner {
transform: translateX(-25%);
}
.slider__nav:checked:nth-of-type(3)~.slider__inner {
transform: translateX(-50%);
}
.slider__nav:checked:nth-of-type(4)~.slider__inner {
transform: translateX(-75%);
}
.slider__inner {
position: absolute;
top: 0;
left: 0;
width: 400%;
height: 100%;
transition: all 1s ease-out;
display: flex;
flex-flow: row nowrap;
}
.slider__contents {
height: 100%;
padding: 2rem;
text-align: center;
display: flex;
flex: 1;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
.slider__image {
font-size: 2.7rem;
}
.slider__caption {
font-weight: 700;
margin: 2rem 0 1rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.slider__txt {
color: #999;
margin-bottom: 3rem;
max-width: 300px;
}
#keyframes check {
50% {
outline-color: #333;
box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
}
100% {
outline-color: #333;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
}
}
<div class="slider">
<input class="slider__nav" type="radio" name="slider" title="slide1" checked="checked" />
<input class="slider__nav" type="radio" name="slider" title="slide2" />
<input class="slider__nav" type="radio" name="slider" title="slide3" />
<input class="slider__nav" type="radio" name="slider" title="slide4" />
<div class="slider__inner">
<div class="slider__contents"><i class="slider__image fa fa-codepen"></i>
<h2 class="slider__caption">codepen</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-newspaper-o"></i>
<h2 class="slider__caption">newspaper-o</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-television"></i>
<h2 class="slider__caption">television</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-diamond"></i>
<h2 class="slider__caption">diamond</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
</div>
</div>