How to add multiple slider support to a simple jquery slider? - javascript

I have a very simple slider with jquery; it supports only one slider, and I want to make it support multiple sliders on the same page.
Example: Slider 1, Slider 2, Slider 3 etc. on the same page.
A working snippet is here working example.
I know I have to use each function—and I did—but it stopped working. I don't know where I am going wrong. This is what I tried; the code was too long, so I shortened it:
$('#slider').each(function() {
var current_slider = $(this);
//slider codes in here
});
Here is my complete code:
$(function(){
var Slider = 0;
$.Slider = function(total){
$("#indicator li").removeClass("active");
$("#image li").hide();
if (Slider < total -1){
Slider++;
$("#indicator li:eq("+Slider+")").addClass("active");
$("#image li:eq("+Slider+")").fadeIn("slow");
}else {
$("#indicator li:first").addClass("active");
$("#image li:first").fadeIn("slow");
Slider = 0;
}
}
var totalLi = $("#indicator li").length;
var interval = setInterval('$.Slider('+totalLi+')',5000);
$("#slider").hover(function(){
clearInterval(interval);
},function(){
interval = setInterval('$.Slider('+totalLi+')',5000);
});
$("#indicator li:first").addClass("active");
$("#image li").hide();
$("#image li:first").show();
$("#indicator li").hover(function(){
var indicators = $(this).index();
$("#indicator li").removeClass("active");
$(this).addClass("active");
$("#image li").hide();
$("#image li:eq("+indicators+")").fadeIn("slow");
Slider = indicators;
return true;
});
});
I don't want to repeat the same code for each slider.
I want it to support multiple sliders like this example; that example uses each function to get all the sliders, but it doesn't have mouseenter and mouseleave and indicators in it.

Simply use .closest() and .find() method to traverse through the current element which is hover . Then , you can use each loop to iterate through slider and get the index of current active li and depending on the position make next li active .
Demo Code :
$(function() {
$.Slider = function(total) {
//loop through all slider
$(".slider-holder").each(function() {
var index = $(this).find(".carousel-indicators .active").index() + 1; //get index of active ..class + 1
$(this).find(".carousel-indicators li").removeClass("active");
$(this).find(".image-slide li").hide();
if (index < total) {
$(this).find(".carousel-indicators li:eq(" + index + ") ").addClass("active");
$(this).find(".image-slide li:eq(" + index + ")").fadeIn("slow");
} else {
$(this).find(".carousel-indicators li:eq(0)").addClass("active");
$(this).find(".image-slide li:eq(0)").fadeIn("slow");
}
})
}
var totalLi = $(".slider-holder:eq(0) .carousel-indicators li").length;
var interval = setInterval('$.Slider(' + totalLi + ')', 5000);
$(".slider-holder").hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval('$.Slider(' + totalLi + ')', 5000);
});
$(".carousel-indicators li").hover(function() {
var indicators = $(this).index();
var selector = $(this); //current li hover...
selector.closest(".carousel-indicators").find("li").removeClass("active"); // to add clas..
selector.addClass("active");
selector.closest(".slider-holder").find(" .image-slide > li").hide();
selector.closest(".slider-holder").find(".image-slide > li:eq(" + indicators + ")").fadeIn("slow");
return true;
});
});
body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}
.slider-holder {
width: 50%;
height: 300px;
float: left;
position: relative;
margin: 0 auto;
overflow: hidden;
border-radius: 5px;
background-color: #000;
}
.slider-holder ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
.slider-holder .content {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
.carousel-prev {
position: absolute;
top: 50%;
left: 30px;
margin-top: -15px;
z-index: 10;
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
.carousel-next {
position: absolute;
top: 50%;
right: 30px;
margin-top: -15px;
z-index: 10;
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
.carousel-indicators {
position: absolute;
right: 0;
top: 0;
left: 0;
z-index: 2;
display: flex;
justify-content: flex-start;
padding: 0;
margin-right: 1%;
margin-bottom: 10px;
margin-left: 1%;
list-style: none;
}
.carousel-indicators li {
box-sizing: content-box;
flex: 0 1 auto;
width: 30px;
height: 30px;
padding: 0;
margin-right: 3px;
margin-left: 3px;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 30px;
text-indent: 0;
cursor: pointer;
background-color: rgba(15, 15, 20, 0.7);
background-clip: padding-box;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: 0.9;
transition: opacity 0.6s ease;
}
.carousel-indicators li:hover,
.carousel-indicators li.active {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="slider-holder" id="slider">
<ul class="image-slide" id="image">
<li>
<div class="img-fluid" style="background-image:url(https://cdn.pixabay.com/photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
</ul>
<ul class="carousel-indicators" id="buton">
<li class="active"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
</div>
<h1> Second slider </h1>
<div class="slider-holder" style="width: 40%;float:right;">
<ul class="image-slide">
<li>
<div class="img-fluid" style="background-image:url(https://cdn.pixabay.com/photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
</ul>
<ul class="carousel-indicators">
<li class="active"><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
</div>

<html>
<head>
<title>Your slider in a simple web page</title>
<style>
body { background-color: #fff; color: #000; padding: 0; margin: 0; }
.container { width: 900px; margin: auto; padding-top: 1em; }
.container .ism-slider { margin-left: auto; margin-right: auto; }
</style>
<link rel="stylesheet" href="ism/css/my-slider.css"/>
<script src="ism/js/ism-2.2.min.js"></script>
</head>
<body>
<div class='container'>
<div class="ism-slider" id="my-slider">
<ol>
<li>
<img src="ism/image/slides/flower-729514_1280.jpg">
<div class="ism-caption ism-caption-0">My slide caption text</div>
</li>
<li>
<img src="ism/image/slides/beautiful-701678_1280.jpg">
<div class="ism-caption ism-caption-0">My slide caption text</div>
</li>
<li>
<img src="ism/image/slides/summer-192179_1280.jpg">
<div class="ism-caption ism-caption-0">My slide caption text</div>
</li>
</ol>
</div>
<p class="ism-badge" id="my-slider-ism-badge"><a class="ism-link"
href="http://imageslidermaker.com" rel="nofollow">generated with ISM</a></p>
<section><h1>Your slider in a simple web page</h1>
<p>This is a working example of your slider.</p>
<p>To get your slider working in your web page add <em>my-slider.css</em>,
<em>ism-2.2.min.js</em> and the slide images to your project directory and paste
the markup into your HTML.</p>
<p>Please see README.txt for more detailed instructions.</p>
<p>* If your slider is not displayed correctly, please first make sure you have
fully extracted the contents of the zip file.</p>
</section></div>
</body>
</html>
You can download css / images and javascript from here
note : select slow download when you download the files for free download

here is the working demo but it still needs some update I keep working on code may this help you.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}
.slider-holder {
width: 50%;
height: 300px;
float: left;
position: relative;
margin: 0 auto;
overflow: hidden;
border-radius: 5px;
background-color: #000;
}
.slider-holder ul, li {
padding:0;
margin:0;
list-style:none;
}
.slider-holder .content {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
.carousel-prev {
position: absolute;
top: 50%;
left: 30px;
margin-top: -15px;
z-index: 10;
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
.carousel-next {
position: absolute;
top: 50%;
right: 30px;
margin-top: -15px;
z-index: 10;
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
.carousel-indicators {
position: absolute;
right: 0;
top: 0;
left: 0;
z-index: 2;
display: flex;
justify-content: flex-start;
padding: 0;
margin-right: 1%;
margin-bottom: 10px;
margin-left: 1%;
list-style: none;
}
.carousel-indicators li {
box-sizing: content-box;
flex: 0 1 auto;
width: 30px;
height: 30px;
padding: 0;
margin-right: 3px;
margin-left: 3px;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 30px;
text-indent: 0;
cursor: pointer;
background-color: rgba(15, 15, 20, 0.7);
background-clip: padding-box;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: 0.9;
transition: opacity 0.6s ease;
}
.carousel-indicators li:hover, .carousel-indicators li.active {
background-color: red;
}
.carousel-indicators1 {
position: absolute;
right: 0;
top: 0;
left: 0;
z-index: 2;
display: flex;
justify-content: flex-start;
padding: 0;
margin-right: 1%;
margin-bottom: 10px;
margin-left: 1%;
list-style: none;
}
.carousel-indicators1 li {
box-sizing: content-box;
flex: 0 1 auto;
width: 30px;
height: 30px;
padding: 0;
margin-right: 3px;
margin-left: 3px;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 30px;
text-indent: 0;
cursor: pointer;
background-color: rgba(15, 15, 20, 0.7);
background-clip: padding-box;
border: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
opacity: 0.9;
transition: opacity 0.6s ease;
}
.carousel-indicators1 li:hover, .carousel-indicators1 li.active {
background-color: red;
}
</style>
</head>
<body>
<div class="slider-holder" id="slider">
<ul class="image-slide" id="image" >
<li>
<div class="img-fluid" style="background-image:url(https://cdn.pixabay.com/photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
</ul>
<ul class="carousel-indicators" id="buton">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
</div>
<h1> Second slider </h1>
<div class="slider-holder" id="slider1" style="width: 40%;float:right;">
<ul class="image-slide" id="image1" >
<li>
<div class="img-fluid" style="background-image:url(https://cdn.pixabay.com/photo/2018/03/13/22/53/puzzle-3223941__480.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2016/10/07/14/13/puzzle-1721635__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2020/03/18/20/01/frankfurt-4945405__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
<li>
<div style="background-image:url(https://cdn.pixabay.com/photo/2014/04/05/11/19/internet-315132__340.jpg); background-position: center; background-size: 100% 100%;height: 300px;">
<div class="content">
<h1>Heading</h1>
</div>
</div>
</li>
</ul>
<ul class="carousel-indicators1" id="buton">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
</div>
<script>
$(function(){
var Slider = 0;
$.Slider = function(total){
$(".carousel-indicators li").removeClass("active");
$("#image li").hide();
if (Slider < total -1){
Slider++;
$(".carousel-indicators li:eq("+Slider+")").addClass("active");
$("#image li:eq("+Slider+")").fadeIn("slow");
}else {
$(".carousel-indicators li:first").addClass("active");
$("#image li:first").fadeIn("slow");
Slider = 0;
}
}
var totalLi = $(".carousel-indicators li").length;
var interval = setInterval('$.Slider('+totalLi+')',5000);
$("#slider").hover(function(){
clearInterval(interval);
},function(){
interval = setInterval('$.Slider('+totalLi+')',5000);
});
$(".carousel-indicators li:first").addClass("active");
$("#image li").hide();
$("#image li:first").show();
$(".carousel-indicators li").hover(function(){
var indicators = $(this).index();
$(".carousel-indicators li").removeClass("active");
$(this).addClass("active");
$("#image li").hide();
$("#image li:eq("+indicators+")").fadeIn("slow");
Slider = indicators;
return true;
});
var Slider1 = 0;
$.Slider = function(total1){
$(".carousel-indicators1 li").removeClass("active");
$("#image1 li").hide();
if (Slider1 < total1 -1){
Slider1++;
$(".carousel-indicators1 li:eq("+Slider1+")").addClass("active");
$("#image1 li:eq("+Slider1+")").fadeIn("slow");
}else {
$(".carousel-indicators1 li:first").addClass("active");
$("#image1 li:first").fadeIn("slow");
Slider1 = 0;
}
}
var totalLi = $(".carousel-indicators1 li").length;
var interval = setInterval('$.Slider('+totalLi+')',5000);
$("#slider1").hover(function(){
clearInterval(interval);
},function(){
interval = setInterval('$.Slider('+totalLi+')',5000);
});
$(".carousel-indicators1 li:first").addClass("active");
$("#image1 li").hide();
$("#image1 li:first").show();
$(".carousel-indicators1 li").hover(function(){
var indicators1 = $(this).index();
$(".carousel-indicators1 li").removeClass("active");
$(this).addClass("active");
$("#image1 li").hide();
$("#image1 li:eq("+indicators1+")").fadeIn("slow");
Slider1 = indicators1;
return true;
});
});
</script>
</body>
</html>

Related

automatically resizing the menu bar by javascript

I want to resize my navigation bar items, so there will be enough distance between them and the sticky logo. How can I achieve that? I tried to edit the container, but it didn't resize and instead overlapping appeared. I mean, it should be put to the right side and leave enough distance between the logo and the menu bar.
body {
font-family: Arial, sans-serif;
margin: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.testmonial {
background-image: url(images/testimonial-bg.jpg);
position: relative;
background-repeat: no-repeat;
}
.testmonial:after {
content: "";
background: #1baaba;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .6;
z-index: 1;
}
.owl-wrapper {
padding: 80px 20px;
z-index: 999;
position: relative;
}
.owl-testmonial {
background: #FFF;
/* max-width: 400px; */
margin: 0 auto;
padding: 40px 25px;
position: unset;
}
.owl-testmonial:before {
content: "\f10d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
text-align: center;
display: block;
font-size: 92px;
color: #e7e7e7;
margin-top: -106px;
}
.owl-testmonial .owl-prev {
position: absolute;
left: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
line-height: 17px !important;
color: #FFF;
}
.owl-testmonial .owl-next {
position: absolute;
right: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
color: #FFF;
line-height: 17px !important;
}
nav {
overflow: hidden;
background-color: #333;
}
nav.sticky {
position: fixed;
top: 0;
width: 100%;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
}
nav li {
margin: 0 30px;
}
nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
nav a:hover {
background-color: #ffeb3b;
color: black;
}
a.active {
background-color: #2196f3;
color: white;
}
.content {
padding: 20px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
.sticky ul {
height: 50px;
/* or any other desired height */
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sticky a {
height: 100%;
/* or any other desired height */
line-height: 50px;
padding: 0 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
background-color: #fff;
width: 30%;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
float: left;
}
input[type="text"],
input[type="email"],
input[type="tel"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 10px;
border: 1px solid #ccc;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #ffeb3b;
color: #2196f3;
border-radius: 10px;
border: 1px solid #2196f3;
margin-top: 20px;
cursor: pointer;
}
.office-map {
margin-top: 50px;
}
/* Responsive styles */
#media screen and (max-width: 992px) {
nav li {
margin: 0 10px;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 80%;
}
}
#media screen and (max-width: 768px) {
header {
height: 60vh;
}
nav {
top: 60vh;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 90%;
}
}
#media screen and (max-width: 576px) {
header {
height: 40vh;
}
nav {
top: 40vh;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 95%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Add JS for owl carousel -->
<link rel="stylesheet" href="fontawesome/css/all.min.css">
<link rel="stylesheet" href="owlcarousel/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/dist/assets/owl.theme.default.min.css">
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
<title>My Homepage</title>
</head>
<body>
<div class="testmonial">
<div class="container">
<div class="owl-wrapper">
<div class="owl-carousel owl-testmonial">
<div class="slide-item">
<img src="testimony/slider1585663811.png" alt="Slide 1">
</div>
<div class="slide-item">
<img src="testimony/slider1589942091.png" alt="Slide 2">
</div>
<div class="slide-item">
<img src="testimony/slider1590030001.png" alt="Slide 3">
</div>
</div>
</div>
</div>
</div>
<!-- 7 items sticky menu bar -->
<nav id="navbar">
<ul id="nav-ul">
<li><a class="active" href="#home">Home</a></li>
<li>About Us</li>
<li>Tabungan</li>
<li>Kredit</li>
<li>Deposito</li>
<li>Berita</li>
<li>Pengajuan Kredit</li>
</ul>
</nav>
<main class="content">
<!-- 3 static benefits -->
<section class="benefits">
<div class="card">
<h3>Benefit 1</h3>
<p>Description</p>
</div>
<div class="card">
<h3>Benefit 2</h3>
<p>Description</p>
</div>
<div class="card">
<h3>Benefit 3</h3>
<p>Description</p>
</div>
</section>
<!-- 3 types of product -->
<section class="products">
<h2>Products</h2>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</section>
<!-- ID tracking -->
<section class="id-tracking">
<h2>ID Tracking</h2>
<p>Description</p>
</section>
<!-- 3 dynamic testimonies -->
<section class="testimonies">
<h2>Testimonies</h2>
<div class="owl-carousel owl-theme">
<div class="testimony-1">Testimony 1</div>
<div class="testimony-2">Testimony 2</div>
<div class="testimony-3">Testimony 3</div>
</div>
</section>
<!-- 4 dynamic slider of news -->
<section class="news">
<h2>News</h2>
<div class="owl-carousel owl-theme">
<div class="news-1">News 1</div>
<div class="news-2">News 2</div>
<div class="news-3">News 3</div>
<div class="news-4">News 4</div>
</div>
</section>
<!-- suggestion box -->
<section class="suggestion-box">
<h2>Suggestion Box</h2>
<form action="#">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phone-number">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<button type="submit">Submit</button>
</form>
</section>
<!-- static map to the office -->
<section class="map">
<h2>Map to the Office</h2>
<img src="map.jpg" alt="Map to the Office">
</section>
</main>
<script src="owlcarousel/jquery.min.js"></script>
<script src="owlcarousel/dist/owl.carousel.min.js"></script>
<script>
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
var logo = document.createElement("img");
logo.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
logo.style.height = "50px";
logo.style.marginLeft = "40px";
logo.style.float = "left";
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
if (!navbar.classList.contains("logo")) {
navbar.classList.add("logo");
navbar.insertBefore(logo, navbar.firstChild);
navbar.style.height = "50px";
}
} else {
navbar.classList.remove("sticky");
navbar.classList.remove("logo");
navbar.removeChild(logo);
navbar.style.height = "auto";
}
}
window.onscroll = function() {
myFunction();
};
</script>
</body>
</html>

Scrolling div/section with indicators

I want to create a vertical scrolling div with an active indicators. However I'm having trouble with it event firing on the div targeted. I set it to window.addEventListener it works fine at full height of the window but if I set it to div.addEventListener it's not firing inside of the element at all. I'm Hoping someone has some pointer for this. Here's what I got so far.
section.scroller {
max-width: 900px;
margin: auto;
background: antiquewhite;
scroll-behavior: smooth;
position: relative;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
padding-right: 17px;
// padding: 0 17px;
box-sizing: content-box;
}
.sec {
min-height: 100vh;
// width: 100vw;
display: flex;
align-items: center;
justify-content: center;
scroll-behavior: smooth;
// width: 100%;
&:nth-child(odd) {
background: #ddd;
}
}
.lnbNavbar {
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 0;
border-radius: 15px;
transition: opacity .4s ease .2s;
opacity: 0;
position: relative;
float: right;
transition: .3s all;
ul {
list-style: none;
padding: 0;
margin: 0;
li {
width: 0px;
position: relative;
text-align: right;
.dot {
border: 2px solid#333;
width: 10px;
height: 10px;
display: inline-block;
border-radius: 50%;
transition: .2s ease;
span {
display: inline-block;
}
}
}
}
}
.lnbNavbar ul li a:active,
.lnbNavbar ul li a:hover {
border-color: rgb(124, 7, 7);
background-color: gray;
transform: scale(1.8);
}
.lnbNavbar ul li.active a,
.lnbNavbar ul li:hover a {
border-color: rgb(124, 7, 7);
background-color: gray;
transform: scale(1.8);
}
.outter {
width: 800px;
height: 500px;
margin: auto;
overflow: hidden;
}
<div class="outter" id="outter">
<section class="scroller" id="scroller">
<nav class="lnbNavbar">
<ul>
<li class="home active">
<a href="#home" class=" home dot">
<span></span>
</a>
</li>
<li class="about">
<a href="#about" class="about dot">
<span></span>
</a>
</li>
<li class="service">
<a href="#service" class="service dot">
<span></span>
</a>
</li>
<li class="project">
<a href="#project" class="project dot">
<span></span>
</a>
</li>
<li class="contact">
<a href="#contact" class="contact dot">
<span></span>
</a>
</li>
</ul>
</nav>
<section class="sec" id="about"><h4>about</h4></section>
<section class="sec" id="service"><h4>service</h4></section>
<section class="sec" id="project"><h4>project</h4></section>
<section class="sec" id="contact"><h4>contact</h4></section>
<section class="sec" id="home"><h4>home</h4></section>
</section>
<script>
const sections = document.querySelectorAll('section');
const navLi = document.querySelectorAll('.lnbNavbar ul li');
const div = document.getElementById("outter")[0];
div.addEventListener('scroll', ()=> {
let current = '';
sections.forEach( section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if(pageYOffset >= (sectionTop - sectionHeight / 4)){
current = section.getAttribute('id');
}
})
console.log(current);
navLi.forEach( li => {
li.classList.remove('active');
if(li.classList.contains(current)){
li.classList.add('active')
}
})
})
</script>
</div>

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.

How do I add a previous and next function to on a vertical carousel?

How do I add a previous and next function on a vertical carousel that is also compatible with Squarespace? I am trying to model a carousel around the following code I found from codepen
When I add more images to the carousel, I am unable to scroll down. Can someone help in showing me how I can add this functionality please? Thank you in advance!
Below is the code:
HTML
<div class="wrapper">
<ul class="list-reset">
<li class="active">
<span>26 JAN</span>
<a>Great win for the club</a>
<img src="https://images.unsplash.com/photo-1420316078344-6149cb82b2c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
alt="">
</li>
<li>
<span>22 JAN</span>
<a>Can they be caught?</a>
<img src="https://images.unsplash.com/photo-1517466787929-bc90951d0974?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li>
<span>17 JAN</span>
<a>League is nearly over</a>
<img src="https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li class="active">
<span>26 JAN</span>
<a>Great win for the club</a>
<img src="https://images.unsplash.com/photo-1420316078344-6149cb82b2c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
alt="">
</li>
<li>
<span>22 JAN</span>
<a>Can they be caught?</a>
<img src="https://images.unsplash.com/photo-1517466787929-bc90951d0974?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li>
<span>17 JAN</span>
<a>League is nearly over</a>
<img src="https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li class="active">
<span>26 JAN</span>
<a>Great win for the club</a>
<img src="https://images.unsplash.com/photo-1420316078344-6149cb82b2c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"
alt="">
</li>
<li>
<span>22 JAN</span>
<a>Can they be caught?</a>
<img src="https://images.unsplash.com/photo-1517466787929-bc90951d0974?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
<li>
<span>17 JAN</span>
<a>League is nearly over</a>
<img src="https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
alt="">
</li>
</ul>
<div class="featured-image"></div>
</div>
CSS
body {
background: #f3f3f3;
color: #111;
padding: 20px;
display: flex;
place-items: center;
height: 100%;
justify-content: center;
align-items: center;
height: 90vh;
}
.wrapper {
width: 80%;
position: relative;
max-width: 100%;
overflow: hidden;
// border-radius: 3px;
box-shadow: 0 8px 32px rgba(0, 0, 0, .1)
}
.list-reset {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
width: calc(30% - 4px);
min-height: 350px;
height: 70vh;
flex-direction: column;
border: 2px solid #fff;
li {
padding: 20px;
border-bottom: 2px solid #fff;
transition: all 600ms ease;
cursor: pointer;
&:hover {
background: #f9f9f9;
}
img {
transition: all 600ms ease;
opacity: 0;
transform: translatey(10px);
transform-origin: bottom;
}
a {
display: block;
margin-top: 4px;
}
span {
font-size: 0.7rem;
opacity: 0.7;
}
img {
position: absolute;
top: 0;
right: 0;
width: 70%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
.active {
z-index: 999;
background: #fff;
a {
color: #548AF7;
}
img {
opacity: 1;
transform: translatey(0);
}
}
}
Javascript
$('.list-reset li').on('click', function() {
$('.list-reset li').removeClass('active')
$(this).addClass('active')
})
You could just add:
.list-reset{
overflow: auto;
}
So you can scroll down the list.
I'm aware it has been months so you probably worked this out, but I'll leave this here just in case.
https://www.quackit.com/html/codes/html_scroll_box.cfm

How can I execute HTML code with a Javascript for loop?

I am trying to create a page, where each film (from a database) is displayed in an image slider, I have managed to make the image slideshow but I am now attempting to repeat this code via a for loop, rather than add an individual film each time.
This is my code currently, without any for loops, I have attached my HTML and external css file
tml {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 10px;
/* remove scrollbar space */
background: transparent;
/* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
/*::-webkit-scrollbar-thumb {
background: #FF0000;
}*/
#wrapper {
max-width: 100%;
padding: 50px 75px 50px 45px;
position: relative;
bottom: 0em;
}
button:focus {
outline: 0 !important;
}
.left-controls {
position: absolute;
top: 0;
left: 0;
width: 4%;
height: 1000px;
z-index: 40;
/*background:#fff;*/
opacity: 1;
cursor: pointer;
text-align: center;
webkit justify-content: center;
justify-content: center;
display: webkit box;
display: webkit flex;
display: moz box;
display: ms flexbox;
display: flex;
color: #fff;
}
.fa-chevron-left-extra {
align-self: center;
position: relative;
height: auto;
top: -250px;
transform-origin: 55% 50%;
font-style: normal;
font-weight: 400;
line-height: 1;
font-variant: normal;
text-transform: none;
font-size: 2.5vw;
transition: transform .1s ease-out 0s;
transition-property: transform;
transition-duration: 0.1s;
transition-timing-function: ease-out;
transition-delay: 0s;
color: blue;
opacity: .1;
}
.right-controls {
position: absolute;
top: 0;
right: 0;
width: 4%;
height: 1000px;
z-index: 40;
/*background:#fff;*/
opacity: 1;
cursor: pointer;
text-align: center;
webkit justify content: center;
justify-content: center;
display: webkit box;
display: webkit flex;
display: moz box;
display: ms flexbox;
display: flex;
color: #fff;
}
.fa-chevron-right-extra {
align-self: center;
position: relative;
height: auto;
top: -250px;
transform-origin: 55% 50%;
font-style: normal;
font-weight: 400;
line-height: 1;
font-variant: normal;
text-transform: none;
font-size: 2.5vw;
transition: transform .1s ease-out 0s;
transition-property: transform;
transition-duration: 0.1s;
transition-timing-function: ease-out;
transition-delay: 0s;
color: blue;
opacity: .1;
}
.title {
color: #eee;
}
.module-section {
/*max-width: 100%;*/
overflow: hidden;
overflow-x: scroll;
/* border-left:1px solid #fff;
border-right:1px solid #fff;
*/
}
ul {
width: 600em;
list-style-type: none;
padding: 50px 0 50px 0;
}
#content {
position: relative;
}
/*
.arrow-guides, .arrow-guides:hover{
font-size:29px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
float:left;
position:relative;
top:80px;
left:-10px;
padding: 10px 5px 5px 2px;
background:#999;
color:#fff;
}
*/
/*
.arrow-guides-right, .arrow-guides-right:hover{
font-size:29px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
float:right;
position:relative;
bottom:185px;
right:-40px;
padding: 10px 2px 5px 5px;
background:#999;
color:#fff;
}
*/
.card {
width: 15em;
height: 350px;
background: mistyrose;
float: left;
margin-right: 10px;
margin-bottom: 50px;
cursor: pointer;
transform: scale(1);
visibility: visible;
-moz-box-shadow: 0px 1px 5px 0px #676767;
-webkit-box-shadow: 0px 1px 5px 0px #676767;
box-shadow: 0px 1px 5px 0px #676767;
}
.card:hover {
cursor: pointer;
transform: scale(1);
visibility: visible;
transition: all .2s ease-in-out;
transform: scale(1.1);
z-index: 100;
position: relative;
transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
transition-duration: 400ms;
}
.inside-top {
width: 14em;
height: 300px;
position: absolute;
text-align: center;
top: 0;
left: 0;
z-index: 100;
}
.clearfix {
overflow: auto;
zoom: 1;
}
<div id="wrapper">
<span id="controlL" class="left-controls" role="button" aria-label="See Previous Modules">
<b class="fa fa-chevron-left fa-chevron-left-extra" aria-hidden="true"></b>
</span>
<div class="module-section clearfix">
<!-- <button class="btn arrow-guides fa-chevron-left"></button> -->
<ul id="content">
<li class="card">
<div class="inside-top">
<input type="image" id="image" alt="1917" src="./Images/1.png">
<h4>1917</h4>
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/2.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/3.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/4.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/5.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/6.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/7.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/8.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/9.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/10.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/11.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/12.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/13.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/14.png">
</div>
</li>
<li class="card">
<div class="inside-top">
<img src="./Images/15.png">
</div>
</li>
</ul>
</div>
<!--end of module-section-->
<span id="controlR" class="right-controls" role="button" aria-label="See Previous Modules">
<b class="fa fa-chevron-right fa-chevron-right-extra" aria-hidden="true"></b>
</span>
<!-- <button class="btn arrow-guides-right fa-chevron-right"></button> -->
</div>
Assuming your data is stored in a variable called films like the following:
var films = [["1917", "1.png"], ["The Lion King", "2.png"], ["Parasite", "3.png"]];
you can loop through them like this:
var i, len, films, list;
for (i = 0, len = films.length, list=""; i < len; i++) {
list += "<li class='card'><div class='inside-top'><img src='http://yoursite/wherefilesare/" + films[i][1] + "' id='image-" + i + "><h4>" + films[i][0] + "</h4>";
}
then echo the list inside your unordered list:
document.getElementById("content").innerHTML = list;
Updated the code to add an ID to images. The ID will be "image-(number)" and will be unique to each image then you could do something like this:
document.getElementById("image-1").addEventListener("click", doSomethingMethod);
I think this would do. Do the changes if needed. Add this script in script tag.
const ul_tag = document.getElementById("content")
let list_of_images = ["1.png","2.png","3.png"] // so on ...
list_of_images.forEach( (image, index) => {
let card = document.createElement("li")
card.setAttribute("class", "card")
let div = document.createElement("div")
div.setAttribute("class", "inside-top")
card.appendChild(div)
let img_tag = document.createElement("img")
img_tag.setAttrbute("src", "./Images/"+image)
div.appendChild(img_tag)
ul_tag.appendChild(card)
})
Hi try this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="dataOutput"></div>
</body>
<script>
data = [
{ name: "Alessio", surname: "Bardolino", age: "20" },
{ name: "Giovanni", surname: "Told", age: "32" },
{ name: "Sonia", surname: "Bin", age: "42" }
]
createTable(data);
function createTable(data) {
var htmlContents = "";
const app = document.getElementById('dataOutput');
data.forEach(resp => {
htmlContents += "<div class='container'>";
htmlContents += "<div><p class='name'>" + resp.name + "</p></div>";
htmlContents += "<div class='total'><p>" + resp.surname + "</p></div>";
htmlContents += "<div class='total'><p>" + resp.age + "</p></div>";
htmlContents += "</div>";
});
app.innerHTML = htmlContents;
}
</script>
</html>
I hope this help you!!!
Regards
In my example am loading from a JSON but you can equally do same with your DB.
<ul id="imageLoad"></ul>
<script>
var images = [
"https://images.unsplash.com/photo-1534067783941-51c9c23ecefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1531702275836-8a2922d78491?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1523032217284-d9e49d6c5f04?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1534142499731-a32a99935397?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"];
var loadPhotos = "";
var i;
for (i = 0; i < images.length; i++) {
loadPhotos += "<li><img src=" + images[i] + " /></li>";
}
document.getElementById("imageLoad").innerHTML = loadPhotos;
</script>
Try let me know if this works and feel free to ask if you need clarification.

Categories

Resources