prevArrow messing up the image width - javascript

I have implemented Slick.js to mine project but for some reason when I use nextArrow and prevArrow my picture gets cropped to around 60% of the width, I have tried to make a custom class which deffiness a width of 100% but that didn't solve the problem. Just checked only prevArrow causes a problem
Here is how it should look like:
Here is how it looks like:
$('.slider-one').not(".slick-initialized").slick({
autoplay: true,
autoplaySpeed: 3000,
dots: true,
prevArrow: ".site-slider .slider-btn .prev",
nextArrow: ".site-slider .slider-btn .next"
});
.wid {
width: 100% !important;
height: 500px;
}
/*Slider*/
.site-sider {
position: relative;
}
.position-top {
position: absolute;
top: 45%;
}
.site-slider .slider-btn .prev,
.site-slider .slider-btn .next {
background-color: #091a5d;
padding: 1rem 1.5rem;
border-radius: 50%;
color: white;
margin: 0 1rem;
opacity: 0;
transition: opacity 1s ease;
}
.site-slider:hover .slider-btn .prev,
.site-slider:hover .slider-btn .next {
opacity: 0.9;
}
.right-0 {
right: 0;
}
.slick-dots {
left:50%;
display: flex;
justify-content: center;
margin: 0;
padding: 16px 0;
list-style-type: none;
position: absolute;
bottom: 0;
right: 50%;
}
.slick-dots li {
margin: 0 0.6rem;
}
.slick-dots button {
display: block;
width: 8px;
height: 8px;
padding: 0;
border: none;
background-color: white;
text-indent: -99999px;
border-radius: 100%;
}
.slick-dots .slick-active button {
transform: scale(2.5);
box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.205);
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--Font-->
<script src="https://kit.fontawesome.com/158e82d513.js" crossorigin="anonymous"></script>
<!--Slider-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
<!--Styles-->
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<main>
<!--Slider-->
<div class="container-fluid p-0">
<div class="site-slider">
<div class="slider-one">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" class="wid img-fluid" alt="Slika 1">
</div>
<div>
<img src="https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png" class="wid img-fluid" alt="Slika 2">
</div>
<div>
<img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" class="wid img-fluid" alt="Slika 3">
</div>
</div>
<div class="slider-btn">
<span class="prev position-top"><i class="fas fa-chevron-left"></i></span>
<span class="next position-top right-0"><i class="fas fa-chevron-right"></i></span>
</div>
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<script src="js/main.js"></script>
</body>
So if anyone knows how to solve this, help a brother out :) <3


Instead of class use image directly
$('.slider-one').not(".slick-initialized").slick({
prevArrow:"<img class='a-left control-c prev slick-prev' src='../images/shoe_story/arrow-left.png'>",
nextArrow:"<img class='a-right control-c next slick-next' src='../images/shoe_story/arrow-right.png'>" });


If Your are using bootstrap 3 Use this
.slick-prev:before, .slick-next:before {
font-family: "Glyphicons Halflings","slick", sans-serif;
font-size: 40px;
}
.slick-prev:before { content: "\e257"; }
.slick-next:before { content: "\e258"; }

Related

Why my slick slider with indicator not working?

I have a question about slick sliders. I've made a slider with a slick, I want to create an indicator for each slide. I have the code in Codepen, please check.
What I Want
When I was on the first slide, the active border was on the slider 1 indicator, when I was on slide 2 the indicator was on the slider 2 indicator as below.
I've been looking for several ways but still nothing I can use. if you know how, please help me. Because I don't know how to make custom indicators like that. I need your help please.
HTML
<section id="bannerHome">
<div class="container-fluid">
<div class="row">
<div class="col-12" id="homeBanner">
<div class="slider-banner">
<div class="item">
<div class="content">
<div class="first-layer">
<p>01</p>
<p>01</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="first-layer">
<p>02</p>
<p>02</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-indicator">
<div class="slider-1 active">
For Slider 1
</div>
<div class="slider-2">
For Slider 2
</div>
</div>
</div>
</div>
</div>
</section>
CSS
#bannerHome{
height: 100vh ;
background-color: #c6c6c6;
#homeBanner {
height: 100vh ;
padding: 0;
.slider-banner {
height: 100%;
width: 100%;
.item {
height: 100vh ;
.content{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
.first-layer{
position: absolute;
top: 45%;
left: 0;
transform: translate(0, -45%);
p {
color: #fff;
font-size: 350px;
opacity: .15;
&:nth-child(2){
position: absolute;
font-size:45px;
top: 40%;
left: 25%;
transform: translate(-25%, -40%);
opacity: 1;
&::before{
content: '';
position: absolute;
width: 20px;
height: 3px;
background-color: #fff;
top: 10px;
left: -50px;
}
}
}
}
.second-layer{
.title{
width:55%;
h1{
color: #fff;
font-size: 25px;
line-height: 25px;
}
}
.date{
display: flex;
position: relative;
margin-top: 30px;
p{
color: #e6e6e6;
margin-right: 10px;
font-size: 15px;
&:nth-child(2){
padding-left: 10px;
position: relative;
display:none;
&::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
border-left: 1px solid #e6e6e6;
height: 100%;
}
}
}
}
}
}
}
}
}
}
.arrowBannerLeft{
position: absolute;
background: transparent;
border: none;
top: 55%;
left: 5%;
transform: translate(-5%, -55%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.arrowBannerRight{
position: absolute;
background: transparent;
border: none;
top: 48%;
left: 5%;
transform: translate(-5%, -48%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.slider-indicator {
position: absolute;
display: flex;
bottom: 15%;
left: 50%;
transform: translate(-50%, -15%);
z-index: 1;
.slider-1, .slider-2 {
color: #fff;
padding: 10px 40px;
border-top: 1px solid #000;
&.active{
border-top: 3px solid #EB961D;
}
}
}
JS
var bannerSlider = $('.slider-banner');
$('.slider-banner').slick({
// arrows: false,
// dots: true,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: "<button class='arrowBannerLeft'><img src='assets/img/component/icon/arrowBlockLeft.svg' class='img-fluid'></button>",
nextArrow: "<button class='arrowBannerRight'><img src='assets/img/component/icon/arrowBlockRight.svg' class='img-fluid'></button>",
});
$(".arrowBannerLeft").on("click", function() {
$('.slider-banner').slick("slickNext");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide")
});
$(".arrowBannerRight").on("click", function() {
$(".slider-banner").slick("slickPrev");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide");
});
$('.slider-banner').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var active_val = parseInt($(".slider-indicator .slide").addClass('active'));
var currentSlideIndex = nextSlide;
});

Check out this snippet:
#bannerHome{
height: 100vh ;
background-color: #c6c6c6;
#homeBanner {
height: 100vh ;
padding: 0;
.slider-banner {
height: 100%;
width: 100%;
.item {
height: 100vh ;
.content{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
.first-layer{
position: absolute;
top: 45%;
left: 0;
transform: translate(0, -45%);
p {
color: #fff;
font-size: 350px;
opacity: .15;
&:nth-child(2){
position: absolute;
font-size:45px;
top: 40%;
left: 25%;
transform: translate(-25%, -40%);
opacity: 1;
&::before{
content: '';
position: absolute;
width: 20px;
height: 3px;
background-color: #fff;
top: 10px;
left: -50px;
}
}
}
}
.second-layer{
.title{
width:55%;
h1{
color: #fff;
font-size: 25px;
line-height: 25px;
}
}
.date{
display: flex;
position: relative;
margin-top: 30px;
p{
color: #e6e6e6;
margin-right: 10px;
font-size: 15px;
&:nth-child(2){
padding-left: 10px;
position: relative;
display:none;
&::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
border-left: 1px solid #e6e6e6;
height: 100%;
}
}
}
}
}
}
}
}
}
}
.arrowBannerLeft{
position: absolute;
background: transparent;
border: none;
top: 55%;
left: 5%;
transform: translate(-5%, -55%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.arrowBannerRight{
position: absolute;
background: transparent;
border: none;
top: 48%;
left: 5%;
transform: translate(-5%, -48%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.slider-indicator {
position: absolute;
display: flex;
bottom: 15%;
left: 50%;
transform: translate(-50%, -15%);
z-index: 1;
}
.slider-1, .slider-2 {
color: #fff;
padding: 10px 40px;
border-top: 1px solid #000;
}
.slider-1.active, .slider-2.active{
border-top: 3px solid #EB961D;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" />
<title>Test</title>
</head>
<body>
<section id="bannerHome">
<div class="container-fluid">
<div class="row">
<div class="col-12" id="homeBanner">
<div class="slider-banner">
<div class="item">
<div class="content">
<div class="first-layer">
<p>01</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="first-layer">
<p>02</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30, 2020</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-indicator">
<div class="slider-1 active">
For Slider 1
</div>
<div class="slider-2">
For Slider 2
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<script type="text/javascript">
var bannerSlider = $('.slider-banner');
$('.slider-banner').slick({
// arrows: false,
// dots: true,
slidesToShow: 1,
slidesToScroll: 1,
prevArrow: "<button class='arrowBannerLeft'><i class='fas fa-chevron-left'></i></button>",
nextArrow: "<button class='arrowBannerRight'><i class='fas fa-chevron-right'></i></button>",
});
$(".arrowBannerLeft").on("click", function() {
$('.slider-banner').slick("slickNext");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide")
});
$(".arrowBannerRight").on("click", function() {
$(".slider-banner").slick("slickPrev");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide");
});
$('.slider-banner').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
$(".slider-"+(nextSlide+1)).addClass('active');
$(".slider-"+(currentSlide+1)).removeClass('active');
var currentSlideIndex = nextSlide;
});
</script>
</body>
</html>

Search bar seems to be acting as if its position is sticky but I have it set to fixed yet it still moves down when I scroll

NOTE: TO VIEW SEARCH BAR BE SURE TO OPEN THE SNIPPET IN FULL SCREEN
Can someone help me fix this search button so that it doesnt move down the screen when I scroll.
I have it set to position: fixed but for some reason its still scrolling down.
Here is my website so far and I have the search bar on the far right corner. See snippet below (also please view it in full screen to see the search bar properly):
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Pathway+Gothic+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#1,200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Allerta&display=swap" rel="stylesheet">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
background: white;
}
.third-level-menu {
position: absolute;
top: 0;
right: -190px;
width: 190px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu>li {
height: 45px;
background-color: #6640C1;
background: #6640C1;
}
.third-level-menu>li:hover {
background-color: gold;
}
.second-level-menu {
position: absolute;
top: 45px;
left: 0;
width: 100%;
/* width: 273.2px; */
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu>li {
position: relative;
height: 45px;
background-color: #6640C1;
background: #6640C1;
width: 100%;
}
.second-level-menu>li:hover {
background-color: gold;
}
.top-level-menu {
display: flex;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100px;
z-index: 1;
justify-content: space-between;
}
.top-level-menu>li {
position: relative;
height: 30px;
/* width: 273.2px; */
background: #6640C1;
z-index: 2;
text-align: center;
flex: 1;
}
.top-level-menu>li:hover {
background-color: gold !important;
}
.top-level-menu li:hover>ul {
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
font-family: 'Fjalla One', sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
background: #6640C1;
/* Make the link cover the entire list item-container */
display: block;
line-height: 45px;
}
.top-level-menu a:hover {
color: #000000;
background-color: gold;
}
.container1 {
max-width: 1200px;
margin: auto;
background-color: white;
overflow: auto;
}
.gallery {
margin: 5px;
border: 5px solid black;
border-radius: 5%;
float: left;
width: 390px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 5%;
}
.gallery:hover {
transform: scale(1.03);
}
.desc {
padding: 15px;
text-align: center;
font-family: 'Fjalla One', sans-serif;
;
}
#main-title {
font-family: 'Alfa Slab One', cursive;
color: black;
font-size: 60px;
margin: 20px;
padding: 30px;
position: relative;
bottom: -20px;
background-color: transparent;
display: inline-block;
text-align: center;
}
.footer {
background-color: black;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 100%;
color: white;
height: 300px;
}
.footer a {
text-decoration: none;
color: white;
}
.container2 {
max-width: 1500px;
margin: auto;
overflow: auto;
}
.container-top {
position: fixed;
background-color: gold;
top: 0;
width: 100%;
height: 10%;
z-index: 1;
text-align: center;
}
.top {
display: inline-block;
font-family: 'Permanent Marker', cursive;
font-size: 30px;
width: 100%;
margin: -20px;
z-index: 1;
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
object-fit: cover;
width: 100%;
}
.moving-images {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: auto;
position: relative;
margin-top: -4%;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 2px 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
.arrow {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
align-items: center;
}
.arrow i:hover {
color: black;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.title-block {
position: relative;
background-color: white;
font-family: 'Alfa Slab One', cursive;
width: 100%;
color: black;
margin: 50px 0 0 0px;
height: 20px;
text-decoration: none;
}
:root {
--line-thickness: 0.1em;
--glass-size: 50%;
--icon-height: 2.5rem;
--transition-speed: 0.15s;
--timing-function: cubic-bezier(0.66, 1.51, 0.77, 1.13);
--icon-color: black;
}
/* this is already done */
* {
box-sizing: border-box;
}
body {
margin: 0;
background: white;
background-repeat: no-repeat;
background-attachment: fixed;
}
.search-icon {
box-sizing: border-box;
width: 30px;
height: 30px;
max-width: 20em;
transition: all var(--transition-speed) linear, border-color 0s linear var(--transition-speed);
position: fixed;
top: 0;
right: 0;
bottom: 400px;
left: 0;
margin: auto;
border: solid var(--line-thickness);
border-color: rgba(255, 255, 255, 0);
border-radius: 100px;
padding: 0.25em;
}
.search-icon__wrapper {
width: var(--icon-height);
height: var(--icon-height);
position: absolute;
border-radius: 100px;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
transform: rotate(-45deg);
transition: all 0 linear;
}
.search-icon__wrapper:hover {
cursor: pointer;
}
.search-icon__input {
background: none;
text-align: center;
outline: none;
display: block;
border: none;
background: rgba(255, 255, 255, 0);
width: calc(90% - (var(--icon-height) / 2 + 1rem));
margin-right: 6rem;
height: 100%;
border-radius: 100px;
transition: all var(--transition-speed) linear;
font-size: 20px;
padding: 0 0.5em;
color: black;
}
.search-icon__input::placeholder {
color: grey;
}
.search-icon__glass {
width: var(--glass-size);
height: var(--glass-size);
border: solid var(--line-thickness);
border-color: var(--icon-color);
border-radius: 100px;
margin: 0 auto;
position: relative;
transition: all var(--transition-speed) var(--timing-function) var(--transition-speed), border-color 0s linear var(--transition-speed);
}
.search-icon__handle {
height: calc(100% - var(--glass-size));
width: var(--line-thickness);
margin: 0 auto;
background: var(--icon-color);
position: absolute;
border-radius: 0 0 100px 100px;
left: 0;
right: 0;
bottom: 0;
transition: all var(--transition-speed) var(--timing-function);
transition-delay: var(--transition-speed);
}
.search-icon__handle::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;
background: var(--icon-color);
transform: rotate(0deg);
transition: all var(--transition-speed) var(--timing-function);
transition-delay: 0s;
}
.search-icon.open {
width: 200px;
border-color: var(--icon-color);
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__input {
transition-delay: var(--transition-speed);
}
.search-icon.open .search-icon__glass {
width: 45%;
height: 45%;
transition: all var(--transition-speed) var(--timing-function) 0s, border-color 0s linear var(--transition-speed);
border-color: rgba(0, 0, 0, 0);
}
.search-icon.open .search-icon__handle {
bottom: calc(50% - (100% - var(--glass-size)) / 2);
border-radius: 100px;
transition-delay: 0s;
}
.search-icon.open .search-icon__handle::after {
transition-delay: var(--transition-speed);
transform: rotate(90deg);
}
</style>
<title>TheLeague.com</title>
</head>
<body>
<main>
<div class="container-top">
<div class="top">
<p>Shop 20% Off All Jerseys Now!</p>
</div>
</div>
<div class="title-block">
<div style="float:right; margin: 0 auto;">
<div class=" search-icon" style="margin-right: 50px; position: fixed;">
<input class="search-icon__input" placeholder="search ...">
<div class="search-icon__wrapper">
<div class="search-icon__glass"></div>
<div class="search-icon__handle"></div>
</div>
</div>
</div>
</div>
<div style="margin:0 auto; width:300px; padding: 1px 0 50px 0; font-size: 25px;">
<a style="text-decoration: none;" href="#">
<h1 style="color: black;">The<u>League</u></h1>
</a>
</div>
</div>
<!-- <div>
<div style="text-align: center;">
<a style="text-decoration: none;" href="#">
<h1 id="main-title">The<u>League</u></h1>
</a>
</div>
</div> -->
<ul class="top-level-menu">
<li><i class="fa fa-home" style="font-size: 20px;"></i> Home</li>
<li>
<i class="fa fa-tag" style="font-size: 20px"></i> Shop All ▼
<ul class="second-level-menu">
<li>Jerseys</li>
<li>Hats</li>
<li>Gym Shorts</li>
</ul>
</li>
<li><i class="fa fa-flask" style="font-size: 20px;"></i> Customize</li>
<li>
<i class="fa fa-futbol-o" style="font-size: 20px;"></i> Teams ▼
<ul class="second-level-menu">
<li>
Soccer
<ul class="third-level-menu">
<li>Barcelona</li>
<li>PSG</li>
<li>Real Madrid</li>
</ul>
</li>
<li>
Basketball
<ul class="third-level-menu">
<li>Golden State Warriors</li>
<li>Celtics</li>
<li>Chicago Bulls</li>
</ul>
</li>
<li>
Football
<ul class="third-level-menu">
<li>New England Patriots</li>
<li>Ravens</li>
<li>Atlanta Falcons</li>
</ul>
</li>
</ul>
<li><i class="fa fa-envelope" aria-hidden="true" style="font-size: 20px;"></i> Contacts Us
</li>
</li>
</ul>
<div class="slideshow-container moving-images">
<div class="mySlides">
<img src="https://images.daznservices.com/di/library/sporting_news/a/fe/kobe-bryant-041315-getty-ftrjpg_hnmwtxmeqtvu1fyv5fnzn6abh.jpg?t=926331162&quality=100"
alt="kobe holding shirt" style="width:100%">
</div>
<div class="mySlides">
<img src="https://images.hdqwalls.com/download/lionel-messi-fc-art-1m-1366x768.jpg" style="width:100%">
<!-- <div class="text">Caption Two</div> -->
</div>
<div class="mySlides">
<img src="https://images.wallpapersden.com/image/download/tom-brady-new-england-patriots-football_21828_1366x768.jpg"
style="width:100%;">
<!-- <div class="text">Caption Three</div> -->
</div>
<div style="text-align: center;">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)"><strong>❮ Prev</strong>
</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)"><strong>Next ❯</strong>
</button>
</div>
</div>
<div style="text-align:center; margin: 10px;">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<!-- JavaScript -->
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
const searchIcon = document.querySelector(".search-icon__wrapper");
searchIcon.addEventListener("click", e => searchIcon.parentElement.classList.toggle("open"))
</script>
<!-- End of JavaScript -->
<div style="margin: 30px;">
<hr>
</hr>
</div>
<br><br>
<h3 style="text-align: center;font-size: 30px; color: black;font-family:'Fjalla One', sans-serif; ;">Featured
Jerseys</h3><br><br><br>
<div class="container1">
<div class="gallery">
<img src="https://www.teamzo.com/images/re-2019-2020-barcelona-home-nike-shirt-kids-messi-10-1559836177.png"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Barcelona 2019: Messi Jersey </div>
</div>
<div class="gallery">
<img src="https://fanatics.frgimages.com/FFImage/thumb.aspx?i=/productimages/_1768000/altimages/FF_1768829ALT1_full.jpg&w=900"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Golden State Warriors 2019: StephCurry Jersey </div>
</div>
<div class="gallery">
<img src="https://images.footballfanatics.com/FFImage/thumb.aspx?i=/productimages/_3775000/altimages/ff_3775300-29e956db2213fbdbcf67alt1_full.jpg&w=325"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Canucks 2019: Customizable Jersey </div>
</div>
<div class="gallery">
<img src="https://contestimg.wish.com/api/webimage/5e86c1d100c605394a614f9c-large.jpg?cache_buster=71f3e987b756bb4df19be721d299a68b"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Patriots 2019: Tom Brady Jersey </div>
</div>
<div class="gallery">
<img src="https://fanatics.frgimages.com/FFImage/thumb.aspx?i=/productimages/_3609000/altimages/ff_3609123-ef2947d2ef78011fbfc1alt3_full.jpg&w=600"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> PSG 2019: Neymar Jersey </div>
</div>
<div class="gallery">
<img src="https://cdn.shopify.com/s/files/1/0271/0975/2920/products/thumb.jpg?v=1580412625"
alt="The image shows the 2019-2020 Barcelona jersey">
<div class="desc"> Lakers 2019: Kobe Bryant Jersey </div>
</div>
</div>
<div style="margin: 30px;">
<hr>
</hr>
</div>
<div class="footer">
<div style="float: left; margin: 0 auto; padding: 0 0 0 40px;">
<p><strong>Find a Store</strong></p>
<p><strong>Sign Up For Email</strong></p>
<p><strong>Become A Member</strong></p>
<p><strong>Site Feedback</strong></p>
</div>
<div style="float:right; margin: 0 auto; width: 300px;">
<p>Get Help</p>
<p>Order Status</p>
<p>Shipping and Delivery</p>
<p>Returns</p>
<p>Payment Options</p>
<p>Contact Us</p>
</div>
<div style="margin:0 auto; width:200px; padding:4px 0 0 0;">
<strong>
<p>About The League</p>
</strong>
<p>News</p>
<p>Careers</p>
<p>Investors</p>
<p>Sustainability</p>
</div>
<div style="margin: 30px; color: white;"><br>
<hr>
</hr>
</div>
</div>
</main>
</body>
</html>

The problem seems to be the positioning of your container-top.
The position:Fixed effects the element in such a way that it follows the user's viewport. the position Absolute, on the other hand, takes the actual document into consideration.
Have a look at w3schools description here: https://www.w3schools.com/css/css_positioning.asp

You should define the position to absolute. Fixed means that it is always fixed to the same position on the screen, while absolute will force it to stay where it is in the element.

Aligning Carousel Items with Jquery

I want to achieve this layout with the items of the carousel:
But this is what I've been able to accomplish:
Here is my code and a fiddle http://jsfiddle.net/xvac9usr/8/:
HTML:
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Card Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
</head>
<body>
<div class="carousel">
<button class="carousel__icon carousel__prev">
Prev
</button>
<ul class="carousel__list">
<li class="carousel__item">
<div class="card card__small">
<div class="card__image card__image--1">
<h1 class="heading-primary">Wild</h1>
<h2 class="heading-secondary">Nevada</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Rocky</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card">
<div class="card__image card__image--2">
<h1 class="heading-primary">Hot</h1>
<h2 class="heading-secondary">El Salvador</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Peaceful</div>
<div class="card__tag">Green</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card card__active">
<div class="card__image card__image--3">
<h1 class="heading-primary">Refreshing</h1>
<h2 class="heading-secondary">Amazonas</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Rainy</div>
<div class="card__tag">Dangerous</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card">
<div class="card__image card__image--4">
<h1 class="heading-primary">Hot</h1>
<h2 class="heading-secondary">El Salvador</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Peaceful</div>
<div class="card__tag">Green</div>
</div>
</div>
</div>
</li>
<li class="carousel__item">
<div class="card card__small">
<div class="card__image card__image--5">
<h1 class="heading-primary">Hot</h1>
<h2 class="heading-secondary">El Salvador</h2>
<div class="card__tag-box">
<div class="card__tag">Beautiful</div>
<div class="card__tag">Peaceful</div>
<div class="card__tag">Green</div>
</div>
</div>
</div>
</li>
</ul>
<button class="carousel__icon carousel__next">
Next
</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
JS:
$(document).ready(() => {
var carousel = $(".carousel__list"),
carouselItems = $(".carousel__item"),
clickCount = (centerItemIndex = Math.ceil(carouselItems.length / 2)),
itemWidth =
carouselItems.width() +
parseInt(carouselItems.first().css("marginRight"));
const refreshChildPosition = () => {
for(let i = 0; i < carouselItems.length; ++i){
$(carouselItems[i]).css("left", itemWidth * i);
}
};
refreshChildPosition();
//carousel.width(itemWidth * carouselItems.length);
$(".carousel__next").click(e => {
e.preventDefault();
});
$(".carousel__prev").click(e => {
e.preventDefault();
moveRight();
});
});
CSS:
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit; }
html {
box-sizing: border-box;
font-size: 62.5%; }
body {
font-family: "Open Sans", sans-serif; }
.card {
overflow: hidden;
width: 50rem;
height: 60vh;
border-radius: 0.8rem;
box-shadow: 0px 122px 264px -115px black;
transition: all 0.3s ease-out; }
.card:hover {
transform: translateY(-1rem);
box-shadow: 0px 122px 264px -115px rgba(0, 0, 0, 0.7); }
.card:not(:last-child) {
margin-right: 9rem; }
.card__image {
width: 100%;
height: 100%;
border-radius: inherit;
padding: 3rem 0;
z-index: 1;
position: relative;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
cursor: pointer;
transition: all 0.2s ease-in-out; }
.card__image--1 {
background-image: url("https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea034e0fa9d41f2687c143ab9ab7a30f&auto=format&fit=crop&w=645&q=80");
}
.card__image--2 {
background-image: url("https://images.unsplash.com/photo-1485237254814-0003b25e5672?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d9ee4c294ead6d83c34334b2f19508fe&auto=format&fit=crop&w=2089&q=80");
}
.card__image--3 {
background-image: url("https://images.unsplash.com/photo-1517174637803-6929e01b6e63?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=24a8fc94192aa7a08c7a3575c7190980&auto=format&fit=crop&w=634&q=80");
}
.card__image--4 {
background-image: url("https://images.unsplash.com/photo-1534990874943-dceb856eff5b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f9c8dbe969d60257bef71ac433ba7575&auto=format&fit=crop&w=634&q=80");
}
.card__image--5 {
background-image: url("https://images.unsplash.com/photo-1535089894977-83d4c8854f62?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0e70b451b32ef8730ad0620338ff4e49&auto=format&fit=crop&w=754&q=80");
}
.card__image:hover {
transform: scale(1.03); }
.card__tag-box {
position: absolute;
left: 0;
bottom: 0;
padding: 2rem 3rem;
display: flex;
flex-wrap: wrap; }
.card__tag {
border: solid 1px white;
padding: 3px 5px;
border-radius: 3px;
transition: transform 0.2s, background-position 0.3s ease-out;
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #9e9e9e 50%);
background-size: 225%;
display: inline-block;
margin: 0.2rem 0; }
.card__tag:hover {
background-position: 100%;
transform: translateY(-0.2rem); }
.card__tag:not(:last-child) {
margin-right: 1rem; }
.card__active {
transform: translateY(-0.5rem) scale(1.1); }
.card__active:hover {
transform: translateY(-2rem) scale(1.1); }
.card__small {
transform: scale(0.9); }
.card__small:hover {
transform: translateY(-1rem) scale(0.9); }
.carousel {
height: 100vh;
position: relative; }
.carousel__list {
position: relative;
height: 100%;
width: 100%;
overflow-x: hidden;
display: flex;
justify-content: center;
align-items: center;
list-style-type: none; }
.carousel__item {
position: absolute; }
.carousel__item:not(:last-child) {
margin-right: 4%; }
.carousel__icon {
cursor: pointer;
position: absolute;
width: 5rem;
height: 5rem; }
.carousel__prev {
left: 0;
top: 50%;
z-index: 100; }
.carousel__next {
right: 0;
top: 50%;
z-index: 100; }
body {
font-family: "Open Sans", sans-serif;
font-size: 1.4rem; }
.heading-primary {
font-weight: 300;
letter-spacing: 1px;
font-size: 2em; }
.heading-secondary {
font-size: 1.7rem;
font-weight: 300;
letter-spacing: 1px; }
By subtracting the position by 440 I can seem to get a similar result but it is a hard coded solution and not responsive.

Try removing/comment this piece of css code and test your application
.carousel__item {
position: absolute; }

Overlap issue in html card

In my website, there are three columns using bootstrap which hold images. Each image has button center of the image. I have added a dialog which I want to show when a user clicks on a button in an image. But the dialog window explores on the backside of columns that is images. I want to show dialog over my contents on the whole page. Please, any one help me to fix this.
Here I have attached my codes
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" type = "text/css" href = "hover.css">
<link rel = "stylesheet" type = "text/css" href = "dialogue.css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
margin:43px;
height:70%
}
.img {
height:350px;
width:100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/7aam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text">
<span class="button fa fa-play fa-2x"></span>
<div>surya, shruti hasan</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/1000il.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Karthi, Andriya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/NK.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Arya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</br>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/bahu.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Prabas, Anushka</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/raam.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Jeeva, Saranya</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="hvrbox">
<img class = "img" src="img/sivaji.jpg" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top">
<div class="hvrbox-text"><span class="fa fa-play fa-2x"></span>
<div>Rajini, Shreya</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--row div-->
</div> <!--container div-->
</body>
</html>
Dialogue.css
body {
font-family: Arial, sans-serif;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
Hover.css
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
preview on Plunker

Your problem is z-index issue just increase it for .overlay like below:
.overlay {
z-index: 999;
}
Here is a working JSfiddle.

Arrows on Slick Carousel not appearing

I did a test of the slick carousel on it's own in an empty html page before integrating it into the rest of my code. It worked perfectly and the arrows were there. I copy and pasted my test code into a page with code that already existed. The carousel still worked as intended, but the arrows to toggle the images have now disappeared. I'm not sure what happened or how to fix it.
This is my code:
$(document).ready(function() {
$('.slider').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed: 5000,
});
});
#header {
height: 40px;
position: relative;
margin: 80px auto 0;
}
#header ul {
margin: 0 auto;
width: 800px;
padding: 0;
list-style: none;
}
#header ul li {
float: left;
width: 97px;
}
#header ul li:nth-of-type(4) {
margin-left: 217px;
}
#header ul li a {
text-transform: lowercase;
text-decoration: none;
display: block;
text-align: center;
padding: 12px 0 0 0;
height: 28px;
color: #000;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
#header ul li a:hover {
color: #c4c4c4;
}
.logo {
position: absolute;
left: 50%;
margin: -60px 0 0 -124px;
}
#media screen and (max-width: 800px) {
.logo {
bottom: 100%;
}
#header ul li:nth-of-type(4) {
margin-left: 0;
}
#header ul {
width: 600px;
position: relative;
}
}
ul.sub-menu {
display: none;
position: absolute;
top: 30;
left: 0;
width: auto!important;
overflow: hidden;
padding: 0 1em;
z-index: 2;
background: white;
}
.sub-menu li {
display: block;
float: none!important;
}
.more {
position: relative;
}
.more:hover .sub-menu {
display: inline-block;
}
#filler {
height: 100px;
}
.slider {
width: 750px;
margin: 20px auto;
background: white;
text-align: center;
}
.slider div img {
height: 500px;
margin: auto;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Whatever Photography</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Content/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="slick/slick.css" />
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="header">
<a class="logo">
<img src="imgs/logo.jpg" alt="Whatever Photography" height="140" width="230" />
</a>
<ul>
<li>About
</li>
<li class="more">
Galleries <span class="caret"></span>
<ul class="sub-menu">
<li>Portraits
</li>
<li>Landscapes
</li>
<li>Personal
</li>
</ul>
</li>
<li>Blog
</li>
<li>Info/Rates
</li>
<li>Prints
</li>
<li>Contact
</li>
</ul>
</div>
<div class="container">
<div class="col-md-12" id="filler">
</div>
<div class="col-md-12">
<div class="slider">
<div>
<img src="imgs/slider01.jpg" />
</div>
<div>
<img src="imgs/slider02.jpg" />
</div>
<div>
<img src="imgs/slider03.jpg" />
</div>
<div>
<img src="imgs/slider04.jpg" />
</div>
<div>
<img src="imgs/slider05.jpg" />
</div>
<div>
<img src="imgs/slider06.jpg" />
</div>
<div>
<img src="imgs/slider07.jpg" />
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>

I figured it out. I had the carousel set to a white background and the arrows/dots are colored white by default hence the "disappearance," so I just have to go in and restyle the colors....

You 2 time Add jquery-1.11.0.min.js
one more thing first load jquery library file
Demo link https://jsfiddle.net/a9g1bum6/1/

Categories

Resources