We Keep Coding

Stop clicking on wrapper eventListner

I'm trying to make an open/colapse elements on this page. I'm using #wrapper::before to overlay screen, also it has a eventlistner to close elements showed. Using {capture: true} on wrapper eventListner I made it open and colapse, but when I click on search bar to type something, it colapse anyway.
How do I make it not colapse with any click? Just on the wrapper::before
const responsiveIcons = document.querySelectorAll('.mininav>*');
const wrapper = document.querySelector('#wrapper');
const mainNav = document.querySelector('aside');
const searchBar = document.querySelector('form#search');
function openItem(e){
e.classList.add('show');
wrapper.classList.add('show');
}
function closeItems(){
switch(true){
case mainNav.classList.contains('show'):
mainNav.classList.remove('show');
break;
case searchBar.classList.contains('show'):
searchBar.classList.remove('show');
break;
}
wrapper.classList.remove('show');
}
function showSelector(e){
const eClass = e.target.classList;
switch(true){
case eClass.contains('nav'):
openItem(mainNav);
break;
case eClass.contains('searchbar'):
openItem(searchBar);
break;
}
// if(e.target.classList.contains('nav')){
// openItem(mainNav);
// } else if{}
}
wrapper.addEventListener('click', closeItems, {capture: true});
responsiveIcons.forEach(e => e.addEventListener('click', showSelector));
:root {
--font-family: "Ubuntu", sans-serif;
--font-size: 16px;
--title-color: rgb(58, 58, 58);
--background-color: white;
--bgHeader: #003459;
--bgSearchBar: #002a45;
--headers: #003459;
--bgMain: #EBF9FF;
--textColor: #00171F;
--cardGreen: rgba(157, 255, 0, 1);
--cardBlue: rgba(0, 174, 255, 1);
--cardRed: rgba(255, 42, 42, 1);
--cardYellow: rgba(255, 251, 0, 1);
--headerMargin: .5rem 0;
--box-shadow: 0 1rem 1rem -0.75rem rgb(105 96 215 / 18%);
--wrap-first-column: 14rem;
--nav-txt-color: #5c5c5c;
}
#wrapper {
display: grid;
grid-template-columns: min-content 1fr;
grid-template-rows: min-content 1fr;
background-color: var(--bgMain);
min-height: 100%;
}
#wrapper.show::before {
content: "";
position: fixed;
background-color: black;
opacity: 0.5;
z-index: 2;
width: 100%;
height: 100%;
}
header {
grid-column: span 2;
column-span: all;
background: var(--bgHeader);
justify-content: space-between;
}
.brand {
height: fit-content;
width: 12.5rem;
align-items: center;
margin: var(--headerMargin);
}
header > div + div {
height: fit-content;
width: auto;
align-items: center;
margin: var(--headerMargin);
margin: auto 0.5rem;
}
.mininav {
color: white;
width: max-content;
display: inline-block;
flex-direction: row;
flex-wrap: nowrap;
}
aside.show {
left: 0;
}
aside {
inset: 0 auto;
position: absolute;
top: 0;
left: calc(var(--wrap-first-column) * -1);
}
main {
width: inherit;
}
form#search.show {
top: 0.5rem;
}
form#search {
position: absolute;
top: -2.5rem;
left: 0;
width: 100%;
transition: top 0.15s ease-out;
}
form#search > div {
position: relative;
margin-left: 10px;
}
<div id="wrapper">
<!-- Full container grid -->
<header class="flex">
<div class="brand flex">
<img src="./images/logo-cp-admin.png" alt="" class="">
</div>
<div class="flex">
<!-- search bar -->
<form id="search" action="#" method="get">
<div class=" align-top">
<input id="searchbar" type="search" placeholder=" "
class="text-xs focus:outline-none bg-bgSearchBar/[.0] focus:bg-bgSearchBar/50 text-white p-1.5 pl-3 pr-6 my-0.5 rounded-xl">
<label for="searchbar">Busca...</label>
<span class="mdi mdi-magnify"></span>
</div>
</form>
</div>
<!-- mobile responsive -->
<div class="mininav flex" >
<label class="searchbar mdi mdi-magnify">MAGNIFY</label>
<label class="nav mdi mdi-menu">HAM-MENU
</div>
</header>
<div class="flex col-span2">
<!-- side content (menu & widgets)-->
<aside>
side
</aside>
<main>
main
</main>
</div>

Two things needed to be changed.
First, the closeItems() function needs to be changed to accept an event, and to ignore clicks on the search bar.
Second, the #wrapper.show::before rule needs to not have z-index: 2 which was making the search bar appear below the ::before element and impossible to click on.
const responsiveIcons = document.querySelectorAll('.mininav>*');
const wrapper = document.querySelector('#wrapper');
const mainNav = document.querySelector('aside');
const searchBar = document.querySelector('form#search');
function openItem(e){
e.classList.add('show');
wrapper.classList.add('show');
}
function closeItems(e){
if(e.target.id == 'searchbar')
return;
switch(true){
case mainNav.classList.contains('show'):
mainNav.classList.remove('show');
break;
case searchBar.classList.contains('show'):
searchBar.classList.remove('show');
break;
}
wrapper.classList.remove('show');
}
function showSelector(e){
const eClass = e.target.classList;
switch(true){
case eClass.contains('nav'):
openItem(mainNav);
break;
case eClass.contains('searchbar'):
openItem(searchBar);
break;
}
// if(e.target.classList.contains('nav')){
// openItem(mainNav);
// } else if{}
}
wrapper.addEventListener('click', closeItems, {capture: true});
responsiveIcons.forEach(e => e.addEventListener('click', showSelector));
:root {
--font-family: "Ubuntu", sans-serif;
--font-size: 16px;
--title-color: rgb(58, 58, 58);
--background-color: white;
--bgHeader: #003459;
--bgSearchBar: #002a45;
--headers: #003459;
--bgMain: #EBF9FF;
--textColor: #00171F;
--cardGreen: rgba(157, 255, 0, 1);
--cardBlue: rgba(0, 174, 255, 1);
--cardRed: rgba(255, 42, 42, 1);
--cardYellow: rgba(255, 251, 0, 1);
--headerMargin: .5rem 0;
--box-shadow: 0 1rem 1rem -0.75rem rgb(105 96 215 / 18%);
--wrap-first-column: 14rem;
--nav-txt-color: #5c5c5c;
}
#wrapper {
display: grid;
grid-template-columns: min-content 1fr;
grid-template-rows: min-content 1fr;
background-color: var(--bgMain);
min-height: 100%;
}
#wrapper.show::before {
content: "";
position: fixed;
background-color: black;
opacity: 0.5;
width: 100%;
height: 100%;
}
header {
grid-column: span 2;
column-span: all;
background: var(--bgHeader);
justify-content: space-between;
}
.brand {
height: fit-content;
width: 12.5rem;
align-items: center;
margin: var(--headerMargin);
}
header > div + div {
height: fit-content;
width: auto;
align-items: center;
margin: var(--headerMargin);
margin: auto 0.5rem;
}
.mininav {
color: white;
width: max-content;
display: inline-block;
flex-direction: row;
flex-wrap: nowrap;
}
aside.show {
left: 0;
}
aside {
inset: 0 auto;
position: absolute;
top: 0;
left: calc(var(--wrap-first-column) * -1);
}
main {
width: inherit;
}
form#search.show {
top: 0.5rem;
}
form#search {
position: absolute;
top: -2.5rem;
left: 0;
width: 100%;
transition: top 0.15s ease-out;
}
form#search > div {
position: relative;
margin-left: 10px;
}
<div id="wrapper">
<!-- Full container grid -->
<header class="flex">
<div class="brand flex">
<img src="./images/logo-cp-admin.png" alt="" class="">
</div>
<div class="flex">
<!-- search bar -->
<form id="search" action="#" method="get">
<div class=" align-top">
<input id="searchbar" type="search" placeholder=" "
class="text-xs focus:outline-none bg-bgSearchBar/[.0] focus:bg-bgSearchBar/50 text-white p-1.5 pl-3 pr-6 my-0.5 rounded-xl">
<label for="searchbar">Busca...</label>
<span class="mdi mdi-magnify"></span>
</div>
</form>
</div>
<!-- mobile responsive -->
<div class="mininav flex" >
<label class="searchbar mdi mdi-magnify">MAGNIFY</label>
<label class="nav mdi mdi-menu">HAM-MENU
</div>
</header>
<div class="flex col-span2">
<!-- side content (menu & widgets)-->
<aside>
side
</aside>
<main>
main
</main>
</div>

How to posititon text in a slick slider and ensure it does not move around

I'm currently trying to overlay text over the image in my slick slider, however even though I have overlaid the text when I resize the window the text seems to move around in the image. How do I fix this? Is there a different way to overlay text over an image in an image carousel? please do advise, my code pen is also linked below
This is my codepen
https://codepen.io/rahil8533/pen/OJzpzxo
HTML code
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css">
</head>
<body>
<section class="regular slider">
<div>
<img src="https://s26.postimg.cc/7ayxq3q5l/cg5.jpg">
<div class="content">
<h2>Covid 19 measures on campus</h2>
</div>
</div>
<div>
<img src="https://s26.postimg.cc/zccz3svft/cg6.jpg">
<div class="content">
<h2>2Covid 19 measures on campus</h2>
</div>
</div>
<div>
<img src="https://s26.postimg.cc/7g2ozrxgp/cg4.jpg">
<div class="content">
<h2>3Covid 19 measures on campus</h2>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
arrows: false
});
});
</script>
</body>
</html>
CSS code
html, body {
margin: 0;
padding: 0;
}
.slider {
width: 50%;
margin: 0px auto;
}
.slick-slide {
position: relative;
margin: 0px 0px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots li button:before {
font-size: 10px; !important
}
.slick-prev,
.slick-next {
left: 0;
right: 0;
}
.content{
position: absolute;
width: 100%;
height: 100%;
top: 5px;
left: 0;
line-height: 100vh;
text-align: center;
z-index: 99;
}```

The issue is that the height of your h2 textbox follows the height of the window. Add the setting adaptiveHeight: false to your slick code as well as the following css and js updates.
You must update your h2 and .content with the following css styles:
.content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
line-height: 1;
z-index: 99;
}
h2 {
position: relative;
display: flex;
text-align: center;
align-items: center;
margin: 0;
justify-content: center;
}
Update your JavaScript to the following:
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
arrows: false,
adaptiveHeight: false
}).on("setPosition", function (event, slick) {
$(".content > h2").css("height", slick.$slides.height() + "px");
});
});
</script>
The codepen can be found here.

Change the content in the CSS to :
.content {
position: relative;
width: 100%;
height: 100%;
top: -190px;
left: 5;
text-align: center;
z-index: 99;
margin-bottom:-65px
}
The relative position will change position on resize accordingly. The margin-bottom makes sure the dots are also in place.

Slick Slider 2 sliders not matching slides and Slider inside Bootstrap Modal

As you can see I have 2 slick sliders running in this page, One is seen by default and the second one is triggered in a bootstrap modal when user click one of the slides of the first one. This is to see the slide individually and in bigger size . My use case is simply this and I am super close to completing: When user click any of the slide of the slider, a modal should pop up with slick slider with a 1 slideToShow option instead of 3 so the image is bigger, the slide that show on the Modal should be the same the one user clicked.
Issues.
1. When page is refreshed and user click one of the slide, the modal slider opens to with a buggy view, once i start clicking the next and previous arrow , this goes away, why is this happening?
see the bugg view:
2. How do i show the same slide the user clicker on the modal also, right now modal slider opens like a new slider and the first slide is shown all the time not the one user clicked
.stack-list-slider-slider-area {
margin-top: 30px;
}
.stack-list-slider-slider-area .stack-list-slider-slide h3 {
font-size: 15px;
text-align: center;
margin-top: 18px;
}
.stack-list-slider-slider-area button.slick-prev.slick-arrow {
position: relative;
width: 30px;
overflow: hidden;
background: transparent;
border: 0;
position: absolute;
left: 0px;
right: auto;
z-index: 11;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
}
.stack-list-slider-slider-area button.slick-prev.slick-arrow:after {
content: "<";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #00805f;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.stack-list-slider-slider-area button.slick-next.slick-arrow {
position: relative;
width: 40px;
overflow: hidden;
background: transparent;
border: 0;
position: absolute;
left: auto;
right: 0px;
z-index: 11;
top: 50%;
transform: translateY(-50%);
height: 40px;
}
.stack-list-slider-slider-area button.slick-next.slick-arrow:after {
content: ">";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #00805f;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.stack-list-slider-slider-area .stack-list-slider.slick-initialized.slick-slider {
position: relative;
}
.stack-list-slider-slider-area .stack-list-slider-slide {
padding: 30px 0;
}
.stack-list-slider-slider-area .slider-img img {
display: block;
width: 100%;
}
.stack-list-slider-slider-area .slick-initialized .slick-slide {
padding: 0 15px !important;
}
.stack-list-slider-slider-area .stack-list-slider.slick-initialized.slick-slider {
padding: 0 40px;
}
.stack-list-slider-modal-slider-area {
margin-top: 30px;
}
.stack-list-slider-modal-slider-area .stack-list-slider-modal-slide h3 {
font-size: 15px;
text-align: center;
margin-top: 18px;
}
.stack-list-slider-modal-slider-area button.slick-prev.slick-arrow {
position: relative;
width: 30px;
overflow: hidden;
background: transparent;
border: 0;
position: absolute;
left: 0px;
right: auto;
z-index: 11;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
}
.stack-list-slider-modal-slider-area button.slick-prev.slick-arrow:after {
content: "<";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #00805f;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.stack-list-slider-modal-slider-area button.slick-next.slick-arrow {
position: relative;
width: 40px;
overflow: hidden;
background: transparent;
border: 0;
position: absolute;
left: auto;
right: 0px;
z-index: 11;
top: 50%;
transform: translateY(-50%);
height: 40px;
}
.stack-list-slider-modal-slider-area button.slick-next.slick-arrow:after {
content: ">";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #00805f;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.stack-list-slider-modal-slider-area .stack-list-modal-slider.slick-initialized.slick-slider {
position: relative;
}
.stack-list-slider-modal-slider-area .stack-list-slider-modal-slide {
padding: 30px 0;
}
.stack-list-slider-modal-slider-area .slider-img img {
display: block;
width: 100%;
}
.stack-list-slider-modal-slider-area .slick-initialized .slick-slide {
padding: 0 15px !important;
}
.stack-list-slider-modal-slider-area .stack-list-modal-slider.slick-initialized.slick-slider {
padding: 0 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Practice Html page</title>
<!-- Slick Slider CSS CDN 3.3.1-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
<!-- Bootstrap CSS CDN 3.3.1-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head><!-- end head -->
<body>
<div class="stack-list-slider-slider-area">
<div class="container">
<div class="stack-list-slider">
<div class="stack-list-slider-slide" data-toggle="modal" data-target="#modalId">
<div class="slider-img">
<img src="https://www.dropbox.com/s/nnbizh3joq3l71n/1.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-slide" data-toggle="modal" data-target="#modalId">
<div class="slider-img">
<img src="https://www.dropbox.com/s/9k753y33lfwnnnw/2.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-slide" data-toggle="modal" data-target="#modalId">
<div class="slider-img">
<img src="https://www.dropbox.com/s/9dven42pc2o012j/3.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-slide" data-toggle="modal" data-target="#modalId">
<div class="slider-img">
<img src="https://www.dropbox.com/s/feqzlynvgryieh5/4.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
</div> <!-- /.stack-list-slider -->
</div><!-- end container -->
</div><!-- end slider area -->
<!-- img gallary modal start -->
<div id="modalId" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="stack-list-slider-modal-slider-area">
<div class="stack-list-modal-slider">
<div class="stack-list-slider-modal-slide" >
<div class="slider-img">
<img src="https://www.dropbox.com/s/nnbizh3joq3l71n/1.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-modal-slide" >
<div class="slider-img">
<img src="https://www.dropbox.com/s/9k753y33lfwnnnw/2.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-modal-slide" >
<div class="slider-img">
<img src="https://www.dropbox.com/s/9dven42pc2o012j/3.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-modal-slide" >
<div class="slider-img">
<img src="https://www.dropbox.com/s/feqzlynvgryieh5/4.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
</div> <!-- /.stack-list-slider -->
</div><!-- end slider area -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- img gallary modal ends -->
<!-- Loading Jquery 3.4.0 CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Loading Jquery 3.4.0 CDN -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Loading Slick Slider CDN -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
$(document).ready(function () {
$('.stack-list-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
arrows: true,
asNavFor: ".stack-list-modal-slider",
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
}
},
]
});
$('.stack-list-modal-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
arrows: true,
asNavFor: ".stack-list-slider",
});
});
</script>
</body>
</html>

add this section
$('#myModal').on('shown.bs.modal', function () {
//write your code here
});
full code
$(document).ready(function () {
$('.stack-list-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
arrows: true,
asNavFor: ".stack-list-modal-slider",
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
}
},
]
});
});
$('#modalId').on('shown.bs.modal', function () {
$('.stack-list-modal-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
arrows: true,
asNavFor: ".stack-list-slider",
});
});
reference is here https://codepen.io/mhfuad/pen/yLNRagb
I think this is a solution for now

Getting the "data-slick-index" when clicking the first slide and using that to set the modal slider using "slickGoTo" fixed the slide matching issue. As far as the bug goes Multiple fixes were needed
1) use "unslick" when not using modal slider and trigger modal slider only when modal is modal is open(thanks to MH Fuad), the bug seems to be happening due to multiple sliders in one page. Here is my jquery
jQuery(document).ready(function () {
jQuery('.stack-list-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
arrows: true,
infinite: true,
asNavFor: ".stack-list-modal-slider",
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
}
},
]
});
});
var clickedSlick;
jQuery('.stack-list-slider-slide').each(function () {
jQuery(this).click(function (e) {
e.preventDefault();
var test =jQuery(this).closest('.slick-active').attr('data-slick-index');
console.log(test);
clickedSlick = test;
});
})
jQuery('.stack-list-slider .stack-list-modal-slider').removeClass('slick-active');
//set active class to first thumbnail slides
jQuery('.stack-list-slider .stack-list-modal-slider').eq(0).addClass('slick-active');
jQuery('#modalId').on('shown.bs.modal', function () {
jQuery('.stack-list-modal-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
arrows: true,
infinite: true,
asNavFor: ".stack-list-slider",
});
jQuery('.stack-list-modal-slider').slick('slickGoTo', clickedSlick);
});
jQuery("#modalId").on('hidden.bs.modal', function (e) {
jQuery('.stack-list-modal-slider').slick('unslick')
});

After clicking a hamburger icon, the menu does not display above slide-show images on the main page

I do not know how to show the menu above the slide-show images after clicking the hamburger icon. I used z-index and .addClass in order to add the diplay:none property to the #slideshow. This did not work. I do not know what I can do next.
https://jsfiddle.net/ft31scgw/
main.js
<script>
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplay: true,
autoplaySpeed: 8000,
dots: true,
});
});
function hMenu() {
var menu = document.getElementById("toggle");
if(menu) {
var hide = $("#slideshow").hide();
} else {
var show = $("#slideshow").show();
}
}
</script>
style.css
enter image description here
#media only screen and (max-width: 736px) {
#slideshow {
position: relative;
top: 0px;
left: 0px;
}
#slideshow {
div {
width: 100%;
height: 300px;
img {
width: 100%;
height: auto;
}
}
}
button {
text-transform: uppercase;
font-weight: bold;
}
.logo img {
width: 80%;
max-width: 473px;
height: 50px;
}
label{
display: block;
cursor: pointer;
z-index: 10;
}
.menu {
text-align: center;
width: 100%;
display: none;
background: black;
}
.menu a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 1;
}
#toggle:checked + .menu {
display: block;
z-index: 10;
}
#slideshow {
z-index: 0;
}
.disappear {
display:none;
z-index: -2;
}
}/* #media min-width 736px */
index.html
<div id="header">
<div class="logo">
<h1><img src="img/logo.png" widht="473px" height="50px"></h1>
</div>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" onclick="hMenu()" />
<div class="menu">
Work
About Us
Services
Blog
<span>Contact Us</span>
</div>
</div>
</div><!-- /#header -->
<section id="slideshow">
<div class="slick">
<div><img src="img/image1.jpg" alt=""></div>
<div><img src="img/image2.jpg" alt=""></div>
<div><img src="img/image3.jpg" alt=""></div>
</div>
</section>

Good to know, that z-index specifies the stack order of siblings elements. In your case <div class="header"> needs z-index greater than <section id="slideshow">. z-index only works on positioned elements, so both of them should have position:relative. I made a working example for you on jsFiddle.

Video Modal bootstrap

I have a problem, have been a few days being employed at a web page for a few friends, and I need to do the modal one with a video of YouTube, am using swig for that it seems to me that compiled to html is very effective, an overcoat when you use objects as JSON, the question is that I have managed to make the modal one with images, is very simple, but with the videos it is more complicated.
this is my css:
#headerLogo{
background: url(https://images2.alphacoders.com/698/698137.jpg);
background-size: cover;
height: 250px;
display: block;
margin-top: 50px;
}
#text{
color: white;
position: absolute;
text-align:center;
font-size: 36px;
width: 100%;
padding: 0;
margin: 0;
line-height: 250px;
}
.navbar{
margin-bottom: 0px;
}
.fa{
font-size:22px;
color: #0077cd;
}
.fa:hover{
color: #0890f2;
}
.footer{
text-align: center;
color: #c6c6c6;
}
#indexImage{
width:100%;
height: auto;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #000000;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
top: 15px;
right: 35px;
color: #ffffff;
font-size: 60px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
This is my js file:
// Get the modal
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName("imageClass");
for(var i = 0; i < images.length; i++){
var img = images[i];
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
$('#closeImage').onclick = function() {
modal.style.display = "none";
}
And this is my projects.html made it with swig:
{% extends 'layout.html' %}
{% block title %}{{ title }}{% endblock %}
{% block header %}{% include 'header.html' %}{% endblock %}
{% block headerLogo %}{% include 'headerLogo.html' %}{% endblock %}
{% block styles %}{% include 'styles.html' %}{% endblock %}
{% block content %}
<div>
{% for key, val in projectImages %}
{% if val.type == "image" %}
<img id="myImg" class="imageClass" src="{{val.src}}" alt="{{val.title}}" width="300" height="200">
{% elseif val.type == "video" %}
<img id="myImg" class="videoClass" src="http://img.youtube.com/vi/{{val.src}}/0.jpg" alt="{{val.title}}" width="300" height="200">
{% endif %}
{% endfor %}
<div id="myModal" class="modal">
<span id="closeImage" class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
<script src="../js/fotoInModal.js"></script>
{% endblock %}
My JSON object:
{
"title": "Argochamber",
"indexContent":"Was created in 2012, by Pablo Blanco Celdrán and Eric Dacal Sanchez, in order to create fun games and for the whole world.",
"navButtons" : [{"name": "Projects", "src": "./projects.html"}, {"name": "Contacts", "src": "./contacts.html"},{"name": "Teams", "src":"./teams.html"}],
"imageUrl" : "https://avatars0.githubusercontent.com/u/17063359?v=4&s=200",
"imageHeaderLogo" : "https://images2.alphacoders.com/698/698137.jpg",
"headerNavBar": "navbar-light bg-primary",
"fontawesome": [{"icon": "fa fa-facebook-official", "src": "https://www.facebook.com/argochamber/?ref=br_rs"},
{"icon": "fa fa-twitter-square", "src": "https://twitter.com/argochamber"}],
"projectImages":[{"title": "Spiderman in New York", "src": "../image/spidey.jpg", "type": "image"},
{"title": "Sculpting link", "src":"ALbt17LLH54", "type": "video"}],
"css": {
"headerTextColor": "white",
"headerFontSize": "36px"
}
}
Result before click image:
Result after click image:

In projects.html you have img instead of YouTube iframe
{% elseif val.type == "video" %}
<img id="myImg" class="videoClass" src="http://img.youtube.com/vi/{{val.src}}/0.jpg" alt="{{val.title}}" width="300" height="200">
{% endif %}